/* Claus' Keepsakes brand layer for the Our Family funnel (SELL-1448, 2026-10-13). Loaded LAST on every page.
   Palette and type from brand/BRAND.md: red #A22D2B, deep green #193025, cream #E9DEC6, gold #B38952,
   near black #1A1814, white; light cream #F6F1E6 for soft fills. Headlines Fraunces 600/700, everything else
   Figtree 400/500/600. Jolly's tokens.css and v3-base.css are provisional (the designer's own note), so this
   sheet puts the brand over them without editing their layout rules.
   Colour roles (parent ticket SELL-1448): CTAs, Complete Purchase, upsell accept and "Personalize this ornament"
   red with white text; promo strip and timer deep green with cream text; selected package, savings labels and
   the insurance switch ON deep green; stars gold (the star mark itself is _includes/stars.html). */

/* Fonts: variable woff2 files from Google Fonts (latin), one per family. */
@font-face{font-family:"Fraunces";src:url(../fonts/jolly/fraunces-latin.woff2) format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/jolly/figtree-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --font-heading:"Fraunces",Georgia,serif;
  --font-body:"Figtree",system-ui,sans-serif;
  --color-brand-primary:#A22D2B;
  --color-brand-primary-hover:#86231F;
  --color-brand-secondary:#193025;
  --color-brand-tertiary:#A22D2B;            /* the design's #DA3122 is not in the palette */
  --color-background-brand-tint:#F6F1E6;     /* light cream, from #E9DEC6 */
  --color-text-primary:#1A1814;
  --color-border-default:#E9DEC6;
  --color-ui-yellow:#B38952;                 /* rating stars */
  --v3-yellow:#A22D2B;                       /* the v3 CTA pill, now brand red */
  --v3-green:#193025;                        /* promo bar, promo line in the summary */
  --v3-hl:#F6F1E6;                           /* eyebrow highlight, soft fill */
  --ck-yellow:#A22D2B;                       /* Complete Purchase, accept, exit-pop CTA */
  --ck-gold:#193025;                         /* selected package ring, radios */
}

/* Headlines: Fraunces 600 (hero 700), never faux-bold. */
h1,h2,h3,.h2{font-family:var(--font-heading);font-weight:600}
h1{font-weight:700}

/* Landing and presell CTAs: red pill, white text, the pulse stays. */
.v3-btn{color:#fff;border:0}
.v3-btn:hover{background:var(--color-brand-primary-hover)}
.v3-bars i.on,.v3-low{color:#A22D2B;background:#A22D2B}
.v3-low{background:none}
.v3-dot{background:#193025;box-shadow:0 0 0 2px #E9DEC6}

/* Promo bar (landing, checkout): deep green with cream text; the code pill inverts. */
.v3-promo{color:#E9DEC6}
.v3-promo em{background:#E9DEC6;color:#193025}

/* Landing review bars and avatars. */
.v3-bigstars i{background:#B38952}
.v3-bigstars i.h{background:linear-gradient(90deg,#B38952 50%,#E9DEC6 50%)}
.v3-bigstars i.e{background:#E9DEC6}
.lp-rev-av{background:#F6F1E6;color:#193025}

/* Checkout: promo timer bar. */
.ck .ck-timer-l{background:#0F1F17;color:#E9DEC6}
.ck .ck-timer-r{background:#193025;color:#E9DEC6}

/* Checkout: tiers. Selected card deep green ring on light cream; the SAVE badge deep green with cream text. */
.ck .rc.next-selected{border-color:#193025}
.ck .rc.next-selected .rc-radio{border-color:#193025}
.ck .rc.next-selected .rc-radio::after{background:#193025}
.ck .rc-unit em{background:#193025;color:#E9DEC6}
.ck .rc-ship--free,.ck .rc-flag{color:#193025}

/* Personalize buttons: brand red, white text. Checkout cards, upsell rows, personaliser pop-up, photo guide. */
.ck .oc-btn,.ck .u1 .oc-btn,.ck .pm .oc-btn,.ck .pg .oc-btn{background:#A22D2B;color:#fff}
.ck .oc-btn:hover,.ck .u1 .oc-btn:hover,.ck .pm .oc-btn:hover,.ck .pg .oc-btn:hover{background:#86231F}
.ck .oc-btn--edit,.ck .u1 .oc-btn--edit{background:#fff;color:#A22D2B;box-shadow:inset 0 0 0 1.5px #A22D2B}
.ck .oc-btn--edit:hover,.ck .u1 .oc-btn--edit:hover{background:#F6F1E6}
/* #1, #2 chips and the upsell stepper: brand near black instead of #111. */
.ck .oc-num,.ck .u1-chip{background:#1A1814}
.ck .u1-step button:hover{background:#1A1814}
.ck .c1-step h2{color:#1A1814}

/* Insurance switch ON: brand deep green. */
.ck .ins.is-on .ins-sw{background:#193025}

/* Complete Purchase, upsell accept, exit-pop CTA: red with white text. */
.ck .an-checkout .submit-button,.ck .u1-cta,.ck .xi-cta,.ck .pm-save{background:#A22D2B;border-color:#A22D2B;color:#fff}
.ck .an-checkout .submit-button:hover,.ck .u1-cta:hover,.ck .xi-cta:hover{background:#86231F;border-color:#86231F}
.ck .an-checkout .submit-button__main-text{color:#fff}

/* Policy footer on the checkout, upsells and receipt: deep green with cream text (the AdsBranded checkout rule).
   Same specificity as the yellow rules in checkout-v3-glue.css and post-purchase-v3.css; this sheet loads last. */
.ck .an-checkout .c1-foot,.ck .c1-foot{background:#193025;color:#E9DEC6}
.ck .an-checkout .c1-foot a,.ck .c1-foot a,.ck .an-checkout .c1-foot p,.ck .c1-foot p{color:#E9DEC6}

/* "Promo applied" line in the summary and the timer digits: cream on the deep green. */
.ck .c1-sum .sl-promo,.cs-promo{color:#E9DEC6}
.ck .ck-timer-r b{color:#fff}

/* Presell QA against BRAND.md (SELL-1553, Nikola's review and Tereza's decisions of 2026-10-14). Scoped to the
   advertorial classes so the checkout and upsells keep their own rules.
   Fraunces headlines: weight 600, line height 105%, no negative tracking (the design had 400 / 120% / -0.2px).
   Figtree: buttons, subheads, step tags, checklist, emphasis at 600 (the design's 700); the "Advertorial" label
   600 and not all caps (was 800 caps). Byline and disclaimer near black, not the design's grey #5A4F47.
   Hero thumbnails ringed brand red, not the design's #B70101. Borders and dividers cream #E9DEC6 (the
   --color-border-default value above). */
.h2,.bc1 h2,.b4-row h3{font-weight:600;line-height:1.05;letter-spacing:0}
.cta1 .btn,.nav2 .btn{font-weight:600}
.ps5-row h3,.ps5-intro .b h3,.ps5-intro .band h3,.ht1-step h3,.ht1-step .tag,.bc1 .checks li,.ps5-turn p.blue,.bc1 .proof b{font-weight:600}
.nav2 .mid{font-weight:600;text-transform:none}
.adv-meta,.disc{color:#1A1814}
.ps5-row .thumb{border-color:#A22D2B}

/* Landing QA against BRAND.md (SELL-1554, Nikola's review of 2026-10-14), the presell rules above applied to the
   landing. Scoped to body.lp and the .lp-* classes so the checkout and upsells keep their own rules.
   Fraunces: section H2 and H3 at 600, the 48px hero H1 and closing H2 stay 700; line height 105%, no negative
   tracking (the design had 700 / 115 to 129% / -0.2 to -0.3px). Figtree: buttons, header links and product
   name, checklist, feature and step titles, rating labels, review titles and names, avatar letters, FAQ
   questions, quote author and inline emphasis at 600 (the design's 700 and 900). Body copy line height 150%
   where the design had 135%, 119% or 160% and more. Text near black #1A1814 instead of the design's #000,
   #020202, #040408, #020211, #111827 and #202E3B. Tereza's decisions on the ticket (2026-10-14): the #FAFAFA
   panels (--v3-grey: UGC, guarantee card, steps, closing, the phone hero) become light cream #F6F1E6, so the
   eyebrow pill on the UGC panel is cream #E9DEC6 to stay visible; the light grey borders (nav, phone menu,
   rating bars, review cards, footer) become cream #E9DEC6. Kept as designed at her request: Title Case
   headlines, the all-caps promo bar, the grey footer and separator, the green "Verified" and the black press
   bar. The FAQ cards' black outline is a design element, not one of the grey borders, and stays.
   Nikola's second pass (2026-10-14): the empty part of the rating bars cream #E9DEC6 like the empty stars (was
   #D9D9D9), the 63px "4.9" at Figtree 600, the feature-row paragraphs at 150% line height on the phone too. */
.lp h2,.lp-hero h1,.lp-end h2,.lp-guar-t h2,.lp-row h3{font-weight:600;line-height:1.05;letter-spacing:0}
.lp-hero h1,.lp-end h2{font-weight:700}
.lp .v3-btn,.lp-order,.lp-order b,.lp-menu a b,.lp-links a.on,.lp-logo span,.lp-checks li,.lp-high-it h3,.lp-step h3,.lp-bar b,.lp-rev h3,.lp-rev-who b,.lp-rev-av,.lp-faq .faq__q,.lp-quote b,.lp-hero-sub b,.lp-row p b,.lp-guar-t p b,.lp-end-p b,.lp-score-n{font-weight:600}
.lp-rev-who{font-weight:400}
.lp-hero-sub,.lp-end-p,.lp-high-it p,.lp-quote,.lp-rev-b,.lp-score-t,.lp-row p{line-height:1.5}
.lp,.lp-logo span,.lp-links,.lp-order,.lp-row h3,.lp-high-it h3,.lp-high-it p,.lp-bar b,.lp-bar>span:last-child,.lp-rev-who,.lp-rev-meta,.lp-rev h3,.lp-rev-b,.lp-faq .faq__q,.lp .v3-ship{color:#1A1814}
.lp{--v3-grey:#F6F1E6}
.lp-ugc .lp-eye span{background:#E9DEC6}
.lp-nav,.lp-menu,.lp-menu a,.lp-bar,.lp-rev,.lp-rev-who,.lp-rev-meta,.lp-foot{border-color:#E9DEC6}
.lp .v3-bars i:not(.on){background:#E9DEC6}

/* Upsells (upsell, upsell2, upsell4) back on Jolly's v2 Our Family design (QA 2026-10-15 #7, #8): the "Your order is placed"
   bar and the hero band are brand red with white text (the bar was black on deep green, 1.49:1), the card sits below the
   band instead of overlapping it, the "#1" chip is light pink with red text, the tick and heart icons and the reassurance
   box border are red. Sizes from the design at 1440 / 768 / 375. */
.ck .u1-bar{background:#A22D2B;padding:var(--pad-s) var(--pad-m)}
.ck .u1-bar p{font:700 16px/1.35 var(--font-body);color:#fff}
.ck .u1-hero{background:#A22D2B;color:#fff;padding:48px 32px;border-bottom:0}
.ck .u1-hero h1,.ck .u1-hero-sub,.ck .u1-hero-line{color:#fff}
.ck .u1-hero-sub{font-size:28px;line-height:1.25}
.ck .u1-hero-line{font:500 20px/1.35 var(--font-body)}
.ck .u1-offer{margin-top:0;padding-top:var(--pad-b)}
.ck .u1-title{font-size:40px}
.ck .u1-chip{background:#F8EFEA;color:#A22D2B}
.ck .u1-heart,.ck .u1-ticks svg{color:#A22D2B}
.ck .u1-ship{border-color:#A22D2B}
@media (max-width:1023px){
  .ck .u1-hero-sub{font-size:26px}
  .ck .u1-title{font-size:32px}
}
@media (max-width:640px){
  .ck .u1-bar p{font-size:14px}
  .ck .u1-hero{padding:40px 24px}
  .ck .u1-hero-sub{font-size:24px}
  .ck .u1-hero-line{font-size:18px}
  .ck .u1-title{font-size:28px}
}
/* Upsell 4: "View Photo Guide" stays on one line beside the stepper; the row wraps instead (QA 2026-10-15 #9). */
.ck .u1-qty{flex-wrap:wrap}
.ck .u1-qty .pg-link{white-space:nowrap}

/* Receipt on Jolly's thank-you design (QA 2026-10-15 #17): headline and step numbers brand red, the summary card light
   cream with no border. post-purchase-v3.css had made them #222, #111 and white. The crumbs show on phones as in the
   design. The page fills the screen so a short receipt keeps the footer at the bottom. */
.ck .page-thanks .ty-hero h1{color:#A22D2B}
.ck .page-thanks .ty-next li>span{background:#A22D2B}
.ck .page-thanks .ty-side{background:#F6F1E6;border:0;border-radius:var(--r-m)}
.page-thanks{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.page-thanks>.ty{flex:1 0 auto;width:100%;box-sizing:border-box}

/* AdsBranded POD rules on the presell and landing (Sellmore Atlas design-specs.md, 2026-10-15/16): every CTA yellow
   #ffd431 with a #d5ac10 border and black text, and the 2-row promo strip (js/pod/promo-banner.js, green #acf4a1
   rows drawn by the script itself). The checkout keeps its own rules above. */
.v3-btn,.nav2 .btn,.cta1 .btn{background:#ffd431;color:#000;border:1px solid #d5ac10}
.v3-btn:hover,.nav2 .btn:hover,.cta1 .btn:hover{background:#f5c91c}
.nav2 .btn svg,.cta1 .btn svg{color:#000}
/* The strip is drawn by a deferred script: reserve its rendered height so the page does not jump. */
body:not(.ck) promo-banner{display:block;min-height:103px}
@media (max-width:767px){body:not(.ck) promo-banner{min-height:164px}}
@media (max-width:360px){body:not(.ck) promo-banner{min-height:154px}}

/* AdsBranded POD rules on the checkout (Sellmore Atlas design-specs.md, 2026-10-15/16). They replace the red CTA and
   deep green banners above on this page only: Complete Purchase and the exit-pop CTA yellow #ffd431 with a #d5ac10
   border and black text; the timer bar and the summary's promo row green #acf4a1 with black text (the 2-row strip and
   the timer draw their own colours). Personalize buttons stay brand red. */
.ck .an-checkout .submit-button,.ck .xi-cta{background:#ffd431;border:1px solid #d5ac10;color:#000}
.ck .an-checkout .submit-button:hover,.ck .xi-cta:hover{background:#f5c91c;border-color:#d5ac10}
.ck .an-checkout .submit-button__main-text{color:#000}
.page-checkout{--v3-green:#acf4a1;--pod--color--banner:#acf4a1;--pod--color--banner-foreground:#0a0a0a}
.ck .c1-sum .sl-promo,.ck .cs-promo{background:#acf4a1;color:#000}
/* Heading: "Holiday 2026 Edition" over the name, then the stars, then one sentence. */
.ck-head .ck-eyebrow{margin:0;font:600 16px/1.3 var(--font-body);color:#A22D2B;letter-spacing:.01em}
.ck-head h1{margin-top:6px}
.ck-head .v3-rating{margin-top:8px}
.ck-tag{border-bottom:0;padding-bottom:0}
@media (max-width:767px){.ck-head .ck-eyebrow{font-size:14px}}