:root {
    --jcp-text: #555557;
    --jcp-heading: #555557;
    --jcp-muted: #9b9b9d;
    --jcp-text-muted: #9b9b9d;
    --jcp-border: #dededf;
    --jcp-bg: #ffffff;
    --jcp-green-bg: #f6fafa;
    --jcp-green-bg-strong: #daede9;
    --jcp-yellow-bg: #fff8e6;
    --jcp-yellow-bg-strong: #fcf3cf;
    --jcp-accent: #4f857b;
    --jcp-main-accent: #4f857b;
    --jcp-button-bg: #4f857b;
    --jcp-accent-soft: #daede9;
    --jcp-accent-light: #bad7d2;
    --jcp-list-dot: #ff8d69;
    --jcp-hover-accent: #ff8d69;
    --jcp-coral: #ff8d69;
    --jcp-coral-light: #ffb197;
    --jcp-coral-soft: #fec9b0;
    --jcp-coral-bg: #fff4ef;
    --jcp-yellow: #f4d44f;
    --jcp-table-header-bg: #ffb197;
    --jcp-table-odd-bg: #fff4ef;
    --jcp-table-even-bg: #fec9b0;
    --jcp-section-about-bg: #ffffff;
    --jcp-section-project-bg: #f6fafa;
    --jcp-section-materials-bg: #ffffff;
    --jcp-section-gauge-bg: #fff8e6;
    --jcp-section-notes-bg: #ffffff;
    --jcp-section-sizes-bg: #ffffff;
    --jcp-section-abbreviations-bg: #f6fafa;
    --jcp-section-techniques-bg: #ffffff;
    --jcp-section-instructions-bg: #ffffff;
    --jcp-section-finishing-bg: #ffffff;
    --jcp-accent-text: #ffffff;
}

.jcp-pattern {
    box-sizing: border-box;
    margin: 2rem 0;
    padding: 0;
    color: var(--jcp-text);
    line-height: 1.65;
}

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

/* Header is sticky — pill + print button on same row; print hides when stuck */
.jcp-pattern {
    /* The gap between the bottom of her theme's sticky nav and the top of the pill (v0.3.785).
       ONE number, named, because it is the thing that gets adjusted by eye: the nav height itself
       is measured at runtime by jcpAutoHeaderOffset() and must not be touched. Was an unnamed 20px
       buried in the calc below, which with the 6px stuck padding read as 26px and she found too
       far down once the button finally cleared the nav. */
    --jcp-sticky-gap: 8px;
}
.jcp-header {
    background: transparent;
    padding: 0 0 1rem;
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--jcp-theme-header-height, 0px) + var(--jcp-sticky-gap, 8px));
    z-index: 100;
    transition: padding 0.15s;
}
.jcp-header.jcp-is-stuck {
    padding: 6px 0;
}
.jcp-header.jcp-is-stuck .jcp-print-button {
    display: none;
}
/* The whole header is the sticky element, but only the pill was ever meant to float — the header is
   transparent, so once it lifted off the page the title sat directly on top of the text scrolling
   under it with nothing behind, and the two read through each other. The print button already hid
   itself here; the title needs to do the same. Hidden rather than given a white bar, because that
   bar would cut across whichever colored section happened to be behind it. */
.jcp-header.jcp-is-stuck .jcp-pattern-title {
    display: none;
}

/* The invisible marker that tells the pill when it has stuck.
 *
 * NOT width: 100% (v0.3.787). Its containing block is offset, so 100% of that block plus the offset
 * reached 410px inside a 390px phone -- a 1px-tall element nobody can see, holding the page 20px
 * open. Measured in a real 390px viewport: it was the ONLY thing on the page past the right edge.
 *
 * left/right: 0 pins it to the containing block instead of guessing at its width, which is what
 * "100%" was doing. The element exists only to be observed; its width was never load-bearing. */
.jcp-sticky-sentinel {
    position: absolute;
    height: 1px;
    left: 0;
    right: 0;
    pointer-events: none;
}

.jcp-pattern-title {
    margin-top: 0;
}

/* Controls row: pill + print button side by side */
.jcp-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.jcp-controls-sticky {
    /* No position:sticky here — parent .jcp-header handles it */
}

/* THE FILL LIVES ON THE WRAPPER, NOT ON THE SELECT (v0.3.857).
   Her report: the pill came up terracotta with white text, then went blank white after choosing a
   size — *"If i tap in the screen it gets teraxotta with white text though. But if someone doesnt
   tap the screen it seems to not work."* Needing a tap to come back is the tell: it is a REPAINT,
   not a cascade. Android's native picker paints the closed control with the SELECTED OPTION's
   background when it closes, and the option rule below used to say `background: #fff` — so the pill
   went white while the select's own `-webkit-text-fill-color: #fff` kept the text white too.
   A plain div has no such behaviour, so the colour is safe here. */
.jcp-controls-pill-inner {
    display: inline-flex;
    align-items: stretch;
    height: 48px;
    background: var(--jcp-button-bg, #ff8d69);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border-radius: 100px;
    overflow: hidden;
}

/* FILLED, NOT OUTLINED (v0.3.856). Her call, after looking at six versions rendered at real size:
   the pill is her coral with white bold text, rather than coral text on white.

   Recorded because the numbers say otherwise and the decision was made with them in hand: white on
   #ff8d69 is 2.27:1, the same ratio as the coral-on-white it replaces, since contrast is symmetric
   and swapping which one is the text changes nothing. Her reasoning — *"But we have the readability
   version...doesnt that make up for it"* — holds: `body.jcp-text-mode` turns this pill #1a1a1a with
   white text, about 17:1, and that override is more specific than these rules so it still wins.
   **So do not "fix" this back to a darker colour.** If it is ever revisited, dark text on the same
   coral fill is 5.98:1 and was the alternative on the table. */
.jcp-size-select {
    height: 100%;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: transparent;
    border: none;
    border-radius: 0;
    /* Symmetric padding and text-align-last, so a short label ("M") sits in the middle of the pill
       instead of hard against the left edge — which is what she saw. text-align-last is the property
       that actually centres a <select>'s closed value; text-align alone is ignored in some engines. */
    padding: 0 18px;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.jcp-size-select option {
    color: #555557;
    -webkit-text-fill-color: #555557;
}

/* The focus ring used to be the button colour, which is now the pill's own fill — a coral ring on a
   coral pill is invisible, and this is the one control a keyboard reader has to find. Dark, inset,
   so it reads against the fill. */
.jcp-size-select:focus {
    outline: 3px solid var(--jcp-text, #555557);
    outline-offset: -3px;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/* ── All pattern buttons — shared style ────────────────────────── */
.jcp-print-button,
.jcp-buy-btn,
.jcp-bundle-callout .jcp-bundle-button,
.jcp-skill-quiz-button,
.jcp-membership-promo-button,
.jcp-gate-button,
.entry-content .jcp-pattern .jcp-section-content .jcp-library-entry-btn,
.dynamic-entry-content .jcp-pattern .jcp-section-content .jcp-library-entry-btn,
.jcp-pattern .jcp-section-content .jcp-library-entry-btn,
.jcp-library-entry-btn {
    /* Every other button here is an <a>, which inherits the theme font for free. A <button> does
       not — it takes the browser's default — so the gate's submit button came out in a different
       typeface from every other button on the site until this was added. */
    font-family: inherit;
    font-weight: bold !important;
    /* !important for the same reason as the weight above: GeneratePress styles `button` directly,
       and a <button> therefore loses this while every <a> keeps it — which is why the gate's submit
       came out a different size from every other button on the page. */
    font-size: 0.875rem !important;
    background: var(--jcp-btn-bg, #ffb197) !important;
    color: var(--jcp-btn-text, #000000) !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0.75rem 1.75rem;
    text-decoration: none !important;
    line-height: 1.3;
    cursor: pointer;
    transition: opacity 0.15s;
    box-shadow: none !important;
}

.jcp-print-button:hover,
.jcp-print-button:focus,
.jcp-buy-btn:hover,
.jcp-bundle-callout .jcp-bundle-button:hover,
.jcp-skill-quiz-button:hover,
.jcp-skill-quiz-button:focus,
.jcp-membership-promo-button:hover,
.jcp-membership-promo-button:focus,
.jcp-gate-button:hover,
.jcp-gate-button:focus,
.entry-content .jcp-pattern .jcp-section-content .jcp-library-entry-btn:hover,
.dynamic-entry-content .jcp-pattern .jcp-section-content .jcp-library-entry-btn:hover,
.jcp-pattern .jcp-section-content .jcp-library-entry-btn:hover,
.jcp-library-entry-btn:hover {
    opacity: 0.8;
    color: var(--jcp-btn-text-hover, #555557) !important;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Print — 1rem since it sits in the sticky header; higher specificity for bold override */
.jcp-pattern .jcp-header .jcp-print-button { border-radius: 0; font-size: 1rem; font-weight: bold !important; }

.jcp-section {
    border: 0;
    background: var(--jcp-bg);
    margin: 0 0 1rem;
    padding: 1.25rem 0;
}

.jcp-section-about { background: var(--jcp-section-about-bg); --jcp-this-bg: var(--jcp-section-about-bg); }
.jcp-section-projectLevel { background: var(--jcp-section-project-bg); --jcp-this-bg: var(--jcp-section-project-bg); }
.jcp-section-materials { background: var(--jcp-section-materials-bg); --jcp-this-bg: var(--jcp-section-materials-bg); }
.jcp-section-gauge { background: var(--jcp-section-gauge-bg); --jcp-this-bg: var(--jcp-section-gauge-bg); }
.jcp-section-notes { background: var(--jcp-section-notes-bg); --jcp-this-bg: var(--jcp-section-notes-bg); }
.jcp-section-sizeMeasurement { background: var(--jcp-section-sizes-bg); --jcp-this-bg: var(--jcp-section-sizes-bg); }
.jcp-section-abbreviations { background: var(--jcp-section-abbreviations-bg); --jcp-this-bg: var(--jcp-section-abbreviations-bg); }
.jcp-section-techniques { background: var(--jcp-section-techniques-bg); --jcp-this-bg: var(--jcp-section-techniques-bg); }
.jcp-section-stitchesNeeded,
.jcp-section-techniquesNeeded { background: var(--jcp-section-techniques-bg); --jcp-this-bg: var(--jcp-section-techniques-bg); }
.jcp-section-instructions { background: var(--jcp-section-instructions-bg); --jcp-this-bg: var(--jcp-section-instructions-bg); }
.jcp-section-finishing { background: var(--jcp-section-finishing-bg); --jcp-this-bg: var(--jcp-section-finishing-bg); }

.jcp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.jcp-section-title {
    margin-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.jcp-section-title--image {
    text-align: center;
    margin-bottom: 0.5rem;
}
/* ONE SCALE FOR EVERY HEADING (v0.3.855).

   Her report: "The headings doesnt look equally sized... Id like it to look like they are the same
   font size." They ARE the same font size in the source — the pen stroke measures 17-19px in all 21
   heading files in use. What differs is the CANVAS: 200, 250, 280 and 300px, because a phrase with a
   descender needs more room. Sizing them all to one CSS height equalises the canvas, so the
   lettering came out unequal by up to 1.59x.

   Height is therefore the file's own canvas height times one scale. --jcp-h is published by PHP from
   the PNG header; the scale is the design decision and lives here.

   THIS WAS ALREADY BEING DONE BY HAND, for some sections and not others. Fourteen rules carried
   per-section overrides — "About: 125px canvas -> scale 1.25", "Gauge: 140px canvas -> scale 1.4" —
   and every one of them works out to this same 0.28. The sections nobody had got to (Finishing,
   Stitches, Techniques, all on 250px canvases) fell back to the base rule and rendered at 80% size,
   which is what she was looking at. One rule now, and a heading added later is right for free. */
.jcp-pattern .jcp-section-title--image img {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: min(calc(var(--jcp-h, 200) * var(--jcp-heading-scale) * 1px), calc(var(--jcp-h, 200) * (100vw - var(--jcp-heading-gutter)) / var(--jcp-heading-widest))) !important;
}

.jcp-section-content {
    color: var(--jcp-text);
}

.jcp-section-content a,
.jcp-blog-intro a,
.jcp-yarn-section a,
.jcp-materials-section a,
.jcp-best-tips-section a,
.jcp-join-granny-section a,
.jcp-crochet-a-blanket-box a,
.jcp-blog-find-more a,
.jcp-how-to-crochet-box a:not(.jcp-buy-btn),
.jcp-share-worth-noting a {
    color: var(--jcp-text);
    font-weight: bold;
    text-decoration: none;
    border-bottom: solid 4px var(--jcp-accent);
}

.jcp-section-content a:hover,
.jcp-section-content a:focus,
.jcp-blog-intro a:hover,
.jcp-blog-intro a:focus,
.jcp-yarn-section a:hover,
.jcp-yarn-section a:focus,
.jcp-materials-section a:hover,
.jcp-materials-section a:focus,
.jcp-best-tips-section a:hover,
.jcp-best-tips-section a:focus,
.jcp-join-granny-section a:hover,
.jcp-join-granny-section a:focus,
.jcp-crochet-a-blanket-box a:hover,
.jcp-crochet-a-blanket-box a:focus,
.jcp-blog-find-more a:hover,
.jcp-blog-find-more a:focus,
.jcp-how-to-crochet-box a:hover,
.jcp-how-to-crochet-box a:focus,
.jcp-share-worth-noting a:hover,
.jcp-share-worth-noting a:focus {
    background: var(--jcp-accent-soft);
    color: var(--jcp-text);
}

.jcp-section-content > *:first-child {
    margin-top: 0;
}

.jcp-section-content > *:last-child {
    margin-bottom: 0;
}

.jcp-size-token {
    font-weight: 700;
    background: var(--jcp-yellow-bg-strong);
    padding: 0 0.15em;
}

@media print {
    .jcp-actions {
        display: none !important;
    }

    .jcp-crochet-a-blanket-section {
        display: none !important;
    }

    .jcp-pattern {
        margin: 0;
    }

    .jcp-header,
    .jcp-section {
        break-inside: avoid;
    }

    .jcp-size-token {
        background: transparent;
        padding: 0;
    }
}

.jcp-subsection-title {
    margin: 1rem 0 0.5rem;
}

/* Plugin section lists — let the site theme style bullets.
   Two-class selectors beat the theme's .entry-content ul specificity. */
.jcp-pattern .jcp-hook-size-list,
.jcp-pattern .jcp-yarn-weight-list,
.jcp-pattern .jcp-yarn-amount-list,
.jcp-pattern .jcp-yarn-characteristics-list,
.jcp-pattern .jcp-other-materials-list,
.jcp-pattern .jcp-standard-notes-list,
.jcp-pattern .jcp-size-notes-list,
.jcp-pattern .jcp-size-adjustments-list {
    margin: 0.35rem 0 0 1.25em;
    padding-left: 1.45em;
}

.jcp-pattern .jcp-hook-size-list li,
.jcp-pattern .jcp-yarn-weight-list li,
.jcp-pattern .jcp-yarn-amount-list li,
.jcp-pattern .jcp-yarn-characteristics-list li,
.jcp-pattern .jcp-other-materials-list li,
.jcp-pattern .jcp-standard-notes-list li,
.jcp-pattern .jcp-size-notes-list li,
.jcp-pattern .jcp-size-adjustments-list li {
    margin: 0.2rem 0;
}

.jcp-project-level-link,
.jcp-pattern .jcp-yarn-weight-list,
.jcp-pattern .jcp-hook-size-list {
    margin-bottom: 0;
}

.jcp-material-label {
    font-weight: 700;
    margin: 0.85rem 0 0.2rem;
}

.jcp-material-label + p {
    margin-top: 0;
}

.jcp-yarn-weight-links {
    margin: 0.2rem 0;
}


.jcp-yarn,
.jcp-other-materials {
    margin-top: 1rem;
}

/* v0.1.15 frontend spacing refinements */
.jcp-yarn {
    margin-top: 2rem;
}

.jcp-yarn .jcp-subsection-title {
    margin-top: 0;
}

.jcp-pattern .jcp-material-label {
    margin-top: 1.05rem;
}

/* Pattern body links — match theme style (bold, 4px teal border-bottom, no underline). */
.jcp-pattern .jcp-section-content a,
.entry-content .jcp-pattern .jcp-section-content a,
.dynamic-entry-content .jcp-pattern .jcp-section-content a {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    border: 0 !important;
    border-bottom: solid 4px var(--jcp-accent) !important;
    box-shadow: none !important;
    background-image: none !important;
    text-decoration: none !important;
    font-weight: bold !important;
    color: var(--jcp-text) !important;
}

.jcp-pattern .jcp-section-content a::before,
.jcp-pattern .jcp-section-content a::after,
.entry-content .jcp-pattern .jcp-section-content a::before,
.entry-content .jcp-pattern .jcp-section-content a::after,
.dynamic-entry-content .jcp-pattern .jcp-section-content a::before,
.dynamic-entry-content .jcp-pattern .jcp-section-content a::after {
    display: none !important;
    content: none !important;
}

/* v0.1.22 onwards: removed — let the site theme style bullets (same as abbreviations). */

.jcp-pattern .jcp-standard-notes {
    margin-top: 1rem;
}

.jcp-pattern .jcp-section-gauge p {
    margin-top: 0;
}

/* v0.1.30: soft brand-color measurement table without table lines. */
.jcp-size-measurement-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.25rem;
}

.jcp-size-measurement-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
    border: 0 !important;
    font-size: inherit;
}

.jcp-size-measurement-table th,
.jcp-size-measurement-table td {
    border: 0 !important;
    padding: 0.78rem 0.9rem;
    text-align: left;
    vertical-align: top;
}

.jcp-measurement-unit-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.85rem;
    font-weight: 700;
    color: var(--jcp-text);
}

.jcp-measurement-unit-label select {
    max-width: 12rem;
    min-height: 2.15rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--jcp-border);
    background: var(--jcp-bg);
    color: var(--jcp-text);
    font: inherit;
}

.jcp-size-measurement-table thead th {
    background: var(--jcp-table-header-bg);
    color: var(--jcp-text);
    font-weight: 700;
}

.jcp-size-measurement-table tbody tr {
    background: var(--jcp-table-odd-bg);
}

.jcp-size-measurement-table tbody tr:nth-child(even) {
    background: var(--jcp-table-even-bg);
}

.jcp-measurement-unit-cm .jcp-measurement-inches,
.jcp-measurement-unit-cm .jcp-measurement-separator,
.jcp-measurement-unit-inches .jcp-measurement-cm,
.jcp-measurement-unit-inches .jcp-measurement-separator {
    display: none !important;
}

.jcp-size-measurement-table tbody th {
    font-weight: 700;
    white-space: nowrap;
}

.jcp-size-measurement-table tbody td,
.jcp-size-measurement-table tbody th {
    background: transparent;
}

.jcp-size-notes,
.jcp-size-adjustments {
    margin-top: 1.5rem;
}

/* Keep size-filtered rows hidden even when theme/plugin list display rules use !important. */
.jcp-pattern .jcp-size-list-item[hidden],
body .entry-content .jcp-pattern .jcp-size-list-item[hidden],
body .dynamic-entry-content .jcp-pattern .jcp-size-list-item[hidden] {
    display: none !important;
}


.jcp-parser-debug {
  margin: 1.25rem 0;
  padding: 1rem;
  background: #fff8e6;
  border: 2px solid #ffb197;
  color: #555557;
}
.jcp-parser-debug summary {
  font-weight: 700;
  cursor: pointer;
}
.jcp-parser-debug pre {
  max-height: 520px;
  overflow: auto;
  white-space: pre-wrap;
  background: #fff;
  padding: .75rem;
  border: 1px solid #dededf;
  font-size: 13px;
}

.jcp-abbreviation-list {
    margin: 0;
    padding-left: 2.25em;
}

.jcp-abbreviation-list li + li {
    margin-top: .35em;
}


.jcp-abbreviation-description {
    margin-top: 1.75rem;
}

.jcp-abbreviation-description p {
    margin: 0 0 1.25rem;
}

.jcp-abbreviation-description p:last-child {
    margin-bottom: 0;
}

/* v0.2.15 WPRM-style step-by-step instructions */
.jcp-instruction-steps {
    display: grid;
    /* BOTH HALVES, ALWAYS (v0.3.786). A grid with no column sizing gives itself an implicit `auto`
       column, and `auto` means max-content -- so the column took the intrinsic width of the widest
       child, which here is a ~1000px step photo, and the whole pattern rendered wider than a phone.
       `max-width: 100%` on the image does not prevent it: a percentage cannot shrink the column's
       min-content contribution.

       `minmax(0, 1fr)` lets the TRACK shrink and `min-width: 0` on the step lets the ITEM shrink.
       This exact pair is in CLAUDE.md because it has now bitten three times -- twice in the editor
       and here on a live phone. Half of it is not a fix. */
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
}

.jcp-instruction-section-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    align-self: end;
}

.jcp-instruction-step {
    padding-top: 0;
    min-width: 0;   /* the other half of the pair above — see .jcp-instruction-steps */
}

.jcp-instruction-step-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.jcp-instruction-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--jcp-instruction-number-bg, var(--jcp-main-accent, #4f857b));
    color: var(--jcp-instruction-number-text, var(--jcp-accent-text, #ffffff));
    font-weight: 700;
    line-height: 1;
}

.jcp-instruction-step-title {
    margin: 0;
    font-size: 1.05em;
}

.jcp-instruction-step-photo {
    margin: 0 0 0.9rem;
}

.jcp-instruction-step-photo img {
    display: block;
    max-width: 100%;
    height: auto;
}

.jcp-instruction-step-text {
    margin-bottom: 0.9rem;
}

.jcp-instruction-step-text > *:first-child {
    margin-top: 0;
}

.jcp-instruction-step-text > *:last-child {
    margin-bottom: 0;
}

.jcp-instruction-step-note {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    background: var(--jcp-instruction-tip-bg, var(--jcp-section-notes-bg, #f6fafa));
    border-left: 3px solid var(--jcp-instruction-tip-border, var(--jcp-main-accent, #4f857b));
    color: var(--jcp-instruction-tip-text, var(--jcp-text, #555557));
}

.jcp-yarn-tip {
    background: var(--jcp-yarn-tip-bg, #fff4ef);
    border-left-color: var(--jcp-yarn-tip-border, #ff8d69);
}

/* Saved pattern display block (v0.3.0) */
.jcp-pattern-display-missing {
    border: 1px dashed var(--jcp-border, #dededf);
    padding: 12px;
    font-size: 14px;
}

/* Pattern image slots */
.jcp-pattern-image-slot {
    margin: 1.75rem 0;
}

.jcp-pattern-image-slot-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.jcp-pattern-image-slot-caption {
    margin-top: 0.5rem;
    font-size: 0.92em;
    color: var(--jcp-text-muted, #666);
}

/* Instruction inline photos */
.jcp-instruction-inline-photo {
    margin: 1rem 0;
}
.jcp-instruction-inline-photo img {
    display: block;
    max-width: 100%;
    height: auto;
}
.jcp-instruction-inline-photo figcaption {
    margin-top: 0.45rem;
    font-size: 0.92em;
    color: var(--jcp-text-muted, #666);
}


/* v0.3.72 grouped yarn amount display */
.jcp-yarn-color-size-groups {
    margin-top: 0.35rem;
}

.jcp-yarn-color-size-group {
    margin: 0.85rem 0 0;
}

.jcp-yarn-color-size-heading {
    margin: 0 0 0.2rem !important;
    font-weight: 700;
}

.jcp-pattern .jcp-yarn-color-size-sublist,
.entry-content .jcp-pattern .jcp-yarn-color-size-sublist,
.dynamic-entry-content .jcp-pattern .jcp-yarn-color-size-sublist,
body .entry-content .jcp-pattern .jcp-yarn-color-size-sublist,
body .dynamic-entry-content .jcp-pattern .jcp-yarn-color-size-sublist {
    margin-top: 0.2rem !important;
}

body .entry-content .jcp-pattern .jcp-yarn-color-size-sublist > li,
body .dynamic-entry-content .jcp-pattern .jcp-yarn-color-size-sublist > li,
.jcp-pattern .jcp-yarn-color-size-sublist > li {
    margin: 0.18rem 0 !important;
}


/* v0.3.73: align frontend section text with pattern title/header when sections are plain */
.jcp-pattern .jcp-section {
    padding-left: 0;
    padding-right: 0;
}

/* Straddle effect: section background stays on the section element (guaranteed full-width).
   A ::before mask in the page background color covers the top 1.75rem of the section,
   hiding the colored background above the heading center. The heading sits at z-index 2
   above the mask. Net result: heading top half over white, bottom half over the colored
   section background. */
.jcp-pattern .jcp-section.jcp-section-has-background {
    position: relative;
    padding-top: 0 !important;
}
.jcp-pattern .jcp-section.jcp-section-has-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--jcp-h, 200) * var(--jcp-heading-scale) * 0.5px);
    background: var(--jcp-bg, #ffffff);
    z-index: 1;
    pointer-events: none;
}
.jcp-pattern .jcp-section.jcp-section-has-background .jcp-section-title {
    position: relative;
    z-index: 2;
    margin-top: 0 !important;
}
.jcp-pattern .jcp-section.jcp-section-has-background .jcp-section-content {
    position: relative;
    z-index: 2;
    background: transparent;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
/* About section with image at top — image fills the section top, heading straddles the
   image/text boundary with a negative margin-top. No white mask needed (the image
   itself provides visual contrast above the heading). */
.jcp-pattern .jcp-section-about.jcp-section-has-background::before {
    display: none; /* suppress white top-mask; image fills the top instead */
}
.jcp-pattern .jcp-section.jcp-section-about-with-image .jcp-section-title {
    position: relative;
    z-index: 3; /* appear above the image-wrap stacking context */
    margin-top: -2.1875rem !important; /* straddle the image bottom — 125px canvas → 4.375rem height → half = 2.1875rem */
}
.jcp-about-image-wrap {
    position: relative;
    z-index: 1;
    line-height: 0; /* collapse whitespace below the image */
}
.jcp-about-image {
    display: block;
    width: 100%;
    height: auto;
}
.jcp-skill-level-badge-link {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
    display: block;
    line-height: 0;
}
.jcp-skill-level-badge {
    display: block;
    width: 160px;
    height: auto;
}
@media (max-width: 600px) {
    .jcp-pattern .jcp-section.jcp-section-about-with-image .jcp-section-title {
        margin-top: -1.5625rem !important;
    }
    .jcp-skill-level-badge {
        width: 120px;
    }
}

@media (max-width: 600px) {
    .jcp-pattern .jcp-section.jcp-section-has-background::before {
        height: 1.25rem;
    }
    .jcp-pattern .jcp-section-gauge.jcp-section-has-background::before {
        height: 1.75rem;
    }
}

/* v0.3.81 stitch tutorial callouts and helper sections */
.jcp-pattern .jcp-stitch-tutorial-callout,
.jcp-pattern .jcp-stitch-tutorial-project-help {
    background: var(--jcp-color-light, #daede9);
    border-left: 6px solid var(--jcp-color-primary, #4f857b);
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.25rem;
}

.jcp-pattern .jcp-stitch-tutorial-callout p:first-child,
.jcp-pattern .jcp-stitch-tutorial-project-help p:first-child {
    margin-top: 0;
}

.jcp-pattern .jcp-stitch-tutorial-callout p:last-child,
.jcp-pattern .jcp-stitch-tutorial-project-help p:last-child {
    margin-bottom: 0;
}

.jcp-pattern .jcp-stitch-tutorial-project-help .jcp-subsection-title {
    margin-top: 0;
}

/* v0.3.82: softer/editable stitch tutorial callouts */
.jcp-pattern .jcp-stitch-tutorial-callout {
    background: var(--jcp-stitch-note-bg, #f6fafa);
    border-left-color: var(--jcp-stitch-note-border, #bad7d2);
    color: var(--jcp-stitch-note-text, #555557);
}

.jcp-pattern .jcp-stitch-tutorial-project-help {
    background: var(--jcp-stitch-project-bg, #fff4ef);
    border-left-color: var(--jcp-stitch-project-border, #ff8d69);
    color: var(--jcp-stitch-project-text, #555557);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.jcp-pattern .jcp-stitch-tutorial-project-help .jcp-subsection-title {
    margin-top: 0;
}

.jcp-pattern .jcp-stitch-tutorial-measurement .jcp-subsection-title {
    margin-top: 2rem;
}

.jcp-pattern .jcp-section-abbreviations .jcp-section-content {
    padding-left: 0;
}

.jcp-pattern .jcp-yarn-stitch-tutorial .jcp-stitch-tutorial-yarn-used .jcp-subsection-title {
    margin-top: 1.25rem;
}

/* v0.3.85 stitch tutorial layout refinements */
.jcp-pattern .jcp-stitch-tutorial-callout,
.jcp-pattern .jcp-stitch-tutorial-project-help {
    background: var(--jcp-stitch-note-bg, #f6fafa);
    border-left-color: var(--jcp-stitch-note-border, #bad7d2);
    color: var(--jcp-stitch-note-text, #555557);
}

.jcp-pattern .jcp-stitch-tutorial-project-help {
    background: var(--jcp-stitch-project-bg, #fff4ef);
    border-left-color: var(--jcp-stitch-project-border, #ffb197);
    color: var(--jcp-stitch-project-text, #555557);
}

.jcp-pattern .jcp-stitch-tutorial-project-help ul {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
}

.jcp-pattern .jcp-stitch-tutorial-project-help li + li {
    margin-top: .35rem;
}

.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background {
    box-sizing: border-box;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.jcp-pattern .jcp-section-abbreviations .jcp-section-content,
.jcp-pattern .jcp-section-stitchesNeeded .jcp-section-content,
.jcp-pattern .jcp-section-techniquesNeeded .jcp-section-content {
    max-width: 100%;
    box-sizing: border-box;
}

.jcp-pattern .jcp-abbreviation-list {
    padding-left: 1.45em;
}

.jcp-pattern .jcp-abbreviation-list li {
    overflow-wrap: anywhere;
}

.jcp-pattern .jcp-step-by-step-instructions {
    margin-top: 2rem;
}

.jcp-pattern .jcp-step-by-step-instructions > .jcp-subsection-title {
    margin-bottom: 1rem;
}

.jcp-pattern .jcp-instruction-step-photo img {
    max-width: 100%;
    height: auto;
}

/* v0.3.86: force stitch tutorial callout boxes to use editable settings */
.jcp-pattern .jcp-section-sizeMeasurement .jcp-stitch-tutorial-project-help,
.jcp-pattern .jcp-stitch-tutorial-project-help {
    display: block;
    background: var(--jcp-stitch-project-bg, #fff4ef) !important;
    border-left: 6px solid var(--jcp-stitch-project-border, #ffb197) !important;
    color: var(--jcp-stitch-project-text, #555557) !important;
    padding: 1.2rem 1.35rem !important;
    margin: 2rem 0 !important;
}

.jcp-pattern .jcp-section-materials .jcp-stitch-tutorial-callout,
.jcp-pattern .jcp-section-sizeMeasurement .jcp-stitch-tutorial-callout,
.jcp-pattern .jcp-stitch-tutorial-callout {
    display: block;
    background: var(--jcp-stitch-note-bg, #f6fafa) !important;
    border-left: 6px solid var(--jcp-stitch-note-border, #bad7d2) !important;
    color: var(--jcp-stitch-note-text, #555557) !important;
    padding: 1.1rem 1.35rem !important;
}

.jcp-pattern .jcp-stitch-tutorial-project-help ul,
.jcp-pattern .jcp-stitch-tutorial-project-help ol {
    margin: 1rem 0 0 0;
    padding-left: 1.35rem;
}


/* v0.3.87: harden stitch tutorial callouts/layout for existing imports */
.jcp-pattern .jcp-stitch-tutorial-project-help {
    display: block !important;
    background-color: var(--jcp-stitch-project-bg, #fff4ef) !important;
    border-left: 6px solid var(--jcp-stitch-project-border, #ffb197) !important;
    color: var(--jcp-stitch-project-text, #555557) !important;
    padding: 1.2rem 1.35rem !important;
    margin: 2rem 0 !important;
    box-sizing: border-box;
}
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background,
.jcp-pattern .jcp-section-stitchesNeeded.jcp-section-has-background,
.jcp-pattern .jcp-section-techniquesNeeded.jcp-section-has-background {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    box-sizing: border-box;
}
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-content,
.jcp-pattern .jcp-section-stitchesNeeded.jcp-section-has-background .jcp-section-content,
.jcp-pattern .jcp-section-techniquesNeeded.jcp-section-has-background .jcp-section-content {
    padding-left: 0;
    padding-right: 0;
}
.jcp-pattern .jcp-step-by-step-instructions {
    display: block !important;
    clear: both;
}

/* v0.3.88: force requested stitch tutorial layout fixes */
.jcp-pattern .jcp-section-abbreviations,
.jcp-pattern .jcp-section-stitchesNeeded,
.jcp-pattern .jcp-section-techniquesNeeded {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
}
.jcp-pattern .jcp-section-abbreviations .jcp-section-title,
.jcp-pattern .jcp-section-stitchesNeeded .jcp-section-title,
.jcp-pattern .jcp-section-techniquesNeeded .jcp-section-title,
.jcp-pattern .jcp-section-abbreviations .jcp-section-content,
.jcp-pattern .jcp-section-stitchesNeeded .jcp-section-content,
.jcp-pattern .jcp-section-techniquesNeeded .jcp-section-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}
.jcp-pattern .jcp-stitch-tutorial-project-help {
    background: var(--jcp-stitch-project-bg, #fff4ef) !important;
    background-color: var(--jcp-stitch-project-bg, #fff4ef) !important;
    border-left: 6px solid var(--jcp-stitch-project-border, #ffb197) !important;
    color: var(--jcp-stitch-project-text, #555557) !important;
    padding: 1.2rem 1.35rem !important;
    margin: 2rem 0 !important;
}
.jcp-pattern .jcp-step-by-step-instructions,
.jcp-pattern .jcp-instruction-steps,
.jcp-pattern .jcp-instruction-step,
.jcp-pattern .jcp-instruction-step-photo {
    display: block !important;
    visibility: visible !important;
}


/* v0.3.89: final alignment + dual instruction display fixes */
.jcp-pattern .jcp-section-stitchesNeeded,
.jcp-pattern .jcp-section-techniquesNeeded {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.jcp-pattern .jcp-section-stitchesNeeded .jcp-section-title,
.jcp-pattern .jcp-section-techniquesNeeded .jcp-section-title,
.jcp-pattern .jcp-section-stitchesNeeded .jcp-section-content,
.jcp-pattern .jcp-section-techniquesNeeded .jcp-section-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
}
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-title,
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.jcp-pattern .jcp-stitch-tutorial-project-help {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
.jcp-pattern .jcp-section-instructionSteps {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
}
.jcp-pattern .jcp-section-instructionSteps .jcp-section-title,
.jcp-pattern .jcp-section-instructionSteps .jcp-section-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-steps {
    display: grid !important;
    /* This rule re-declares the grid with !important, so it needs the column sizing too or it
       reinstates the implicit auto column the rule above exists to prevent. */
    grid-template-columns: minmax(0, 1fr) !important;
}


/* v0.3.91 canonical tutorial layout + dual instruction display */
body .entry-content .jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help,
body .dynamic-entry-content .jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help {
    width: 100% !important;
    max-width: 100% !important;
    margin: 2rem 0 !important;
    box-sizing: border-box !important;
}

body .entry-content .jcp-pattern .jcp-section-abbreviations.jcp-section-has-background,
body .dynamic-entry-content .jcp-pattern .jcp-section-abbreviations.jcp-section-has-background,
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
}

body .entry-content .jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-title,
body .entry-content .jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-content,
body .dynamic-entry-content .jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-title,
body .dynamic-entry-content .jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-content,
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-title,
.jcp-pattern .jcp-section-abbreviations.jcp-section-has-background .jcp-section-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}

body .entry-content .jcp-pattern .jcp-section-stitchesNeeded,
body .dynamic-entry-content .jcp-pattern .jcp-section-stitchesNeeded,
.jcp-pattern .jcp-section-stitchesNeeded,
body .entry-content .jcp-pattern .jcp-section-techniquesNeeded,
body .dynamic-entry-content .jcp-pattern .jcp-section-techniquesNeeded,
.jcp-pattern .jcp-section-techniquesNeeded,
body .entry-content .jcp-pattern .jcp-section-instructions,
body .dynamic-entry-content .jcp-pattern .jcp-section-instructions,
.jcp-pattern .jcp-section-instructions,
body .entry-content .jcp-pattern .jcp-section-instructionSteps,
body .dynamic-entry-content .jcp-pattern .jcp-section-instructionSteps,
.jcp-pattern .jcp-section-instructionSteps {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

body .entry-content .jcp-pattern .jcp-section-stitchesNeeded .jcp-section-title,
body .entry-content .jcp-pattern .jcp-section-stitchesNeeded .jcp-section-content,
body .entry-content .jcp-pattern .jcp-section-techniquesNeeded .jcp-section-title,
body .entry-content .jcp-pattern .jcp-section-techniquesNeeded .jcp-section-content,
body .entry-content .jcp-pattern .jcp-section-instructions .jcp-section-title,
body .entry-content .jcp-pattern .jcp-section-instructions .jcp-section-content,
body .entry-content .jcp-pattern .jcp-section-instructionSteps .jcp-section-title,
body .entry-content .jcp-pattern .jcp-section-instructionSteps .jcp-section-content,
body .dynamic-entry-content .jcp-pattern .jcp-section-stitchesNeeded .jcp-section-title,
body .dynamic-entry-content .jcp-pattern .jcp-section-stitchesNeeded .jcp-section-content,
body .dynamic-entry-content .jcp-pattern .jcp-section-techniquesNeeded .jcp-section-title,
body .dynamic-entry-content .jcp-pattern .jcp-section-techniquesNeeded .jcp-section-content,
body .dynamic-entry-content .jcp-pattern .jcp-section-instructions .jcp-section-title,
body .dynamic-entry-content .jcp-pattern .jcp-section-instructions .jcp-section-content,
body .dynamic-entry-content .jcp-pattern .jcp-section-instructionSteps .jcp-section-title,
body .dynamic-entry-content .jcp-pattern .jcp-section-instructionSteps .jcp-section-content,
.jcp-pattern .jcp-section-stitchesNeeded .jcp-section-title,
.jcp-pattern .jcp-section-stitchesNeeded .jcp-section-content,
.jcp-pattern .jcp-section-techniquesNeeded .jcp-section-title,
.jcp-pattern .jcp-section-techniquesNeeded .jcp-section-content,
.jcp-pattern .jcp-section-instructions .jcp-section-title,
.jcp-pattern .jcp-section-instructions .jcp-section-content,
.jcp-pattern .jcp-section-instructionSteps .jcp-section-title,
.jcp-pattern .jcp-section-instructionSteps .jcp-section-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
}

.jcp-pattern .jcp-section-instructionSteps,
.jcp-pattern .jcp-tutorial-photo-instructions {
    display: block !important;
    visibility: visible !important;
    margin-top: 1rem !important;
}
.jcp-pattern .jcp-section-instructionSteps .jcp-step-by-step-instructions,
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-steps,
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-step,
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-step-photo,
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-step-photo img {
    display: block !important;
    visibility: visible !important;
}

/* v0.3.92: canonical saved-pattern display layout after removing imported wrapper leakage */
.jcp-pattern-display > .jcp-pattern,
.jcp-pattern > .jcp-sections,
.jcp-pattern > .jcp-header {
    width: 100%;
    max-width: 100%;
}
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-sections > .jcp-section,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-sections > .jcp-section,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-abbreviations.jcp-section-has-background,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-abbreviations.jcp-section-has-background {
    padding: 0 2rem !important;
}
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-stitchesNeeded,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-stitchesNeeded,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-instructions,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-instructions,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-instructionSteps,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-instructionSteps {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-stitchesNeeded .jcp-section-title,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-stitchesNeeded .jcp-section-content,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-stitchesNeeded .jcp-section-title,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-stitchesNeeded .jcp-section-content,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-instructions .jcp-section-title,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-instructions .jcp-section-content,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-instructions .jcp-section-title,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-instructions .jcp-section-content,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-instructionSteps .jcp-section-title,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-section-instructionSteps .jcp-section-content,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-instructionSteps .jcp-section-title,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-section-instructionSteps .jcp-section-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-steps {
    display: grid !important;
    gap: 1.5rem;
}
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-step {
    display: grid !important;
    gap: 0.75rem;
}
.jcp-pattern .jcp-section-instructionSteps .jcp-instruction-step-photo img {
    max-width: 100%;
    height: auto;
}


/* v0.3.97: polish stitch tutorial project-help callout spacing */
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help {
    padding: 1.45rem 1.65rem 1.55rem !important;
}

.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help .jcp-subsection-title,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help .jcp-subsection-title,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help h4,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help h4 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help p,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help p {
    margin-top: 0 !important;
    margin-bottom: 1.15rem !important;
}

.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help ul,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help ul,
.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help ol,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help ol {
    margin-top: 0.85rem !important;
    margin-bottom: 0 !important;
    padding-left: 1.55rem !important;
}

.jcp-pattern.jcp-pattern-type-stitch_tutorial .jcp-stitch-tutorial-project-help li + li,
.jcp-pattern.jcp-pattern-type-granny_square .jcp-stitch-tutorial-project-help li + li {
    margin-top: 0.45rem !important;
}

/* v0.3.104: polished step-by-step photo instruction cards */
.jcp-pattern .jcp-step-by-step-instructions > .jcp-subsection-title,
.jcp-pattern .jcp-section-instructionSteps > .jcp-section-title {
    margin-bottom: 1.35rem;
}

.jcp-pattern .jcp-instruction-steps {
    display: grid !important;
    gap: 1.75rem !important;
}

.jcp-pattern .jcp-instruction-step {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 42%);
    gap: 1.5rem;
    align-items: start;
    padding: 1.25rem;
    border: 1px solid var(--jcp-instruction-card-border, #bad7d2);
    background: var(--jcp-instruction-card-bg, #f6fafa);
    box-sizing: border-box;
}

.jcp-pattern .jcp-instruction-step-body {
    min-width: 0;
}

.jcp-pattern .jcp-instruction-step-media {
    min-width: 0;
}

.jcp-pattern .jcp-instruction-step-photo {
    position: relative;
    margin: 0 !important;
    overflow: hidden;
    background: var(--jcp-instruction-photo-bg, #ffffff);
}

.jcp-pattern .jcp-instruction-step-photo img {
    display: block !important;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

.jcp-pattern .jcp-instruction-step-number {
    color: var(--jcp-instruction-number-text, #222222) !important;
    background: var(--jcp-instruction-number-bg, #bad7d2) !important;
    border: 2px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.jcp-pattern .jcp-instruction-step-number-on-photo {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    left: 0.75rem;
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    font-size: 1.05rem;
}

.jcp-pattern .jcp-instruction-step-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.jcp-pattern .jcp-instruction-step-text {
    margin: 0;
}

.jcp-pattern .jcp-instruction-step-text p {
    margin-top: 0;
}

.jcp-pattern .jcp-instruction-step-text p:last-child {
    margin-bottom: 0;
}

.jcp-pattern .jcp-instruction-step-note {
    margin-top: 1rem;
}

.jcp-pattern .jcp-instruction-step-no-photo {
    display: block !important;
}

.jcp-pattern .jcp-instruction-step-no-photo .jcp-instruction-step-heading {
    margin-bottom: 0.85rem;
}

@media (max-width: 760px) {
    .jcp-pattern .jcp-instruction-step {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .jcp-pattern .jcp-instruction-step-has-photo .jcp-instruction-step-media {
        order: 1;
    }

    .jcp-pattern .jcp-instruction-step-has-photo .jcp-instruction-step-body {
        order: 2;
    }

    .jcp-pattern .jcp-instruction-step-number-on-photo {
        top: 0.65rem;
        left: 0.65rem;
    }
}


/* v0.3.105: step photo card polish - image left on desktop, clean badge, tighter photo crop */
@media (min-width: 761px) {
    .jcp-pattern .jcp-instruction-step.jcp-instruction-step-has-photo {
        grid-template-columns: minmax(240px, 42%) minmax(0, 1fr) !important;
    }

    .jcp-pattern .jcp-instruction-step-has-photo .jcp-instruction-step-media {
        order: 1 !important;
    }

    .jcp-pattern .jcp-instruction-step-has-photo .jcp-instruction-step-body {
        order: 2 !important;
    }
}

.jcp-pattern .jcp-instruction-step-photo {
    line-height: 0 !important;
    background: var(--jcp-instruction-photo-bg, #ffffff) !important;
}

.jcp-pattern .jcp-instruction-step-photo picture {
    display: block !important;
    line-height: 0 !important;
}

.jcp-pattern .jcp-instruction-step-photo img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center 44% !important;
    margin: 0 !important;
}

.jcp-pattern .jcp-instruction-step-number,
.jcp-pattern .jcp-instruction-step-number-on-photo {
    color: var(--jcp-instruction-number-text, #111111) !important;
    border: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important;
}

/* ── Blog header zone ───────────────────────────────────────── */
.jcp-blog-header {
    color: var(--jcp-text, #555557);
    margin-bottom: 1.5rem;
}

@media print {
    .jcp-blog-header { display: none !important; }
}

.jcp-blog-header .jcp-blog-intro p {
    color: var(--jcp-text, #555557);
    margin: 0 0 1em;
    line-height: 1.7;
}
.jcp-blog-header .jcp-blog-intro p:last-child {
    margin-bottom: 1.25em;
}

.jcp-blog-featured-image-wrap {
    margin-bottom: 1.5rem;
}
.jcp-blog-featured-image-wrap .jcp-blog-featured-image {
    display: block;
    width: 100%;
    height: auto;
}

/* ── What is the stitch ──────────────────────────────────────── */
.jcp-what-is-stitch {
    margin: 1.5rem 0;
}
.jcp-what-is-stitch-heading {
    font-size: 1.3em; /* was 1.25rem — bumped to match all other blog header zone headings */
    font-weight: 700;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}
.jcp-what-is-stitch-content p {
    color: var(--jcp-text, #555557);
    margin: 0 0 1em;
    line-height: 1.7;
}
.jcp-what-is-stitch-content p:last-child { margin-bottom: 0; }

/* ── Straddling headings ──────────────────────────────────────
   ONE MECHANISM FOR ALL FIVE, AND IT MEASURES ITSELF (v0.3.854).

   Her report: "Split in the straddling on mobile" — the peach edge cut straight through the
   letters of *How to get this pattern* instead of sitting at their middle.

   TWO FAULTS, and the second is the one that matters. Each box used to state the heading height,
   the white mask above it and the pull-up that makes it straddle as three separate literals in a
   2:1:1 relationship. (1) The mobile rule for this box changed only the height, 5.25rem to
   3.75rem, and left the other two at 2.625rem — so the seam landed 70% down the heading. (2) Far
   worse, and true of four of the five boxes: these headings are wide (aspect 4.8 to 6.5), so on a
   phone `max-width: 100%` shrinks them BELOW their declared height and no fixed rem can know it.
   Measured at 360px: *Not ready to crochet yet* declares 84px and renders 48px, so its mask
   covered roughly 85% of the heading rather than half.

   So the mask is a GRADIENT on a wrapper around the image. A gradient percentage resolves against
   the element's own box, so the white always stops at exactly half the height the image really
   ended up at — at any screen width, for any image, with no breakpoint to keep in step. There are
   no negative margins and no section padding reservations left to drift.

   The top half is painted #ffffff because that is the page behind these boxes; it is the same
   colour the two masks it replaces used. */
/* THE TWO NUMBERS THAT SIZE EVERY HEADING ON THE SITE (v0.3.855).

   --jcp-heading-scale is CSS px per source px. 0.28 is what all fourteen of the old hand-written
   per-section overrides worked out to, so desktop is unchanged by this rework.

   --jcp-heading-widest is the natural width, in source px, of the widest heading in use. It is what
   lets the scale SHRINK IN STEP on a narrow screen instead of letting the longest phrases shrink on
   their own: at 360px, "In Rounds" and "Techniques You Will Need" used to hit max-width and come out
   8% smaller than every other heading, which is the inequality she reported in a milder form. Now
   one scale is chosen so the widest heading just fits, and every heading follows it.

   docs/tools/heading-size-test.php fails if a wider heading is added without updating this. */
:root {
    --jcp-heading-scale: 0.28;
    --jcp-heading-widest: 1970;
    --jcp-heading-gutter: 2.5rem;
}

.jcp-straddle {
    display: block;
    background: linear-gradient(to bottom, #ffffff 0 50%, transparent 50% 100%);
}
/* NOTHING MAY SIT BETWEEN THE BOX TOP AND THE MASK (v0.3.855).
   Her report: "Some of the straddling ones have a colored stripe above them." The wrapper is not
   the box's first child — the PHP puts it inside an <h2> (or an <h3>, or straight into the box,
   depending on the box), and two of those headings carried a default top margin. Measured at 360px:
   a 24px band of box colour above helpful-tools and not-ready. Selecting the parent is the only way
   to kill it without a list of host classes that a new box would not be in. */
h2:has(> .jcp-straddle),
h3:has(> .jcp-straddle),
div:has(> .jcp-straddle) {
    margin-top: 0;
    padding-top: 0;
}
.jcp-straddle > img {
    display: block;
    margin: 0 auto;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: min(calc(var(--jcp-h, 300) * var(--jcp-heading-scale) * 1px), calc(var(--jcp-h, 300) * (100vw - var(--jcp-heading-gutter)) / var(--jcp-heading-widest))) !important;
}
/* Each box bleeds the mask out through its own side padding. */
.jcp-straddle--how-to-get        { margin: 0 -1.75rem 1rem; }
.jcp-straddle--helpful-tools     { margin: 0 -1.5rem 1rem; }
.jcp-straddle--crochet-a-blanket { margin: 0 -1.5rem 0.75rem; }
.jcp-straddle--not-ready         { margin: 0 -1.5rem 0.75rem -2rem; }
.jcp-straddle--how-to-crochet    { margin: 0 -1.5rem 0.5rem; }

/* ── How to get this pattern ─────────────────────────────────── */
.jcp-how-to-get {
    background: var(--jcp-coral-bg, #fff4ef);
    padding: 0 1.75rem 1.75rem;   /* no top padding — the straddle wrapper sits at the top */
    margin-bottom: 1.5rem;
}
/* Heading image — 150px canvas → 5.25rem. Height only; the wrapper does the straddling. */

/* Text fallback if no heading image */
.jcp-how-to-get-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    text-align: center;
    margin: 0 0 1rem;
}
.jcp-free-note {
    font-style: italic;
    color: var(--jcp-text, #555557);
    text-align: center;
    background: #ffffff;
    border: 1px solid var(--jcp-coral-soft, #fec9b0);
    padding: 0.65rem 1.25rem;
    width: fit-content;
    margin: 0 auto 1.5rem;
}
.jcp-buy-label {
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    text-align: center;
    margin: 0 0 0.85rem;
}
/* Buttons fill the row equally — flex: 1 makes each grow to share space */
.jcp-buy-buttons {
    display: flex;
    gap: 0.4rem;
}
/* Buy buttons — layout only; colors from shared block above */
.jcp-buy-btn {
    flex: 1;
    display: block;
    text-align: center;
}

/* Secondary buy buttons (Etsy, Ravelry, LoveCrafts, Already a member) — mint */
.jcp-buy-etsy,
.jcp-buy-ravelry,
.jcp-buy-lovecrafts,
.jcp-buy-member-already { background: var(--jcp-accent-light, #bad7d2) !important; }

.jcp-how-to-get .jcp-buy-label:not(:first-of-type) { margin-top: 2.25rem; }

/* Mobile — wrap to 2×2 on small screens */
@media (max-width: 480px) {
    .jcp-buy-buttons { flex-wrap: wrap; }
    .jcp-buy-btn { flex: 1 1 calc(50% - 0.25rem); white-space: normal; }
}

/* ── How to crochet this pattern ────────────────────────────── */
.jcp-how-to-crochet-section {
    margin-top: 3rem; /* breathing room above, e.g. below ToC */
    margin-bottom: 2rem;
    /* No padding reservation: the straddle wrapper paints the top half white in place. */
}
/* Visually-hidden H2 — gives the ToC plugin an anchor BEFORE the box */
.jcp-how-to-crochet-anchor {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    margin: 0;
    padding: 0;
}
.jcp-how-to-crochet-box {
    display: flow-root; /* BFC: child negative-margin no longer collapses through parent; does NOT clip overflow */
    background: var(--jcp-green-bg, #f6fafa);
    padding: 0 1.5rem 1.5rem; /* no top padding — heading image occupies that space */
}
/* Sweet Apricot PNG heading — straddling the box top via negative margin into the section padding area */

/* H3 sub-heading: SEO phrase in Tahoma body style */
.jcp-how-to-crochet-subheading {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    line-height: 1.4;
    margin: 0 0 0.75rem;
}
/* Content area: image floated right, text wraps around it */
.jcp-how-to-crochet-content {
    overflow: hidden; /* clears the float */
}
/* The photo sits UNDER the text (v0.3.758), her call — it used to float right with the text
   wrapping around it, which matched neither the editor nor what she wanted. */
.jcp-how-to-crochet-img {
    width: 100%;
    margin: 1rem 0 0;
}
.jcp-how-to-crochet-img img {
    width: 100%;
    height: auto;
    display: block;
}
.jcp-how-to-crochet-text {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
}
.jcp-how-to-crochet-text p { margin: 0 0 0.85em; }
.jcp-how-to-crochet-text p:last-child { margin-bottom: 0; }
/* Divider: full-width white line breaking out of box padding */
.jcp-how-to-crochet-divider {
    border: none;
    border-top: 4px solid #ffffff;
    margin: 2.5rem -1.5rem;
}
/* Facts grid — 2 columns, body-size text */
.jcp-how-to-crochet-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 2rem;
}
.jcp-pattern .jcp-how-to-crochet-fact a {
    font-weight: bold;
    text-decoration: none;
    border-bottom: solid 4px var(--jcp-accent, #4f857b);
}
.jcp-pattern .jcp-how-to-crochet-fact a:hover {
    background-color: var(--jcp-green-bg-strong, #daede9);
}
.jcp-how-to-crochet-fact {
    font-size: 1em;
    color: var(--jcp-text, #555557);
    line-height: 1.5;
}
/* Mobile: heading image, float off, single-column facts */
@media (max-width: 600px) {
    .jcp-how-to-crochet-section { margin-top: 2rem; }
    .jcp-how-to-crochet-img {
        float: none;
        width: 100%;
        margin: 0 0 1rem 0;
    }
    .jcp-how-to-crochet-facts { grid-template-columns: 1fr; }
}

/* ── Crochet A [Pattern Name] — granny_square intro ─────────────── */
.jcp-crochet-a-gs-intro {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-crochet-a-gs-intro-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-heading, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-crochet-a-gs-intro-content {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
}
.jcp-crochet-a-gs-intro-content p { margin: 0 0 1em; }
.jcp-crochet-a-gs-intro-content p:last-child { margin-bottom: 0; }
.jcp-crochet-a-gs-intro-content a { color: var(--jcp-accent, #4f857b); }
.jcp-crochet-a-gs-intro-content a:hover { color: var(--jcp-hover-accent, #ff8d69); }
.jcp-crochet-a-gs-intro-content ul,
.jcp-crochet-a-gs-intro-content ol { padding-left: 1.5em; margin: 0 0 1em; }
.jcp-crochet-a-gs-intro-content li { margin-bottom: 0.4em; }

/* ── Appliqué about section ──────────────────────────────────────── */
.jcp-applique-about-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/* Override .jcp-how-to-crochet-box top padding — no PNG straddle here */
.jcp-applique-about-box {
    padding: 1.5rem !important;
}
.jcp-applique-about-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-heading, #555557);
    margin: 0 0 1rem;
    line-height: 1.3;
}

/* ── Crochet Project Ideas section ───────────────────────────────── */
.jcp-project-ideas-section {
    border: 4px solid var(--jcp-more-patterns-border, #daede9);
    padding: 1.25rem 1.5rem 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-project-ideas-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-heading, #555557);
    margin: 0 0 1.25rem;
    line-height: 1.3;
    text-align: center;
}

/* ── Blog intro Find more link ───────────────────────────────────── */
.jcp-blog-find-more {
    font-size: 1em;
    color: var(--jcp-text, #555557);
    margin: 0.25rem 0 1.5rem;
}

/* ── Yarn Section ────────────────────────────────────────────────── */
.jcp-yarn-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-yarn-section-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-yarn-section-content p {
    margin-bottom: 1.4rem;
    line-height: 1.7;
    color: var(--jcp-text, #555557);
}
.jcp-yarn-section-content p:last-child {
    margin-bottom: 0;
}

/* ── Materials Section (static, sitewide per pattern type) ──────── */
.jcp-materials-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-materials-section-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-materials-section-content p {
    margin-bottom: 1.4rem;
    line-height: 1.7;
    color: var(--jcp-text, #555557);
}
.jcp-materials-section-content p:last-child {
    margin-bottom: 0;
}

/* ── Best Tips Section (static, sitewide per pattern type) ─────── */
.jcp-best-tips-section {
    margin-top: 3.5rem;
    margin-bottom: 2rem;
}
.jcp-best-tips-section-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-best-tips-section-content p {
    margin-bottom: 1.4rem;
    line-height: 1.7;
    color: var(--jcp-text, #555557);
}
.jcp-best-tips-section-content p:last-child {
    margin-bottom: 0;
}

/* ── Join Granny Squares Section (static, sitewide, variant selected per post) ── */
.jcp-join-granny-section {
    margin-top: 3.5rem;
    margin-bottom: 2rem;
}
.jcp-join-granny-section-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-join-granny-section-content p {
    margin-bottom: 1.4rem;
    line-height: 1.7;
    color: var(--jcp-text, #555557);
}
.jcp-join-granny-section-content p:last-child {
    margin-bottom: 0;
}

/* ── Crochet a Blanket Section (stitch tutorial, sitewide content, PNG heading straddle) ── */
.jcp-crochet-a-blanket-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
    /* No padding reservation — see .jcp-straddle. */
}
.jcp-crochet-a-blanket-box {
    display: flow-root;
    background: var(--jcp-crochet-a-blanket-bg, #fff4ef);
    border: none;
    padding: 0 1.5rem 1.5rem;
}

.jcp-crochet-a-blanket-heading-text {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-crochet-a-blanket-content {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
}
.jcp-crochet-a-blanket-content p {
    margin-bottom: 1.4rem;
}
.jcp-crochet-a-blanket-content p:last-child {
    margin-bottom: 0;
}

/* ── Not Ready to Crochet Yet? (regular patterns, sitewide, PNG heading straddle) ── */
.jcp-not-ready-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-not-ready-box {
    display: flow-root;
    background: var(--jcp-not-ready-bg, #fff8e6);
    padding: 0 1.5rem 1.5rem 2rem;
}

.jcp-not-ready-heading-text {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 0.75rem;
    line-height: 1.3;
    padding-top: 1.5rem;
}
.jcp-not-ready-list {
    line-height: 1.7;
    color: var(--jcp-text, #555557);
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0;
    padding-left: 1.5rem;
}
.jcp-not-ready-list li {
    margin-bottom: 0.5rem;
}
.jcp-not-ready-list li:last-child {
    margin-bottom: 0;
}
.jcp-not-ready-box a {
    color: var(--jcp-text, #555557);
}
.jcp-not-ready-box a:hover,
.jcp-not-ready-box a:focus {
    color: var(--jcp-accent, #4f857b);
}

/* ── Helpful Tools & Tips ───────────────────────────────────────── */
.jcp-helpful-tools-section {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-helpful-tools-box {
    background: var(--jcp-yellow-bg, #fff8e6);
    padding: 0 1.5rem 1.5rem;
}
/* Heading image — 150px canvas → 5.25rem. The straddle wrapper paints the mask; see .jcp-straddle. */

.jcp-helpful-tools-heading-text {
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    margin: 0 0 1rem;
    padding-top: 1.5rem;
}
.jcp-helpful-tools-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.jcp-helpful-tools-col-heading {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    line-height: 1.4;
    margin: 0 0 0.75rem;
}
.jcp-helpful-tools-list {
    margin: 0;
    padding-left: 2.25em;
    line-height: 1.7;
    color: var(--jcp-text, #555557);
}
.jcp-helpful-tools-list li {
    margin-bottom: 0.35rem;
}
.jcp-helpful-tools-list li:last-child {
    margin-bottom: 0;
}
.jcp-helpful-tools-box a {
    color: var(--jcp-accent, #4f857b);
    text-decoration: underline;
}
.jcp-helpful-tools-box a:hover,
.jcp-helpful-tools-box a:focus {
    color: var(--jcp-text, #555557);
}
@media (max-width: 480px) {
    .jcp-helpful-tools-cols { grid-template-columns: 1fr; }
}

/* ── Shopify Buy Section ─────────────────────────────────────────── */
.jcp-shopify-buy-section {
    background: var(--jcp-green-bg-strong, #daede9);
    padding: 1.75rem 1.5rem 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}
.jcp-shopify-buy-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-shopify-buy-intro {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0 0 1.25rem;
}
.jcp-shopify-buy-intro a {
    color: var(--jcp-link, #4f857b);
    font-weight: bold;
}
.jcp-shopify-embed {
    margin-top: 0.5rem;
}
@media print {
    .jcp-shopify-buy-section { display: none !important; }
}

.jcp-bundle-callout {
    background: var(--jcp-bundle-bg, #fff4ef);
    padding: 0 0 1.25rem;
    margin: 0;
}

.jcp-bundle-callout .jcp-bundle-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 1rem;
}

.jcp-bundle-callout .jcp-bundle-description {
    font-weight: bold;
    margin: 0 1.5rem 1rem;
    color: var(--jcp-text, #555557) !important;
    text-align: center;
}

.jcp-bundle-callout .jcp-bundle-button-wrap {
    text-align: center;
    padding: 0 1.5rem;
}

/* Bundle button — layout only; colors from shared block above */
.jcp-bundle-callout .jcp-bundle-button {
    display: inline-block;
    text-align: center;
}

.jcp-bundle-callout .jcp-bundle-button:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Library-selected stitch / technique entries */
.jcp-library-entry {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 4px solid var(--jcp-green-bg-strong, #daede9);
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}
.jcp-library-entry:last-child { margin-bottom: 0; }
.jcp-library-entry-name {
    font-weight: bold;
    margin: 0 0 1.2em;
    text-align: center;
}
.jcp-library-entry-desc {
    line-height: 1.7;
    margin-bottom: 0.6em;
}
.jcp-library-entry-desc p { margin: 0 0 0.5em; }
.jcp-library-entry-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
/* Beat .entry-content .jcp-pattern .jcp-section-content a (0,3,1) which applies
   border-bottom: 4px !important — our (0,4,0) selector wins when specificity is higher.
   Colors and sizing come from the shared button block above. */
.entry-content .jcp-pattern .jcp-section-content .jcp-library-entry-btn,
.dynamic-entry-content .jcp-pattern .jcp-section-content .jcp-library-entry-btn,
.jcp-pattern .jcp-section-content .jcp-library-entry-btn,
.jcp-library-entry-btn {
    display: inline-block;
}
/* Free text sits in the same box as a library entry (v0.3.762). Stitches and techniques written
   as free text used to render as bare prose under a thin divider, while the ones picked from the
   library got a 4px mint card each — so the same section showed two different kinds of thing and
   the written-out one read as an afterthought. Her question was exactly that: "in some cases you'd
   want techniques and stitches to use the free-text field - is it then shown in a bordered box
   like the other techniques you can select".

   Same border, padding and spacing as .jcp-library-entry, deliberately: one look, not a third
   box style. No heading, because free text has no name of its own to centre. */
.jcp-library-freetext {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border: 4px solid var(--jcp-green-bg-strong, #daede9);
}
/* Consecutive boxes sit like library cards do, so a run of them reads as a list. */
.jcp-library-freetext + .jcp-library-freetext { margin-top: 1rem; }
/* Its own heading, centred and bold like a library entry's name. */
.jcp-library-freetext > h2:first-child,
.jcp-library-freetext > h3:first-child,
.jcp-library-freetext > h4:first-child,
.jcp-library-freetext > h5:first-child,
.jcp-library-freetext > h6:first-child {
    font-weight: bold;
    margin: 0 0 1.2em;
    text-align: center;
}
/* The first and last paragraphs would otherwise push the box open. */
.jcp-library-freetext > :first-child { margin-top: 0; }
.jcp-library-freetext > :last-child { margin-bottom: 0; }
.jcp-more-in-category {
    border: 4px solid var(--jcp-more-patterns-border, #daede9);
    padding: 1.25rem 1.5rem 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-more-in-category-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-heading, #555557);
    margin: 0 0 1.25rem;
    line-height: 1.3;
    text-align: center;
}

/* A pattern can carry a numbered series of videos, so each one is its own block with its own
   label. The gap is on the container, not a margin per video, so one video looks exactly as it
   did before the list existed. */
.jcp-video-tutorial + .jcp-video-tutorial {
    margin-top: 1.75em;
}
.jcp-video-tutorial-label {
    margin: 0 0 0.5em;
    text-align: center;
}
.jcp-video-tutorial-embed {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
}
.jcp-video-tutorial-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.jcp-video-tutorial-print-note {
    display: none;
}
@media print {
    .jcp-video-tutorial-embed { display: none !important; }
    .jcp-video-tutorial-print-note { display: block !important; }
}
.jcp-steps-summary {
    border: 4px solid var(--jcp-more-patterns-border, #daede9);
    padding: 1.25rem 1.5rem 1.5rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.jcp-steps-summary-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-heading, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
    text-align: center;
}
.jcp-steps-summary-description {
    margin: 0 0 0.75rem;
    color: var(--jcp-text, #555557);
    line-height: 1.7;
}
.jcp-steps-summary-list {
    margin: 0;
    padding-left: 2rem;
    color: var(--jcp-text, #555557);
    line-height: 1.7;
}
.jcp-steps-summary-list li {
    margin-bottom: 0.4rem;
}
.jcp-pinterest-pin {
    text-align: center;
    margin: 2rem 0;
}
.jcp-pinterest-pin-label {
    position: relative;
    z-index: 1;
    display: inline-block;
    border: 2px solid var(--jcp-coral-light, #ffb197);
    padding: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
}
.jcp-pinterest-pin-text {
    font-size: 1.05rem;
    font-weight: bold;
    color: var(--jcp-accent, #4f857b);
    margin: 0;
}
.jcp-pinterest-arrow-svg {
    position: absolute;
    left: calc(100% - 15px);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: visible;
}
.jcp-pinterest-arrow-svg-mobile {
    display: none;
    position: absolute;
    top: calc(100% - 60px);
    left: calc(50% + 38px);
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}
.jcp-pinterest-pin-image {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .jcp-pinterest-arrow-svg { display: none; }
    .jcp-pinterest-arrow-svg-mobile { display: block; }
    .jcp-pinterest-pin-label { margin-bottom: 1.5rem; }
}

/* Skill level quiz box */
.jcp-skill-quiz {
    background: var(--jcp-skill-quiz-bg, #fff4ef);
    padding: 30px 40px;
    margin-top: 40px;
    text-align: center;
}
.jcp-skill-quiz-eyebrow {
    font-size: 1rem;
    font-weight: 700;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.5rem;
    line-height: 1.7;
}
.jcp-skill-quiz-heading {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}
.jcp-skill-quiz-subtext {
    font-size: 1rem;
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.jcp-skill-quiz-button-wrap {
    display: flex;
    justify-content: center;
}
/* Skill quiz button — display only; colors from shared block above */
.jcp-skill-quiz-button {
    display: inline-block;
}
@media (max-width: 640px) {
    .jcp-skill-quiz {
        padding: 25px 20px;
    }
}
@media print {
    .jcp-skill-quiz { display: none; }
}

/* ── Subscriber gate ─────────────────────────────────────────────────────────
   The blur lives here and ONLY here. PHP always emits the full instructions; this is what hides
   them, which is what keeps one cached copy identical for Googlebot and every reader.

   `html.jcp-unlocked` is set in <head> before paint, so a subscriber never sees a flash. Everything
   below is therefore written as "blur unless unlocked", never the reverse — a rule that only
   applied after JS ran would show the pattern to everyone for a frame. */
.jcp-gate {
    position: relative;
}
/* The peek: PHP tags every line past the first N with .jcp-gate-blur, and this blurs them.
   It is done there, not here, because the lines sit at a depth that varies by render path — the
   first version used `.jcp-gate-content > *:nth-child(n + 5)` and blurred NOTHING at any setting,
   since the rendered instructions are a single wrapper div. One child, no match, and the number in
   Settings did nothing at all. See jcp_gate_mark_blurred(). */
html:not(.jcp-unlocked) .jcp-gate .jcp-gate-blur {
    filter: blur(5px);
    opacity: 0.6;
    user-select: none;
    pointer-events: none;
}
/* The locked part of the pattern — everything past the peek, in one wrapper so the sign-up box has
   something to stick inside. NOTHING in this chain may set overflow:hidden or the sticky breaks. */
.jcp-gate-locked {
    position: relative;
}
/* A light veil over the locked rounds. Deliberately WHITE and faint rather than the dark scrim the
   reference used — this is a bright, peachy site and a grey wash over half a pattern page looks
   like an error rather than a lock. The blur is what says "locked"; this just lifts the box off it. */
html:not(.jcp-unlocked) .jcp-gate-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    z-index: 2;
}
.jcp-gate-cta {
    display: none;
    background: var(--jcp-coral-bg, #fff4ef);
    padding: 30px 40px;
    margin: 0 auto;
    text-align: center;
}
/* STICKY, so it travels down the page with the reader instead of sitting at one spot they scroll
   straight past. It sticks within .jcp-gate-locked, which is exactly the region it is talking
   about — once the locked rounds end, so does the box. */
html:not(.jcp-unlocked) .jcp-gate .jcp-gate-cta {
    display: block;
    position: sticky;
    top: 22vh;
    width: 100%;
    max-width: 34rem;
    border: 1px solid var(--jcp-peach, #fec9b0);
    box-shadow: 0 6px 28px rgba(85, 85, 87, 0.18);
}
/* Sizes are in `em`, so they scale with whatever the GeneratePress Customizer sets rather than
   freezing a second copy of it here — the same rule that keeps font-family out of this stylesheet.
   These were in `rem`, which meant 16px against her 20px body: the box read SMALLER than the
   pattern around it. */
.jcp-gate-heading {
    font-size: 1.3em;               /* ≈ her H2 at the theme's 20px body */
    font-weight: 700;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}
.jcp-gate-text {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0 0 1.25rem;
}
.jcp-gate-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: stretch;
}
/* Stacked, her call — name, then email, then the button, each on its own row. Two fields side by
   side left each one too narrow to read a typed address back in. */
.jcp-gate-input {
    flex: 1 1 100%;
    min-width: 0;                 /* a flex item will not shrink below its content without this */
    padding: 0.75rem 1rem;
    font-family: inherit;         /* form controls do not inherit either of these on their own */
    font-size: inherit;
    border: 1px solid var(--jcp-peach, #fec9b0);
    background: #ffffff;
    color: var(--jcp-text, #555557);
}
/* Its own row, but sized to its words rather than stretched across the box — the inputs are full
   width because you type into them; the button is not, because you aim at it. */
.jcp-gate-form .jcp-gate-button {
    flex: 0 0 auto;
    margin: 0.25rem auto 0;
}
.jcp-gate-error {
    color: #b32d2e;
    font-size: 0.9em;
    margin: 0.75rem 0 0;
}
/* "Did you mean gmail.com?" — an offer, not a warning, so it is not styled like the error above.
   It sits inside the form, on its own row between the email field and the button. */
.jcp-gate-suggest {
    flex: 1 1 100%;
    font-size: 1em;
    color: var(--jcp-text, #555557);
    background: var(--jcp-yellow-pale, #fcf3cf);
    border: 1px solid var(--jcp-yellow-soft, #f8e38d);
    padding: 0.55rem 0.8rem;
    margin: 0;
    text-align: center;
}
/* !important on the size for the same reason as the submit button: GeneratePress styles `button`
   directly, so a <button> loses an inherited size while every <a> keeps it — which is why this
   rendered noticeably smaller than the words around it. */
.jcp-gate-suggest-fix {
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 700;
    line-height: inherit;
    color: var(--jcp-text, #555557);
    background: none;
    border: none;
    border-bottom: 2px solid var(--jcp-coral, #ff8d69);
    padding: 0;
    cursor: pointer;
}
.jcp-gate-suggest-fix:hover,
.jcp-gate-suggest-fix:focus { border-bottom-width: 3px; }
.jcp-gate-fine-print {
    font-size: 0.9em;
    color: var(--jcp-text-muted, #9b9b9d);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}
/* The privacy line: smallest text in the box, separated by space alone — no rule. The size
   difference is enough to mark it as the legal footnote. */
.jcp-gate-privacy {
    font-size: 0.7em;
    color: var(--jcp-text-muted, #9b9b9d);
    line-height: 1.5;
    margin: 0.9rem 0 0;
}
.jcp-gate-privacy p { margin: 0; }
.jcp-gate-privacy a {
    color: inherit;
    text-decoration: underline;
}
@media (max-width: 640px) {
    .jcp-gate-cta { padding: 22px 16px; }
    /* The form stacks on a phone, so the box is much taller — stick it higher or it fills the
       screen and there is no blurred pattern left to see behind it. */
    html:not(.jcp-unlocked) .jcp-gate .jcp-gate-cta { top: 12vh; }
}
/* Text mode is the high-contrast reading mode; the gate stays on, but the box has to be legible. */
body.jcp-text-mode .jcp-gate-cta { background: #ffffff !important; border: 2px solid #1a1a1a !important; }
/* Print is gated separately, by role, and a blurred PDF helps nobody — so print what is there and
   leave the sign-up box out of it. */
@media print {
    html:not(.jcp-unlocked) .jcp-gate .jcp-gate-blur {
        filter: none;
        opacity: 1;
    }
    html:not(.jcp-unlocked) .jcp-gate-overlay { display: none !important; }
    .jcp-gate-cta { display: none !important; }
}

/* ── Crochet chart ───────────────────────────────────────────────────────────
   Two states in two places: the real chart under Instructions for members and owners, a blurred
   copy up by the buy buttons for everyone else. The blur is baked into the generated file — there
   is deliberately NO filter here, because a CSS blur is undone by switching off one rule. */
.jcp-crochet-chart {
    margin: 2rem 0;
    text-align: center;
}
.jcp-crochet-chart-title {
    margin: 0 0 0.75rem;
}
.jcp-crochet-chart-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.jcp-crochet-chart-caption {
    font-size: 0.85em;
    color: var(--jcp-text-muted, #9b9b9d);
    line-height: 1.5;
    margin: 0.6rem 0 0;
}
.jcp-crochet-chart-lockwrap {
    position: relative;
    display: block;
}
.jcp-crochet-chart-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 28rem;
    padding: 24px 28px;
    background: var(--jcp-coral-bg, #fff4ef);
    border: 1px solid var(--jcp-peach, #fec9b0);
    box-shadow: 0 6px 28px rgba(85, 85, 87, 0.18);
}
.jcp-crochet-chart-heading {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--jcp-text, #555557);
    line-height: 1.25;
    margin: 0;
}
.jcp-crochet-chart-text {
    color: var(--jcp-text, #555557);
    line-height: 1.6;
    margin: 0.6rem 0 0;
}
@media (max-width: 640px) {
    .jcp-crochet-chart-overlay { padding: 16px 14px; }
    .jcp-crochet-chart-text { font-size: 0.9em; }
}
/* The locked chart is an advert, not pattern content — keep it out of the printed pattern. */
@media print {
    .jcp-crochet-chart-locked { display: none !important; }
}

/* Membership promo — replaces "How to get this pattern" for an owner who is not a member.
   Same coral ground as that box, because it stands in the same slot on the page and should read as
   the same furniture, not a new kind of box. Heading is text, not a Sweet Apricot PNG: the wording
   is editable in Settings → Content, and an image cannot follow it. */
.jcp-membership-promo {
    background: var(--jcp-coral-bg, #fff4ef);
    padding: 30px 40px;
    margin-bottom: 1.5rem;
    text-align: center;
}
/* `em`, not `rem` — see the note on .jcp-gate-heading. Same mistake, same fix. */
.jcp-membership-promo-heading {
    font-size: 1.3em;
    font-weight: 700;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}
.jcp-membership-promo-text {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}
.jcp-membership-promo-button-wrap {
    display: flex;
    justify-content: center;
}
/* Colors come from the shared button block above; this is display only. */
.jcp-membership-promo-button {
    display: inline-block;
}
@media (max-width: 640px) {
    .jcp-membership-promo {
        padding: 25px 20px;
    }
}
@media print {
    .jcp-membership-promo { display: none; }
}

/* Share & Worth Noting box */
.jcp-share-worth-noting {
    margin-top: 40px;
}
.jcp-share-worth-noting-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.jcp-share-worth-noting p,
.jcp-share-worth-noting ul,
.jcp-share-worth-noting ol,
.jcp-share-worth-noting li {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}
.jcp-share-worth-noting p:last-child,
.jcp-share-worth-noting ul:last-child,
.jcp-share-worth-noting ol:last-child {
    margin-bottom: 0;
}
@media print {
    .jcp-share-worth-noting { display: none; }
}

/* ── FAQ section ── */
.jcp-faq-section {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.jcp-faq-heading {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--jcp-heading, #555557);
    margin: 0 0 1.25rem;
    line-height: 1.3;
}
.jcp-faq-item {
    margin-bottom: 1.25rem;
}
.jcp-faq-item:last-child {
    margin-bottom: 0;
}
.jcp-faq-question {
    font-size: 1em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 0.4rem;
    line-height: 1.5;
}
.jcp-faq-answer {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
}
.jcp-faq-answer p,
.jcp-faq-answer ul,
.jcp-faq-answer ol,
.jcp-faq-answer li {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0 0 0.5rem;
}
.jcp-faq-answer p:last-child,
.jcp-faq-answer ul:last-child,
.jcp-faq-answer ol:last-child {
    margin-bottom: 0;
}
.jcp-faq-answer a {
    color: var(--jcp-accent, #4f857b);
}
.jcp-faq-answer a:hover,
.jcp-faq-answer a:focus {
    color: var(--jcp-hover-accent, #ff8d69);
}

/* ── Crochet mode button — fills full right half of pill via height:100% ── */
.jcp-crochet-mode-btn {
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    font-size: 1rem;
    /* White, because the pill it sits in is the button colour now (v0.3.857). It used to be
       var(--jcp-button-bg), which on a coral pill would be coral on coral. Crochet mode is off by
       default so nobody has seen this, but it would have been invisible the day she switched it on. */
    color: #ffffff;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0;
    padding: 7px 18px 7px 12px;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.jcp-crochet-mode-top {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    line-height: 1.4;
}
.jcp-crochet-mode-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--jcp-button-bg);
}
.jcp-crochet-mode-btn:active {
    background: var(--jcp-button-bg) !important;
    color: #fff !important;
}
.jcp-crochet-mode-btn:active .jcp-crochet-mode-label {
    color: rgba(255, 255, 255, 0.85) !important;
}
.jcp-crochet-mode-btn:focus,
.jcp-crochet-mode-btn:focus-visible {
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--jcp-button-bg);
}
.jcp-crochet-mode-btn[aria-pressed="true"] {
    background: var(--jcp-button-bg);
    color: #fff;
}
.jcp-crochet-mode-btn[aria-pressed="true"]:focus,
.jcp-crochet-mode-btn[aria-pressed="true"]:focus-visible {
    background: var(--jcp-button-bg);
    color: #fff;
}
.jcp-crochet-mode-btn[aria-pressed="true"] .jcp-crochet-mode-label {
    color: rgba(255, 255, 255, 0.85);
}
.jcp-crochet-mode-label {
    font-size: 0.6875rem;
    color: var(--jcp-button-bg);
    line-height: 1.3;
    white-space: nowrap;
}
.jcp-wakelock-hidden {
    display: none !important;
}

/* ── Skill level badge text fallback (hidden on screen) ── */
.jcp-skill-level-badge-text {
    display: none;
}

/* ── Print-only elements: hidden on screen ── */
.jcp-print-only {
    display: none;
}

/* Running header injected by JS — hidden on screen */
.jcp-print-running-header {
    display: none;
}

/* ── Print popup overlay ── */
.jcp-print-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jcp-print-overlay[hidden] {
    display: none !important;
}
.jcp-print-dialog {
    background: #fff;
    padding: 28px 32px;
    max-width: 460px;
    width: 92%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.jcp-print-dialog-title {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 0 0 22px;
    padding: 0;
    border: none;
}
.jcp-print-options {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}
.jcp-print-option {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.jcp-print-option-label {
    font-weight: 600;
    font-size: 0.875em;
    color: var(--jcp-text, #555557);
}
.jcp-print-option label[for].jcp-print-option-label {
    font-weight: 600;
    font-size: 0.875em;
    color: var(--jcp-text, #555557);
}
.jcp-print-radio-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.jcp-print-option-note {
    font-size: 0.8em;
    color: #888;
    margin: 2px 0 0;
    font-style: italic;
}
.jcp-print-radio-label {
    font-size: 0.875em;
    color: var(--jcp-text, #555557);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.jcp-print-size-select {
    font-size: 0.875em;
    padding: 7px 10px;
    border: 1px solid var(--jcp-border, #dededf);
    color: var(--jcp-text, #555557);
    background: #fff;
    max-width: 220px;
}
.jcp-print-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--jcp-border, #dededf);
    padding-top: 20px;
}
.jcp-print-cancel-btn {
    font-size: 0.875em;
    font-weight: 600;
    padding: 10px 20px;
    border: 1px solid var(--jcp-border, #dededf);
    background: #fff;
    color: var(--jcp-text, #555557);
    cursor: pointer;
}
.jcp-print-cancel-btn:hover {
    background: #f6f6f6;
}
.jcp-print-confirm-btn {
    font-size: 0.875em;
    font-weight: 700;
    padding: 10px 24px;
    border: none !important;
    border-bottom: none !important;
    background: var(--jcp-btn-bg, #ffb197) !important;
    color: var(--jcp-btn-text, #000000) !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    text-decoration: none !important;
}
.jcp-print-confirm-btn:hover,
.jcp-print-confirm-btn:focus,
.jcp-print-confirm-btn:active,
.jcp-print-confirm-btn:focus-visible {
    opacity: 0.8;
    background: var(--jcp-btn-bg, #ffb197) !important;
    color: var(--jcp-btn-text-hover, #000000) !important;
    outline: none;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* ── Print media ── */
@media print {
    /* Isolation: the JS injects a <style media="print"> that hides all
       non-clone body content — zero screen effect, no blank-page flash.
       These CSS rules duplicate that for belt-and-suspenders. */
    body.jcp-printing > *:not(.jcp-print-clone) {
        display: none !important;
        visibility: hidden !important;
    }
    body.jcp-printing #wpadminbar {
        display: none !important;
        visibility: hidden !important;
    }
    body.jcp-printing .jcp-print-clone {
        display: block !important;
        visibility: visible !important;
    }
    /* Compact font applies only to pattern content sections and the links page,
       so the cover and legal pages inherit the theme font size unchanged. */
    body.jcp-printing .jcp-print-clone .jcp-section,
    body.jcp-printing .jcp-print-clone .jcp-print-links-page {
        font-size: 13px;
    }

    /* Force background colors to print on ALL elements, regardless of browser settings */
    *, *::before, *::after {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    html, body {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Page layout + running header + page numbers.
       @top-* margin boxes paint the peach header bar. Supported in:
         - Chrome/Edge (all versions)
         - Safari 18.2+ (December 2024) — including iOS Safari 18.2+
         - Firefox: NOT supported (Bug 856371, no timeline). JS shows a notice for Firefox users.
       position:fixed cannot substitute — top:0 in print lands at the content-area origin
       and overlaps body content on every page (confirmed v0.3.486 regression).
       RULE: NEVER use `transparent` in @page gradient boxes — Chrome renders it as BLACK.
       background-color: #ffffff explicit (NOT via shorthand) so Chrome never goes transparent=black. */
    @page {
        margin: 2.0cm 1.5cm 1.8cm;
        @top-left {
            content: ' ';
            background: linear-gradient(to bottom, #ffffff 25%, #fec9b0 25%, #fec9b0 75%, #ffffff 75%);
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        @top-center {
            content: ' ';
            background: linear-gradient(to bottom, #ffffff 25%, #fec9b0 25%, #fec9b0 75%, #ffffff 75%);
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        @top-right {
            content: "JOYOFMOTIONCROCHET.COM";
            background: linear-gradient(to bottom, #ffffff 25%, #fec9b0 25%, #fec9b0 75%, #ffffff 75%);
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            color: #555557;
            font-size: 7.5pt;
            font-weight: bold;
            letter-spacing: 0.08em;
            text-align: right;
            vertical-align: middle;
            padding: 0 14px 0 0;
        }
        @bottom-left   { content: none; }
        @bottom-center { content: none; }
        /* background-color set separately (not via shorthand) so Chrome cannot reset it to
           transparent=black. background-image uses absolute-length hard stop so no feathering. */
        @bottom-right {
            content: counter(page);
            width: 1.5cm;
            background-color: #ffffff;
            background-image: radial-gradient(circle at 50% 36%, #fec9b0 0.55cm, #ffffff 0.55cm);
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            color: #555557;
            font-size: 10pt;
            font-weight: bold;
            text-align: center;
            vertical-align: top;
            padding-top: 0.45cm;
        }
    }

    /* Hide all screen-only UI inside the clone */
    .jcp-print-clone .jcp-print-overlay,
    .jcp-print-clone .jcp-blog-header,
    .jcp-print-clone .jcp-header,
    .jcp-print-clone .jcp-faq-section,
    .jcp-print-clone .jcp-more-in-category,
    .jcp-print-clone .jcp-share-worth-noting,
    .jcp-print-clone .jcp-pinterest-pin,
    .jcp-print-clone .jcp-not-ready-section {
        display: none !important;
    }

    /* When admin includes blog content */
    .jcp-print-clone.jcp-print-with-blog .jcp-blog-header {
        display: block !important;
    }

    /* ── Page breaks in the sitewide content blocks ──────────────────────────
       A heading must never be the last thing on a sheet. "Join Granny Squares As You Go (JAYGO)"
       was landing at the foot of one page with its three methods on the next, which reads as a
       misprint rather than a section. These blocks are taller than a page, so they have to be
       allowed to split — the rules below only control *where*. */
    .jcp-print-clone h2,
    .jcp-print-clone h3,
    .jcp-print-clone h4,
    .jcp-print-clone h5,
    .jcp-print-clone h6 {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Their lists are short — three or four steps — so keeping each whole costs nothing and stops
       a single item stranding itself on the next sheet, as "4. Block your granny squares" did. */
    .jcp-print-clone .jcp-materials-section-content ol,
    .jcp-print-clone .jcp-materials-section-content ul,
    .jcp-print-clone .jcp-best-tips-section-content ol,
    .jcp-print-clone .jcp-best-tips-section-content ul,
    .jcp-print-clone .jcp-join-granny-section-content ol,
    .jcp-print-clone .jcp-join-granny-section-content ul {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .jcp-print-clone li {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .jcp-print-clone p,
    .jcp-print-clone li {
        orphans: 2;
        widows: 2;
    }

    /* ...but not these, which are navigation and promotion rather than pattern. The table of
       contents links to anchors that do not exist on paper, and the bundle callout is an ad in
       something the reader may have paid for. `.wpj-jtoc` is Joli Table of Contents, which injects
       itself through the_content and so lands inside the cloned pattern. */
    .jcp-print-clone .wpj-jtoc,
    .jcp-print-clone .jcp-bundle-callout {
        display: none !important;
    }


    /* ── Step-by-step photo instructions ────────────────────────────────────────
       The side-by-side step card is gated behind min-width:761px and an A4 page carries only
       ~640px of printable width, so print had been falling into the phone layout: photo stacked
       above its text, one step per sheet. Force the two columns back, independent of paper width.

       The photo's height is what decides how many steps fit on a sheet: 62mm gives three. max-height
       on the img itself rather than the figure is what Chrome's print layout actually measures — the
       same trick the cover photo uses. The 45/55 split goes with it: a shorter photo needs less width,
       and handing the difference to the text is what stops a long step stretching the card down the
       page. Three was chosen and fixed rather than offered — it is the least paper, and it read well
       on a real print. */
    .jcp-print-clone .jcp-instruction-steps {
        gap: 5mm !important;
    }
    .jcp-print-clone .jcp-instruction-step {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .jcp-print-clone .jcp-instruction-step.jcp-instruction-step-has-photo {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr) !important;
        gap: 5mm !important;
        padding: 4mm !important;
        align-items: start !important;
    }
    .jcp-print-clone .jcp-instruction-step-has-photo .jcp-instruction-step-media {
        order: 1 !important;
    }
    .jcp-print-clone .jcp-instruction-step-has-photo .jcp-instruction-step-body {
        order: 2 !important;
    }
    /* Let the figure hug the photo, or the step number badge floats off the left edge of the
       image once the image is narrower than its column. */
    .jcp-print-clone .jcp-instruction-step-photo {
        width: fit-content !important;
        margin: 0 auto !important;
    }
    .jcp-print-clone .jcp-instruction-step-photo img {
        max-height: 62mm !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    /* Show print-only pages */
    .jcp-print-clone .jcp-print-only {
        display: block !important;
    }

    /* ── Cover page ── */
    .jcp-print-clone .jcp-print-cover {
        page-break-after: always;
        break-after: always;
        box-sizing: border-box;
    }
    /* Constrain cover photo to keep the cover on one page.
       max-height on the img element itself (not just the wrapper) ensures Chrome's print
       layout engine sees the correct box height. object-fit:contain shows the full image
       without cropping inside the constrained box. 150mm leaves ~53mm for the title + gap. */
    .jcp-print-clone .jcp-print-cover-photo-wrap {
        overflow: hidden;
    }
    .jcp-print-clone .jcp-print-cover-photo-wrap img,
    .jcp-print-clone .jcp-print-cover-photo {
        width: 100%;
        max-height: 150mm;
        height: auto;
        display: block;
        object-fit: contain;
        object-position: center top;
    }
    /* Running header: handled by @page @top-* margin boxes (Chrome/Edge only).
       Firefox/Safari ignore @page margin-box content — the JS print dialog shows a notice
       recommending Chrome or Edge when those browsers are detected. */
    .jcp-print-clone .jcp-print-running-header {
        display: none !important;
    }


    .jcp-print-clone .jcp-print-cover,
    .jcp-print-clone .jcp-print-legal {
        padding-top: 0;
    }

    /* Old inline page headers are replaced by the fixed header — hide them */
    .jcp-print-clone .jcp-print-page-header {
        display: none !important;
    }
    .jcp-print-clone .jcp-print-cover-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }
    .jcp-print-clone .jcp-print-cover-title-box {
        padding: 22px 28px;
        text-align: center;
    }
    .jcp-print-clone .jcp-print-cover-title {
        font-size: 2.8em;
        font-weight: bold;
        color: #555557;
        margin: 0 0 14px;
        text-align: center;
        line-height: 1.2;
    }
    .jcp-print-clone .jcp-print-cover-byline {
        font-size: 1.3em;
        color: #555557;
        margin: 0;
        text-align: center;
    }

    /* Hide interactive measurement unit select from print output */
    .jcp-print-clone .jcp-measurement-unit-label {
        display: none !important;
    }
    /* ── Legal page ── */
    .jcp-print-clone .jcp-print-legal {
        page-break-after: always;
        break-after: always;
    }
    .jcp-print-clone .jcp-print-legal-top {
        display: flex;
        gap: 24px;
        margin-bottom: 24px;
        align-items: flex-start;
    }
    .jcp-print-clone .jcp-print-legal-photo {
        flex-shrink: 0;
    }
    .jcp-print-clone .jcp-print-legal-photo img {
        width: 140px;
        height: auto;
        display: block;
    }
    .jcp-print-clone .jcp-print-legal-bio {
        flex: 1;
        font-size: 0.8em;
        line-height: 1.6;
        color: #555557;
    }
    .jcp-print-clone .jcp-print-legal-bio p {
        margin: 0;
    }
    .jcp-print-clone .jcp-print-info-boxes {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .jcp-print-clone .jcp-print-info-box {
        border: 1px solid #bad7d2;
        padding: 12px 16px;
    }
    .jcp-print-clone .jcp-print-info-box .jcp-print-info-title {
        font-size: 0.75em;
        font-weight: bold;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #555557;
        margin: 0 0 7px;
        padding: 0;
    }
    .jcp-print-clone .jcp-print-info-box p {
        font-size: 0.78em;
        line-height: 1.55;
        color: #555557;
        margin: 0 0 6px;
    }
    .jcp-print-clone .jcp-print-info-box p:last-child {
        margin-bottom: 0;
    }

    /* ── Section page-break rules ── */
    /* Override jcp-section-has-background's screen-side !important 0 padding,
       and remove its white-mask ::before (not needed in print). */
    /* Straddle restored: keep ::before white mask so heading straddles section top edge.
       Force white to print so the mask works against the colored section background. */
    .jcp-print-clone .jcp-section.jcp-section-has-background {
        padding-top: 0 !important;
    }
    .jcp-print-clone .jcp-section.jcp-section-has-background::before {
        background: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    /* About section: keep the original negative margin-top so the heading straddles
       the image bottom edge in print, same as on screen. No override needed. */

    .jcp-print-clone .jcp-section {
        display: block !important;
        padding-top: 20px;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow: visible !important;
        orphans: 4;
        widows: 4;
    }
    .jcp-print-clone .jcp-section h3,
    .jcp-print-clone .jcp-section h4,
    .jcp-print-clone .jcp-section .jcp-section-title {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }
    /* Prevent callout boxes and table rows from splitting */
    .jcp-print-clone .jcp-callout,
    .jcp-print-clone .jcp-info-box,
    .jcp-print-clone .jcp-note-box,
    .jcp-print-clone .jcp-abbreviations-list,
    .jcp-print-clone .jcp-size-measurements-table tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* ── B&W mode ── */

    /* All images grayscale (covers heading-notes.png which has no B&W version) */
    .jcp-print-clone.jcp-print-bw img {
        filter: grayscale(100%) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Section backgrounds: no color fill, black border */
    .jcp-print-clone.jcp-print-bw .jcp-section-has-background {
        background: transparent !important;
        border-color: #000000 !important;
    }

    /* Callout/tip boxes: remove colored backgrounds */
    .jcp-print-clone.jcp-print-bw .jcp-instruction-step-note,
    .jcp-print-clone.jcp-print-bw .jcp-yarn-tip {
        background: transparent !important;
        border-left-color: #000000 !important;
    }

    /* Step number badge: the teal fill was set !important on .jcp-pattern, so nothing here reached
       it and the numbers printed in color in B&W. White fill with a black ring, because the badge
       sits on top of a (now grayscale) photo and has to stay readable against it. */
    .jcp-print-clone.jcp-print-bw .jcp-instruction-step-number {
        background: #ffffff !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
        box-shadow: none !important;
    }

    /* Step cards: same rule as section backgrounds — no color fill, black border. */
    .jcp-print-clone.jcp-print-bw .jcp-instruction-step,
    .jcp-print-clone.jcp-print-bw .jcp-instruction-step-photo {
        background: transparent !important;
        border-color: #000000 !important;
    }

    /* Every other box that prints with a color fill. B&W had only ever covered the pattern
       sections, so the stitch tutorial callouts kept their tint, and so did the whole blog zone
       when "Blog content: Include" was chosen. Text-mode rules exist for most of these; print had
       none, which is why the "Use the stitch count and number of rows…" callout came out colored. */
    .jcp-print-clone.jcp-print-bw .jcp-stitch-tutorial-callout,
    .jcp-print-clone.jcp-print-bw .jcp-stitch-tutorial-measurement-callout,
    .jcp-print-clone.jcp-print-bw .jcp-stitch-tutorial-project-help,
    .jcp-print-clone.jcp-print-bw .jcp-stitch-tutorial-materials-callout,
    .jcp-print-clone.jcp-print-bw .jcp-crochet-a-blanket-box,
    .jcp-print-clone.jcp-print-bw .jcp-materials-section,
    .jcp-print-clone.jcp-print-bw .jcp-best-tips-section,
    .jcp-print-clone.jcp-print-bw .jcp-join-granny-section,
    .jcp-print-clone.jcp-print-bw .jcp-share-worth-noting,
    .jcp-print-clone.jcp-print-bw .jcp-yarn-section,
    .jcp-print-clone.jcp-print-bw .jcp-how-to-crochet-box,
    .jcp-print-clone.jcp-print-bw .jcp-how-to-crochet-fact,
    .jcp-print-clone.jcp-print-bw .jcp-helpful-tools-box,
    .jcp-print-clone.jcp-print-bw .jcp-how-to-get {
        background: transparent !important;
        border-color: #000000 !important;
    }

    /* The straddle mask has nothing to mask once the box backgrounds are transparent, and a white
       half-band over a B&W heading would only lighten it. */
    .jcp-print-clone.jcp-print-bw .jcp-straddle { background: none !important; }

    /* All borders black */
    .jcp-print-clone.jcp-print-bw * {
        border-color: #000000 !important;
    }

    /* Links: black text, black border-bottom (4px teal border-bottom is the plugin's "underline") */
    .jcp-print-clone.jcp-print-bw a,
    .jcp-print-clone.jcp-print-bw a:visited,
    .jcp-print-clone.jcp-print-bw a:link {
        color: #000000 !important;
        border-bottom-color: #000000 !important;
        text-decoration-color: #000000 !important;
    }

    /* Buttons: light grey (may be removed or shown as plain text link in a future version) */
    .jcp-print-clone.jcp-print-bw .jcp-print-button,
    .jcp-print-clone.jcp-print-bw .jcp-buy-btn,
    .jcp-print-clone.jcp-print-bw .jcp-bundle-callout .jcp-bundle-button,
    .jcp-print-clone.jcp-print-bw .jcp-skill-quiz-button,
    .jcp-print-clone.jcp-print-bw .jcp-library-entry-btn {
        background: #d0d0d0 !important;
        color: #000000 !important;
        border: 1px solid #999 !important;
    }

    /* Straddling: cancel the About heading's negative margin-top when there is no image
       to straddle into. Use the standard ::before mask mechanism instead (same as Gauge). */
    .jcp-print-clone.jcp-print-bw .jcp-section.jcp-section-about-with-image .jcp-section-title,
    .jcp-print-clone.jcp-print-no-images .jcp-section.jcp-section-about-with-image .jcp-section-title {
        margin-top: 0 !important;
    }
    /* No-images: About section starts on a new page.
       Re-enable the ::before white mask that is normally suppressed when a photo is present
       (the photo provides the visual contrast in full-color mode). With no photo, the mask
       creates the white top-half zone exactly like Gauge and other colored sections.
       Height = half the About PNG height (4.375rem ÷ 2 = 2.1875rem). */
    .jcp-print-clone.jcp-print-no-images .jcp-section-about {
        page-break-before: always;
        break-before: always;
    }
    .jcp-print-clone.jcp-print-no-images .jcp-section-about.jcp-section-has-background::before {
        display: block !important;
        height: 2.1875rem;
    }

    /* The B&W PNGs have their own canvas heights, so print reads --jcp-h-bw, which PHP publishes
       beside --jcp-h from the -bw file's own header. Six hand-written height rules used to live
       here doing that arithmetic per section; they all worked out to the same scale. */
    .jcp-print-clone.jcp-print-bw .jcp-section-title--image img,
    .jcp-print-clone.jcp-print-bw .jcp-straddle > img {
        max-height: calc(var(--jcp-h-bw, var(--jcp-h, 200)) * var(--jcp-heading-scale) * 1px) !important;
    }

    /* B&W: keep section titles with their content */
    .jcp-print-clone.jcp-print-bw .jcp-section-title--image {
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* B&W: strip table row backgrounds (thead th and all tbody rows) */
    .jcp-print-clone.jcp-print-bw .jcp-size-measurement-table thead th,
    .jcp-print-clone.jcp-print-bw .jcp-size-measurement-table tbody tr,
    .jcp-print-clone.jcp-print-bw .jcp-size-measurement-table tbody tr:nth-child(even),
    .jcp-print-clone.jcp-print-bw .jcp-size-measurement-table tbody td,
    .jcp-print-clone.jcp-print-bw .jcp-size-measurement-table tbody th {
        background: transparent !important;
        border: 1px solid #000 !important;
        color: #000 !important;
    }
    .jcp-print-clone.jcp-print-bw .jcp-size-measurement-table {
        border-collapse: collapse !important;
        border: 1px solid #000 !important;
    }

    /* ── Skill level: show badge in full color+photos mode; text fallback for B&W or no-images ── */
    /* Default (full color + photos): badge image visible, text block hidden */
    .jcp-print-clone .jcp-skill-level-badge {
        display: block !important;
    }
    .jcp-print-clone .jcp-print-project-level {
        display: none !important;
    }
    /* B&W or no-images: hide badge, show text block (no separator line) */
    .jcp-print-clone.jcp-print-bw .jcp-skill-level-badge,
    .jcp-print-clone.jcp-print-no-images .jcp-skill-level-badge {
        display: none !important;
    }
    .jcp-print-clone.jcp-print-bw .jcp-print-project-level,
    .jcp-print-clone.jcp-print-no-images .jcp-print-project-level {
        display: flex !important;
        align-items: center;
        gap: 10px;
        font-size: 0.9em;
        color: #555557;
        margin-top: 14px;
        padding-left: 1.5rem;
    }
    .jcp-print-clone .jcp-print-project-level-heading {
        font-weight: bold;
    }

    /* ── Hide images when selected ── */
    .jcp-print-clone.jcp-print-no-images .jcp-pattern-image-slot,
    .jcp-print-clone.jcp-print-no-images .jcp-about-image,
    .jcp-print-clone.jcp-print-no-images .jcp-schematic-image,
    .jcp-print-clone.jcp-print-no-images figure:not(.jcp-print-cover-content figure):not(.jcp-instruction-step-photo) {
        display: none !important;
    }

    /* No-images: hide cover page photo; make title and byline larger to fill the space */
    .jcp-print-clone.jcp-print-no-images .jcp-print-cover-photo-wrap {
        display: none !important;
    }
    .jcp-print-clone.jcp-print-no-images .jcp-print-cover-title {
        font-size: 4em !important;
    }
    .jcp-print-clone.jcp-print-no-images .jcp-print-cover-byline {
        font-size: 1.8em !important;
        margin-top: 0.5em;
    }

    /* No-images: hide bio photo on legal page; bio text goes full width + bordered box */
    .jcp-print-clone.jcp-print-no-images .jcp-print-legal-photo {
        display: none !important;
    }
    .jcp-print-clone.jcp-print-no-images .jcp-print-legal-top {
        display: block !important;
    }
    .jcp-print-clone.jcp-print-no-images .jcp-print-legal-bio {
        border: 1px solid #bad7d2;
        padding: 16px 20px;
    }

    /* ── Links page ── */
    .jcp-print-clone .jcp-print-links-page {
        page-break-before: always;
        break-before: always;
        padding-top: 0;
    }
    .jcp-print-clone .jcp-print-links-heading {
        font-size: 0.75em;
        font-weight: bold;
        color: #555557;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: 0 0 1rem;
        padding: 0;
        border: none;
        text-align: left;
    }
    .jcp-print-clone .jcp-print-links-table {
        width: 100%;
        border-collapse: collapse;
        color: #555557;
        table-layout: fixed;
    }
    .jcp-print-clone .jcp-print-links-table th {
        text-align: left;
        padding: 6px 10px;
        border-bottom: 2px solid #bad7d2;
        font-weight: bold;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .jcp-print-clone .jcp-print-links-table td {
        padding: 5px 10px;
        border-bottom: 1px solid #dededf;
        vertical-align: top;
        word-break: break-all;
    }
    .jcp-print-clone .jcp-print-links-table col:first-child { width: 36%; }
    .jcp-print-clone .jcp-print-links-table col:last-child  { width: 64%; }
}

/* ── Google preferred source ──────────────────────────────────────────
   Google's own badge art, centered, with nothing around it. No box, no heading, no border: the page
   already carries subscribe, Pinterest, buy links, crochet mode and ads, and this competes with the
   buy links, which are the ones that earn. It is a quiet ask, deliberately.

   The badge is Google's image so its own styling governs — the no-rounded-corners rule does not
   reach inside it, the same way the Pinterest button is exempt. Only the text fallback, used until
   the asset is added, is styled to the brand. */
.jcp-preferred-source {
    display: flex;
    justify-content: center;
    margin: 1.75rem 0;
}
/* display:flex above beats the hidden attribute's display:none, so hiding a used button needs this
   explicitly — the same trap as .jcp-version-extra. */
.jcp-preferred-source[hidden] { display: none !important; }
.jcp-preferred-source-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}
/* Google's file is 338x107 for a badge meant to sit around 169px wide, so it is served at half its
   pixel size and looks sharp on any screen. The width/height attributes hold the row open while it
   loads; max-width keeps it inside a narrow phone. */
/* HALF THE SCREEN ON A PHONE, 240px on anything wider — her call, v0.3.853: 169px was "a bit
   small", 82vw was "too big", and she asked for "about 50% on mobile". `min()` does both jobs in
   one rule with no media query, so there is no breakpoint where the badge jumps UP as the screen
   narrows — which a plain `50vw` under a 600px query would have done, 240px becoming 300px.
   Google's file is 338px wide, so 240 is still under native resolution and stays sharp. */
.jcp-preferred-source-badge {
    display: block;
    width: min(240px, 50vw);
    height: auto;
    max-width: 100%;
}
.jcp-preferred-source-text {
    font: bold 0.9rem/1.4 Tahoma, Geneva, Verdana, sans-serif;
    color: #555557;
    background: #ffffff;
    border: 1px solid #555557;
    padding: 0.55rem 1rem;
    text-align: center;
}
.jcp-preferred-source-btn:hover .jcp-preferred-source-text,
.jcp-preferred-source-btn:focus-visible .jcp-preferred-source-text {
    color: #000000;
    border-color: #000000;
}
.jcp-preferred-source-btn:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 3px;
}
/* Never printed — it is a link to a Google settings page, useless on paper. */
@media print {
    .jcp-preferred-source { display: none !important; }
}

/* ── Text mode toggle ─────────────────────────────────────────────────
   A floating circle in the bottom-right, sitting above Slickstream's own floating button.

   The three offsets below are the only things to change if it does not line up: Slickstream renders
   its UI at runtime inside a shadow DOM, so its geometry cannot be read from here and these are set
   by eye against a screenshot. --bottom must clear Slickstream's button plus a gap.

   Deliberately black and white rather than a brand color: it is an accessibility control, and it has
   to stay legible sitting on top of whatever photo happens to be behind it. */
.jcp-text-mode-btn {
    /* Measured off screenshots, 16 September 2026. Slickstream stacks three circles bottom-right --
       back to top, favorites, search -- about 44px across and right-aligned ~6px from the edge.
       This sits directly above the topmost one.

       How to set these, if it ever needs redoing. Slickstream spaces its own circles about 20px
       apart -- measure heart to search, where no count label intervenes -- so the target is that
       same gap between our bottom edge and the chevron's top edge. Matching their rhythm beats
       picking a number, and it is a gap you can see rather than one you have to trust.

       Measure edges, never centers: the first attempt worked center-to-center, mis-estimated the
       screenshot scale, and a 20px error hid inside the arithmetic until it surfaced as an overlap.

       Note: Raptive's floating video sometimes covers Slickstream's stack on desktop entirely. That
       is true of their buttons too, and is not something this can position around. */
    --jcp-tm-size: 2.875rem;
    --jcp-tm-right: 0.5rem;
    --jcp-tm-bottom: 17.5rem;

    position: fixed;
    right: var(--jcp-tm-right);
    bottom: var(--jcp-tm-bottom);
    z-index: 9000;

    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--jcp-tm-size);
    height: var(--jcp-tm-size);
    padding: 0;
    margin: 0;

    background: #ffffff;
    color: #555557;
    border: 1px solid #555557;
    border-radius: 50%;           /* the one round thing in the plugin: it is a floating control,
                                     not a content box, and a square would read as a broken image */
    /* Two layers to match the Slickstream circles it stacks above: a tight contact shadow that
       defines the edge, plus a wide soft one for the lift. A single shadow reads as a hard ring
       next to theirs. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.16);
    cursor: pointer;

    /* Hidden until scrolled past the header — see initTextModeButton(). Never display:none, or the
       transition has nothing to animate from and the button pops in. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.jcp-text-mode-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.jcp-text-mode-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}
.jcp-text-mode-btn:hover,
.jcp-text-mode-btn:focus-visible {
    color: #000000;
    border-color: #000000;
}
.jcp-text-mode-btn:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}
/* Pressed state stays black-on-white but fills in, so "on" is obvious without color. */
.jcp-text-mode-btn[aria-pressed="true"] {
    background: #1a1a1a;
    color: #ffffff;
    border-color: #1a1a1a;
}

/* The label is the tooltip AND the accessible name — one copy of the words, not two. Hidden with
   opacity rather than display, so screen readers still announce it. */
.jcp-text-mode-label {
    position: absolute;
    right: calc(100% + 0.5rem);
    white-space: nowrap;
    font: bold 0.8rem/1 Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.03em;
    background: #1a1a1a;
    color: #ffffff;
    padding: 0.4rem 0.6rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
/* HOVER ONLY WHERE HOVER EXISTS (v0.3.788). A phone has no hover, so tapping the button left the
   label stuck open — a black box sitting over the pattern text beside it, which is what she
   photographed. `@media (hover: hover)` is the only way to ask; a touch tap satisfies `:hover` in
   mobile Chrome and keeps satisfying it until something else is tapped.
   `:focus-visible` stays outside the query on purpose: it is the keyboard path, and a keyboard user
   needs the label most. Browsers reserve it for keyboard focus, so a tap does not trigger it. */
@media (hover: hover) and (pointer: fine) {
    .jcp-text-mode-btn:hover .jcp-text-mode-label {
        opacity: 1;
    }
}
.jcp-text-mode-btn:focus-visible .jcp-text-mode-label {
    opacity: 1;
}

/* AND NOT AT ALL ON A TOUCH SCREEN (v0.3.790). The `hover: hover` guard above was not enough — her
   Android phone answers that query as though it has a mouse, and the label appeared anyway, sitting
   over the Materials text. `pointer: coarse` describes the PRIMARY input rather than a capability,
   so a finger says coarse while a laptop with a trackpad says fine even if its screen also responds
   to touch. Taken away entirely rather than merely un-hovered: a tooltip explaining a button is of
   no use to someone who cannot hover to read it before deciding whether to press. */
@media (pointer: coarse) {
    .jcp-text-mode-btn .jcp-text-mode-label {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jcp-text-mode-btn,
    .jcp-text-mode-label { transition: none; }
}

/* Phones: a little smaller and tighter to the edge, where screen space is scarcer. The bottom offset
   is an estimate — the measurement above came from a desktop screenshot, and Slickstream may show a
   shorter stack on a phone. Worth checking against a phone screenshot before trusting it. */
/* Phones: slightly smaller, and the stack genuinely sits lower.

   v0.3.617 dropped this bottom override on the reasoning that both breakpoints measured the same.
   They do not — the measurement that said so was the one that was wrong by 20px. Once measured from
   edges the phone gap came out at 54px against desktop's 16px, so the two need their own values.

   Desktop was settled in v0.3.619 and should be left alone. The phone took an extra pass because
   phone screenshots arrive at whatever zoom the device used, so the pixels in the picture are not
   CSS pixels. Calibrate before trusting a phone measurement: this button's own rendered width is a
   known quantity, so compare it against --jcp-tm-size to recover the scale, then convert. */
@media (max-width: 600px) {
    .jcp-text-mode-btn {
        --jcp-tm-size: 2.75rem;
        --jcp-tm-bottom: 16.25rem;
    }
}

@media print {
    .jcp-text-mode-btn { display: none !important; }
}

/* PNG headings hidden in text mode. The straddle wrapper loses its mask with them: with the
   image gone it has no height, but an explicit `none` means a future change to the wrapper cannot
   leave a white band floating in text mode. */
body.jcp-text-mode .jcp-straddle { background: none !important; }
body.jcp-text-mode .jcp-section-heading-img,
body.jcp-text-mode .jcp-how-to-get-heading-img,
body.jcp-text-mode .jcp-how-to-crochet-heading-img,
body.jcp-text-mode .jcp-crochet-a-blanket-heading-img,
body.jcp-text-mode .jcp-not-ready-heading-img,
body.jcp-text-mode .jcp-helpful-tools-heading-img {
    display: none !important;
}

/* Fix 1: Pattern Overview heading text fallback (PHP-added span, hidden normally) */
.jcp-how-to-crochet-heading-text { display: none; }
body.jcp-text-mode .jcp-how-to-crochet-heading-text {
    display: block !important;
    font: bold 1.4rem/1.3 Tahoma, Geneva, Verdana, sans-serif;
    color: #1a1a1a;
    text-align: center;
    padding: 0.25rem 0 1rem;
}

/* sr-only spans become visible styled headings in text mode — near-black for max contrast */
body.jcp-text-mode .jcp-section-title .jcp-sr-only,
body.jcp-text-mode .jcp-blog-header h2 .jcp-sr-only,
body.jcp-text-mode .jcp-blog-header h3 .jcp-sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0.25rem 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    font: bold 1.4rem/1.3 Tahoma, Geneva, Verdana, sans-serif !important;
    color: #1a1a1a !important;
    display: block !important;
    text-align: center;
}

/* Fix 2: About heading — remove negative margin that overlays it on the photo */
body.jcp-text-mode .jcp-section.jcp-section-about-with-image .jcp-section-title {
    margin-top: 1rem !important;
    z-index: auto !important;
}

/* Fix 3: Project level badge hidden; plain text shown with padding */
body.jcp-text-mode .jcp-section-projectLevel { display: none !important; }
body.jcp-text-mode .jcp-skill-level-badge-link { display: none !important; }
.jcp-project-level-text-mode { display: none; }
body.jcp-text-mode .jcp-project-level-text-mode {
    display: block !important;
    font: bold 1.1rem/1.5 Tahoma, Geneva, Verdana, sans-serif;
    color: #1a1a1a;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
}

/* Fix 4: Strip colored section backgrounds */
body.jcp-text-mode .jcp-section-has-background {
    background: #ffffff !important;
    border-color: #dededf !important;
}
body.jcp-text-mode .jcp-gauge-box {
    background: #ffffff !important;
    border-color: #dededf !important;
}
body.jcp-text-mode .jcp-how-to-get {
    background: #ffffff !important;
}
body.jcp-text-mode .jcp-free-note { border-color: #1a1a1a !important; }
body.jcp-text-mode .jcp-bundle-callout { background: #ffffff !important; border: 2px solid #1a1a1a !important; }
body.jcp-text-mode .jcp-shopify-buy-section { background: #ffffff !important; border: 2px solid #1a1a1a !important; }
body.jcp-text-mode .jcp-project-ideas-section { border-color: #1a1a1a !important; }
body.jcp-text-mode .jcp-stitch-tutorial-callout,
body.jcp-text-mode .jcp-stitch-tutorial-project-help { background: #ffffff !important; border-left-color: #1a1a1a !important; }
body.jcp-text-mode .jcp-how-to-crochet-box {
    background: #ffffff !important;
}
body.jcp-text-mode .jcp-not-ready-box {
    background: #ffffff !important;
}
body.jcp-text-mode .jcp-helpful-tools-box {
    background: #ffffff !important;
}
body.jcp-text-mode .jcp-skill-quiz { background: #ffffff !important; border: 2px solid #1a1a1a !important; }
body.jcp-text-mode .jcp-membership-promo { background: #ffffff !important; border: 2px solid #1a1a1a !important; }

/* Fix 5: Section frames — black borders */
body.jcp-text-mode .jcp-library-entry {
    border-color: #1a1a1a !important;
}
body.jcp-text-mode .jcp-instruction-step {
    border-color: #1a1a1a !important;
    background: #ffffff !important;
}

/* Fix 6: Size measurement table — no background colors, black borders */
body.jcp-text-mode .jcp-size-measurement-table thead th {
    background: #ffffff !important;
    border-color: #1a1a1a !important;
    color: #1a1a1a !important;
}
body.jcp-text-mode .jcp-size-measurement-table tbody tr {
    background: #ffffff !important;
}
body.jcp-text-mode .jcp-size-measurement-table td,
body.jcp-text-mode .jcp-size-measurement-table th {
    border-color: #1a1a1a !important;
}

/* Fix 7: List dots — black.
   --jcp-list-dot is the plugin's settings variable (Settings → Colors → List dots, default #ff8d69).
   Overriding it propagates to the theme wherever it uses var(--jcp-list-dot).
   ::marker covers native browser markers; ::before covers theme-generated badge bullets.
   border-radius:50% keeps circular shape; for ol li, text is white over the black badge. */
body.jcp-text-mode { --jcp-list-dot: #1a1a1a; }

body.jcp-text-mode .jcp-blog-header ul li::marker,
body.jcp-text-mode .jcp-pattern ul li::marker,
body.jcp-text-mode .jcp-blog-header ol li::marker,
body.jcp-text-mode .jcp-pattern ol li::marker { color: #1a1a1a !important; }

/* ul li: suppress theme bullet entirely, render an explicit black circle dot */
body.jcp-text-mode .jcp-blog-header ul li,
body.jcp-text-mode .jcp-pattern ul li { list-style: none !important; }
body.jcp-text-mode .jcp-blog-header ul li::before,
body.jcp-text-mode .jcp-pattern ul li::before {
    content: '' !important;
    display: inline-block !important;
    width: 0.45em !important;
    height: 0.45em !important;
    border-radius: 50% !important;
    background-color: #1a1a1a !important;
    margin-right: 0.55em !important;
    vertical-align: 0.05em !important;
}

body.jcp-text-mode .jcp-blog-header ol li::before,
body.jcp-text-mode .jcp-pattern ol li::before { background: #1a1a1a !important; color: #ffffff !important; border-color: #1a1a1a !important; border-radius: 50% !important; }

/* Fix 7b: Box borders — black; numbered list badges — black; step number badge — black */
body.jcp-text-mode .jcp-more-in-category { border-color: #1a1a1a !important; }
body.jcp-text-mode .jcp-steps-summary { border-color: #1a1a1a !important; }
body.jcp-text-mode .jcp-pattern .jcp-instruction-step-number { background: #1a1a1a !important; color: #ffffff !important; }

/* Fix 8: Buttons — black fill (library-entry-btn uses high-specificity selector to beat theme rules) */
body.jcp-text-mode .jcp-buy-btn,
body.jcp-text-mode .jcp-skill-quiz-button,
body.jcp-text-mode .jcp-print-button,
body.jcp-text-mode .jcp-bundle-callout .jcp-bundle-button {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #1a1a1a !important;
}
body.jcp-text-mode .jcp-pattern .jcp-section-content .jcp-library-entry-btn {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #1a1a1a !important;
}

/* Fix 9: Controls pill — black/white */
body.jcp-text-mode .jcp-controls-pill-inner {
    background: #1a1a1a !important;
    box-shadow: none !important;
}
body.jcp-text-mode .jcp-controls-pill-inner .jcp-size-select {
    background: #1a1a1a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #555 !important;
}
body.jcp-text-mode .jcp-controls-pill-inner .jcp-size-select option {
    background: #1a1a1a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
body.jcp-text-mode .jcp-controls-pill-inner .jcp-crochet-mode-btn {
    color: #ffffff !important;
    background: transparent !important;
}
/* Active crochet mode: invert to white so it stands out against the black pill */
body.jcp-text-mode .jcp-controls-pill-inner .jcp-crochet-mode-btn[aria-pressed="true"] {
    background: #ffffff !important;
    color: #1a1a1a !important;
}
body.jcp-text-mode .jcp-controls-pill-inner .jcp-crochet-mode-btn[aria-pressed="true"] .jcp-crochet-mode-label {
    color: #1a1a1a !important;
}
body.jcp-text-mode .jcp-controls-pill-inner .jcp-crochet-mode-label {
    color: #ffffff !important;
}

/* ── Extra Content Blocks (frontend) ── */
.jcp-extra-block {
    margin: 1.5em 0;
}
/* Size, weight and typeface all come from the theme's own H2-H6 settings, so an extra block heading
   is indistinguishable from any other heading of that level on the site and follows the Customizer
   when it changes. Only the color and the spacing below it belong to the plugin. */
.jcp-extra-block-heading {
    color: var(--jcp-text, #555557);
    margin: 0 0 0.5em;
}
/* The photo follows the text now, so the gap belongs above it rather than below. */
.jcp-extra-block-photo {
    margin: 1em 0 0;
}
.jcp-extra-block-photo img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* font-size was pinned to 1rem, which ignored the pattern's own body size and made extra blocks
   visibly smaller than the section text they sit between. Inherit instead, like every other block
   of prose in the pattern, and pick up Verdana in the stack so the fallback matches too. */
.jcp-extra-block-content {
    font-size: inherit;
    color: var(--jcp-text, #555557);
    line-height: 1.7;
}
/* An h2 inside an extra block is the author's own sub-heading, not a section heading — keep it in
   the pattern's voice rather than letting the theme style it like a post heading. */
.jcp-extra-block-content h2 {
    font-size: 1.25em;
    font-weight: bold;
    color: var(--jcp-text, #555557);
    margin: 1em 0 0.5em;
}


/* ============================================================
   Instruction versions — one pattern written two ways
   (a granny square worked multicolor and the same square solid)
   ============================================================ */

/* The explainer sits above the switch in both display modes: the switch is for doing, this is
   for understanding, and a switch alone hides the comparison the post is meant to show. */
.jcp-version-intro {
    color: var(--jcp-text, #555557);
    line-height: 1.7;
    margin: 0 0 1.25rem;
}
.jcp-version-intro p { margin: 0 0 0.75rem; }
.jcp-version-intro p:last-child { margin-bottom: 0; }

/* Grid, not flex-wrap: the cards are a comparison, so they have to stay side by side. Flex basis
   made them stack on a phone, which turns "these two are different" into "scroll and remember". */
.jcp-version-chooser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
    margin: 0 0 1.75rem;
}

/* Techniques only one version needs, shown beside the pattern-wide ones while that version is on
   screen. The explicit !important guards against a display rule on the fact-grid value or the
   library card grid winning over the hidden attribute and leaking the other version's techniques. */
.jcp-version-extra[hidden] { display: none !important; }

/* Picture cards, not a dropdown — the choice explains itself. */
.jcp-version-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 2px solid var(--jcp-border, #dededf);
    border-radius: 0;
    background: var(--jcp-bg, #ffffff);
    font-size: 1rem;
    color: var(--jcp-text, #555557);
    text-align: center;
    cursor: pointer;
}
.jcp-version-card:hover {
    border-color: var(--jcp-accent-light, #bad7d2);
}
.jcp-version-card:focus-visible {
    outline: 2px solid var(--jcp-button-bg, #4f857b);
    outline-offset: 2px;
}
.jcp-version-card.is-active {
    border-color: var(--jcp-button-bg, #4f857b);
    background: var(--jcp-green-bg, #f6fafa);
}
.jcp-version-card-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.jcp-version-card-label {
    font-weight: bold;
    line-height: 1.4;
}
.jcp-version-card.is-active .jcp-version-card-label {
    color: var(--jcp-button-bg, #4f857b);
}

/* Every version keeps a visible heading — on paper two near-identical instruction sections with
   nothing to tell them apart is worse than no versions at all. */
.jcp-version-heading {
    margin: 0 0 1rem;
}
.jcp-version-steps {
    margin-top: 1.5rem;
}
/* Phone: two columns, always. Smaller card so both fit without shrinking the photo to nothing. */
@media (max-width: 600px) {
    .jcp-version-chooser {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }
    .jcp-version-card {
        padding: 0.35rem;
        gap: 0.35rem;
    }
    .jcp-version-card-label {
        font-size: 0.875rem;
    }
}

.jcp-instruction-versions[data-jcp-version-display="stacked"] .jcp-instruction-version + .jcp-instruction-version {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--jcp-border, #dededf);
}

@media print {
    /* The reader chose on screen; paper carries whatever the print dialog asked for. */
    .jcp-version-chooser { display: none !important; }
    .jcp-print-single-version .jcp-version-heading,
    .jcp-print-single-version .jcp-version-intro { display: none !important; }
    .jcp-instruction-version:not([hidden]) + .jcp-instruction-version:not([hidden]) {
        break-before: page;
        page-break-before: always;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
    .jcp-version-heading { break-after: avoid; page-break-after: avoid; }
}

body.jcp-text-mode .jcp-version-card {
    background: #ffffff !important;
    border-color: #000000 !important;
    color: #000000 !important;
}
body.jcp-text-mode .jcp-version-card.is-active {
    background: #000000 !important;
    color: #ffffff !important;
}
body.jcp-text-mode .jcp-version-card.is-active .jcp-version-card-label {
    color: #ffffff !important;
}

/* A photo inside a step's own text (v0.3.748). The step's photo slot is the main image; these are
   the extras from a run of photos in the source post, and without a cap they published at full
   size. */
.jcp-instruction-step-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0.75em 0;
}

/* ── Free-form tables in the rich text fields (v0.3.827) ──────────────────────
 *
 * A table she builds in Instructions, Notes or any other rich text field. It wears the SAME three
 * colour variables as the size measurement table, so the two match and both follow whatever she
 * sets in Settings -> Colors — one source of truth, not a second copy of the palette.
 *
 * This is not the measurement table: that one is a structured field the size filter reads, and it
 * keeps its own class and its own rules. Only the look is shared.
 *
 * The wrapper is what stops a wide table pushing the page past the screen on a phone, which is the
 * failure the measurement table already solved with .jcp-size-measurement-table-wrap.
 */
.jcp-pattern .jcp-rich-table-wrap {
    overflow-x: auto;
    margin: 1rem 0 1.25rem;
    -webkit-overflow-scrolling: touch;
}

.jcp-pattern table.jcp-rich-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
    border: 0 !important;
    font-size: inherit;
}

.jcp-pattern table.jcp-rich-table th,
.jcp-pattern table.jcp-rich-table td {
    border: 0 !important;
    padding: 0.78rem 0.9rem;
    text-align: left;
    vertical-align: top;
}

.jcp-pattern table.jcp-rich-table thead th {
    background: var(--jcp-table-header-bg);
    font-weight: 700;
}

.jcp-pattern table.jcp-rich-table tbody tr:nth-child(odd) td,
.jcp-pattern table.jcp-rich-table tbody tr:nth-child(odd) th {
    background: var(--jcp-table-odd-bg);
}

.jcp-pattern table.jcp-rich-table tbody tr:nth-child(even) td,
.jcp-pattern table.jcp-rich-table tbody tr:nth-child(even) th {
    background: var(--jcp-table-even-bg);
}

/* An imported table carries no class of ours — it arrives as plain <table> inside the field, or
 * inside the <figure class="wp-block-table"> WordPress wraps it in. Style those the same way, or a
 * table she imported and one she made would look like two different things on the same page. */
.jcp-pattern .jcp-section-content table:not(.jcp-size-measurement-table):not(.jcp-rich-table),
.jcp-pattern .jcp-extra-block table:not(.jcp-size-measurement-table):not(.jcp-rich-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.35rem;
    border: 0 !important;
}

.jcp-pattern .jcp-section-content table:not(.jcp-size-measurement-table) th,
.jcp-pattern .jcp-section-content table:not(.jcp-size-measurement-table) td,
.jcp-pattern .jcp-extra-block table:not(.jcp-size-measurement-table) th,
.jcp-pattern .jcp-extra-block table:not(.jcp-size-measurement-table) td {
    border: 0 !important;
    padding: 0.78rem 0.9rem;
    text-align: left;
    vertical-align: top;
}

.jcp-pattern .jcp-section-content table:not(.jcp-size-measurement-table) thead th,
.jcp-pattern .jcp-extra-block table:not(.jcp-size-measurement-table) thead th {
    background: var(--jcp-table-header-bg);
    font-weight: 700;
}

.jcp-pattern .jcp-section-content table:not(.jcp-size-measurement-table) tbody tr:nth-child(odd) td,
.jcp-pattern .jcp-extra-block table:not(.jcp-size-measurement-table) tbody tr:nth-child(odd) td {
    background: var(--jcp-table-odd-bg);
}

.jcp-pattern .jcp-section-content table:not(.jcp-size-measurement-table) tbody tr:nth-child(even) td,
.jcp-pattern .jcp-extra-block table:not(.jcp-size-measurement-table) tbody tr:nth-child(even) td {
    background: var(--jcp-table-even-bg);
}

/* WordPress's own wrapper around a pasted or imported table. */
.jcp-pattern figure.wp-block-table {
    margin: 1rem 0 1.25rem;
    overflow-x: auto;
}

/* =================================================================================================
   SAVE THIS (v0.3.829)

   A sign-up FORM, not a button — first name, email and a consent tick, because saving means joining
   the list. It sits straight after the Pattern overview, which is the point of building our own: the
   reader is still deciding there, and Hubbub's lands wherever the first image happens to be.

   Sizes are in `em`, never `rem`. `rem` is 16px against her 20px body, which is what made the
   subscriber gate render smaller than the pattern around it (v0.3.721). And no rounded corners
   anywhere, the same brand rule as every other box here.
   ============================================================================================== */
.jcp-save-this {
    margin: 2rem 0;
}
/* THE SUBSCRIBER GATE'S BOX, deliberately — her call: "i like the style of that better. Could you
   make the save this more that style." Same peach ground, same peach border, same lift, same
   30/40 padding and the same 34rem cap, so the two sign-up boxes on this site read as one thing
   rather than two designs. They share the CSS VARIABLES as well as the values, which is what keeps
   them together when Settings -> Colors changes one. */
.jcp-save-this-box {
    background: var(--jcp-coral-bg, #fff4ef);
    border: 1px solid var(--jcp-peach, #fec9b0);
    box-shadow: 0 6px 28px rgba(85, 85, 87, 0.18);
    padding: 30px 40px;
    margin: 0 auto;
    max-width: 34rem;
    text-align: center;
    /* The spotlight fades in and out rather than snapping. 0.7s is Hubbub's own timing. */
    transition: box-shadow 0.7s;
}

/* THE SPOTLIGHT — "takeover" is what it looks like, and it is one box-shadow.
   A spread wider than the screen in 30% black darkens everything except this box, which is why
   Hubbub uses a SHADOW rather than an overlay element: a shadow cannot be clicked, so the page
   underneath stays readable and usable while it is dimmed, and nothing traps focus. The lift is
   repeated here so the box keeps it while lit.
   `position: relative` and the z-index are what put the box above the dimming it casts. */
.jcp-save-this.is-spotlit .jcp-save-this-box {
    box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, 0.3),
                0 6px 28px rgba(85, 85, 87, 0.18);
    position: relative;
    z-index: 99999;
}
/* A full-screen brightness change is exactly what this setting is about, so honour the request to
   stop moving: the dimming still happens, it simply arrives without the fade. */
@media (prefers-reduced-motion: reduce) {
    .jcp-save-this-box,
    .jcp-save-this { transition: none; }
}

/* ONCE SAVED, IT GOES. Her report: "after signing up its stuck on one moment and doesnt close".
   The confirmation is shown, the dimming released at once, and a few seconds later the whole box
   fades away — there is nothing left to ask for, and a spent form sitting in the middle of a
   pattern is just something to scroll past. `max-height` rather than `height` so the collapse
   works without anyone having to know how tall the box was. */
/* `overflow: hidden` BELONGS ONLY ON THE WAY OUT, and putting it here in the base rule is what
   broke the spotlight in v0.3.844: the dimming is a box-shadow cast by .jcp-save-this-box INSIDE
   this element, so clipping this element clipped the shadow to the width of the content column —
   a grey band beside the box instead of the whole screen going dark. Her report: "on desktop it
   doesn't popup / take over the screen".
   The clip is only needed while the box collapses, and by then the spotlight is already released. */
.jcp-save-this {
    transition: opacity 0.6s, max-height 0.6s, margin 0.6s;
    max-height: 100rem;
}
.jcp-save-this.is-done {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
.jcp-save-this-heading {
    font-size: 1.3em;               /* ≈ her H2 at the theme's 20px body */
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.75rem;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-text {
    line-height: 1.7;
    margin: 0 0 1.25rem;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: stretch;
    max-width: 26rem;
    margin: 0 auto;
}
/* Stacked — name, then email, then the tick, then the button. Two fields side by side leave each
   one too narrow to read a typed address back in, which is the same call made for the gate. */
.jcp-save-this-input {
    flex: 1 1 100%;
    min-width: 0;                 /* a flex item will not shrink below its content without this */
    padding: 0.75rem 1rem;
    font-family: inherit;         /* form controls inherit neither of these on their own */
    font-size: inherit;
    border: 1px solid var(--jcp-peach, #fec9b0);
    background: #ffffff;
    color: var(--jcp-text, #555557);
    border-radius: 0;
}
/* Centred as a unit, not left-aligned: everything else in this box is centred, and the gate has no
   consent row at all, so a left edge here was the only thing breaking the line. The tick and its
   words still sit together — `text-align: left` inside keeps a long label from centring raggedly. */
.jcp-save-this-consent-row {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.5rem;
    text-align: left;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-consent-box {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    margin: 0.2em 0 0;
}
/* Its own row, sized to its words rather than stretched across the box — you type into the inputs,
   you aim at the button. */
.jcp-save-this-form .jcp-save-this-button {
    flex: 0 0 auto;
    margin: 0.25rem auto 0;
    font-family: inherit;
    font-weight: bold !important;
    font-size: 0.875rem !important;
    background: var(--jcp-btn-bg, #ffb197) !important;
    color: var(--jcp-btn-text, #555557) !important;
    border: none;
    border-radius: 0;
    padding: 0.85rem 2rem;
    cursor: pointer;
    text-transform: none;
}
.jcp-save-this-form .jcp-save-this-button:hover,
.jcp-save-this-form .jcp-save-this-button:focus {
    opacity: 0.8;
    color: var(--jcp-btn-text-hover, #555557) !important;
}
.jcp-save-this-form .jcp-save-this-button[disabled] {
    opacity: 0.6;
    cursor: default;
}
/* The honeypot. Off-screen rather than display:none — some bots skip anything display:none, and a
   real person never reaches it because of the negative tabindex on the input. */
.jcp-save-this-hp {
    position: absolute !important;
    left: -99999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.jcp-save-this-error {
    color: #b32d2e;
    font-size: 0.9em;
    margin: 0.85rem 0 0;
}
.jcp-save-this-done {
    font-weight: bold;
    margin: 0.85rem 0 0;
    color: var(--jcp-text, #555557);
    /* The preview adds a second line saying what it did and did not do, and the message is set with
       textContent, so the break only survives if the white-space rule keeps it. */
    white-space: pre-line;
}
.jcp-save-this-privacy {
    font-size: 0.7em;
    line-height: 1.5;
    margin: 1rem auto 0;
    max-width: 30rem;
    color: var(--jcp-text, #555557);
}
.jcp-save-this-privacy a { color: var(--jcp-link, #4f857b); }
/* The typo rescue. NOT styled like the error above it — it is an offer. Same treatment as the
   gate's, down to the variables: a pale yellow note on its own row inside the form. */
.jcp-save-this-suggest {
    flex: 1 1 100%;
    font-size: 1em;
    margin: 0;
    color: var(--jcp-text, #555557);
    background: var(--jcp-yellow-pale, #fcf3cf);
    border: 1px solid var(--jcp-yellow-soft, #f8e38d);
    padding: 0.55rem 0.8rem;
    text-align: center;
}
/* !important on the size for the same reason as the submit button: GeneratePress styles `button`
   directly, so a <button> loses an inherited size while every <a> keeps it. */
.jcp-save-this-suggest-fix {
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: 700;
    line-height: inherit;
    color: var(--jcp-text, #555557);
    background: none;
    border: none;
    border-bottom: 2px solid var(--jcp-coral, #ff8d69);
    padding: 0;
    cursor: pointer;
}
.jcp-save-this-suggest-fix:hover,
.jcp-save-this-suggest-fix:focus { border-bottom-width: 3px; }
/* The gate has this line and Save This did not — "Free, and you can unsubscribe any time." It is
   the reassurance that sits between the button and the legal footnote. */
.jcp-save-this-fine-print {
    font-size: 0.9em;
    color: var(--jcp-muted, #9b9b9d);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}
@media (max-width: 782px) {
    .jcp-save-this-box { padding: 1.5rem 1rem; }
    /* MEASURED AT A REAL 390px, INSIDE AN IFRAME, not by resizing a headless window — which reports
       504px and crops, and would have said this was fine (v0.3.787). The tick box came out 15×15,
       and it is REQUIRED to submit: the same shape of problem as the table she could not delete on
       her phone. The <label> wraps it, so the words are a tap target too; this makes the box itself
       one. The button already measures 44px, which is the minimum. */
    .jcp-save-this-consent-box { width: 1.4em; height: 1.4em; margin-top: 0.1em; }
    .jcp-save-this-consent-row { padding: 0.35rem 0; gap: 0.6rem; }
}
/* Never printed — a sign-up form on paper is nothing but wasted ink. */
@media print {
    .jcp-save-this { display: none !important; }
}