/* HomeBase holiday themes (loaded only on themed pages; see src/_data/themes.js + UX_AUDIT.md "Holiday themes").
   Brand is fixed: logo, Plus Jakarta Sans + Fraunces (soft display), the grid, ink text, card/shadow system.
   A theme swaps the accent + highlight pair, washes and fine-line motifs (same geometry as the themed PDFs).
   Contrast (WCAG): every text color below is >= 4.5:1 on its background; gold is decorative only. */
.th-thanksgiving{
  --t-bg:#FBF4EA; --t-head:rgba(251,244,234,.86); --t-line:#EBDCC8;
  --t-acc:#8E3B22;      /* roasted pumpkin: buttons, ticks (white 7.5:1) */
  --t-acc-hover:#6E2C18;
  --t-eyebrow:#8E2433;  /* cranberry (8.1:1 on paper) */
  --t-accent:#A4471F;   /* pumpkin serif accent (5.7:1) */
  --t-gold:#C9973A; --t-gold-soft:#F3E2B8; --t-gold-ink:#4A2A1E;
  --t-wash-1:rgba(201,151,58,.20); --t-wash-2:rgba(164,71,31,.12); --t-wash-3:rgba(142,36,51,.07);
  --t-tint:#F8E6D6; --t-tint-2:#FDF3E6; --t-dark:#3E2219;
}
.th-christmas{
  --t-bg:#F8F6F1; --t-head:rgba(248,246,241,.86); --t-line:#E2E5DC;
  --t-acc:#A3222F;      /* holly (white 7.0:1) */
  --t-acc-hover:#7F1A24;
  --t-eyebrow:#A3222F;
  --t-accent:#1E5B43;   /* pine serif accent */
  --t-gold:#C9A24A; --t-gold-soft:#EEDFB5; --t-gold-ink:#10231E;
  --t-wash-1:rgba(201,162,74,.18); --t-wash-2:rgba(30,91,67,.10); --t-wash-3:rgba(163,34,47,.07);
  --t-tint:#E8EFEA; --t-tint-2:#F6F1EA; --t-dark:#123A2F;
}
.th{background:var(--t-bg)}
.th .site-header{background:var(--t-head);border-bottom-color:var(--t-line)}
.th .nav nav a.nav-cta{background:var(--t-gold-soft);color:var(--t-gold-ink);box-shadow:0 6px 18px -10px rgba(120,80,20,.6)}
.th .nav nav a.nav-cta:hover{background:var(--ink);color:#fff}
.th .eyebrow,.th .eyebrow a{color:var(--t-eyebrow)}
.th .accent,.th em.accent{color:var(--t-accent)}
.th .eyebrow::before{content:none}
/* buttons: brand shape and arrow chip; accent swaps to the theme, highlight (lime) swaps to the theme's gold */
.th .btn{background:var(--t-acc);border-color:var(--t-acc);box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 12px 26px -12px color-mix(in srgb,var(--t-acc) 75%,transparent)}
.th .btn:hover{background:var(--t-acc-hover);border-color:var(--t-acc-hover)}
.th .btn .arr{background:var(--t-gold-soft);color:var(--t-gold-ink)}
.th .btn-outline,.th .btn-ghost{background:#fff;color:var(--ink);border-color:var(--t-line);box-shadow:var(--sh-1)}
.th .btn-outline:hover,.th .btn-ghost:hover{background:#fff;color:var(--ink);border-color:var(--ink)}
.th .btn-buy,.th .card-buy{background:var(--t-acc);border-color:var(--t-acc);color:#fff}
.th .btn-buy .arr{background:var(--t-gold-soft);color:var(--t-gold-ink)}
.th .btn-buy:hover,.th .card-buy:hover{background:var(--t-acc-hover);border-color:var(--t-acc-hover);color:#fff}
.th .badge{background:var(--t-gold-soft);color:var(--t-gold-ink)}
.th .badge-soft{background:#fff}
.th .prose a{color:var(--t-acc)}
.th .prose a:hover{color:var(--t-acc-hover)}
.th :focus-visible{outline-color:var(--t-acc)}

/* hero washes + art (art = /img/themes/<theme>-hero.svg, same motifs as the themed product images) */
.th .article-hero,.th .page-hero,.th .pdp-top,.th .page-hero.theme-holiday,.th .pdp-top.theme-holiday{background:
  radial-gradient(55vw 34rem at 100% 0%,var(--t-wash-1),transparent 70%),
  radial-gradient(50vw 30rem at 0% 0%,var(--t-wash-2),transparent 70%),
  radial-gradient(45vw 26rem at 50% 100%,var(--t-wash-3),transparent 72%),var(--t-bg);border-bottom-color:var(--t-line)}
.th .article-hero,.th .page-hero{position:relative;isolation:isolate}
.th .article-hero::after,.th .page-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  width:clamp(22rem,38vw,36rem);aspect-ratio:1;top:-5.5rem;right:max(-7rem,calc((100vw - 76rem) / 2 - 9rem));
  background:var(--th-art) center/contain no-repeat}
.th-thanksgiving{--th-art:url(/img/themes/thanksgiving-hero.svg)}
.th-christmas{--th-art:url(/img/themes/christmas-hero.svg)}
.th .pdp-top{position:relative;isolation:isolate;overflow-x:clip}
.th .pdp-top::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:19rem;aspect-ratio:1;top:-8rem;right:-7rem;background:var(--th-art) center/contain no-repeat;opacity:.45}
.th .article-hero .hero-product,.th .article-hero .hero-pin img{box-shadow:0 2px 4px rgba(16,35,30,.05),0 40px 70px -28px rgba(62,34,25,.45)}
.th .article-hero .hero-product{border-color:var(--t-line)}
.th-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .2rem;padding:.32rem .8rem .32rem .45rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.78);border:1px solid var(--t-line);box-shadow:var(--sh-1);font-size:.8rem;font-weight:700;letter-spacing:.02em;color:var(--t-eyebrow)}
.th-kicker img{width:1.35rem;height:1.35rem;border-radius:50%;background:var(--t-gold-soft);padding:.12rem}
.th .breadcrumbs+.th-kicker,.th nav+.th-kicker{margin-top:.6rem}
@media (max-width:820px){
  .th .article-hero::after,.th .page-hero::after{width:17rem;top:-4.5rem;right:-6.5rem;opacity:.7}
  .th .pdp-top::after{width:15rem;top:-5rem;right:-6rem;opacity:.35}
}

/* article body: themed callouts, tables, checklists, steps */
.th .prose li::marker{color:var(--t-acc);font-weight:700}
/* uifix_20261027: the short gradient accent line above article H2s was removed sitewide (owner: it read as a glitch). */
.th .prose blockquote{position:relative;background:linear-gradient(135deg,var(--t-tint-2),#fff 80%);border:1px solid var(--t-line);border-left:4px solid var(--t-gold);padding:1.15rem 1.4rem 1.15rem 3.6rem;box-shadow:var(--sh-1)}
.th .prose blockquote::before{content:"";position:absolute;left:1.1rem;top:1.15rem;width:1.7rem;height:1.7rem;background:var(--th-mark) center/contain no-repeat}
.th-thanksgiving{--th-mark:url(/img/themes/thanksgiving-mark.svg)}
.th-christmas{--th-mark:url(/img/themes/christmas-mark.svg)}
.th .prose table{border-color:var(--t-line);box-shadow:var(--sh-1);width:max-content;max-width:100%}
.th .prose th{background:var(--t-tint);color:var(--ink)}
.th .prose th,.th .prose td{border-bottom-color:var(--t-line)}
.th .prose tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--t-tint-2) 70%,#fff)}
.th .prose ol:not(#_){list-style:none;padding-left:0}
.th .prose ol:not(#_)>li{position:relative;padding:.85rem 1rem .85rem 3.4rem;margin:.6rem 0;background:#fff;border:1px solid var(--t-line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.th .prose ol:not(#_)>li::before{content:counter(list-item);position:absolute;left:.9rem;top:.8rem;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;
  background:var(--t-acc);color:#fff;font-weight:800;font-size:.85rem;line-height:1}
/* boldred_20261104: item names in themed numbered cards read bold red; links keep underline */
.th .prose ol:not(#_)>li strong,.th .prose ol:not(#_)>li b{font-weight:700;color:var(--t-acc)}
.th .prose ol:not(#_)>li strong a,.th .prose ol:not(#_)>li a:has(strong){color:var(--t-acc);font-weight:700}
.th .prose ul:has(> li.task){background:#fff;border:1px solid var(--t-line);border-radius:var(--r-md);padding:1rem 1.2rem 1rem 2.6rem;box-shadow:var(--sh-1)}
.th .box{border-color:var(--t-acc);border-radius:6px;background:#fff}
.th .toc{border-color:var(--t-line);background:linear-gradient(180deg,#fff,var(--t-tint-2));position:relative;overflow:hidden}
.th .toc::before{content:"";position:absolute;right:-1.4rem;top:-1.4rem;width:5.5rem;height:5.5rem;background:var(--th-mark) center/contain no-repeat;opacity:.35}
.th .toc a{color:var(--muted)}
.th .toc a:hover{color:var(--ink)}
.th .toc a.btn,.th .toc a.btn:hover{color:#fff}
.th .faq details{border-color:var(--t-line)}
.th .faq summary::after{color:var(--t-acc)}
.th .optin,.th .lead-magnet{background:linear-gradient(135deg,var(--t-tint-2) 0%,#fff 55%,var(--t-tint) 100%);border-color:var(--t-line)}
.th .optin::before,.th .lead-magnet::before{background:var(--t-gold);opacity:.22}
.th .tint-holiday,.th .thumb.tint-holiday,.th .g-main.tint-holiday{background:var(--t-tint)}
.th .idea-card small{color:var(--t-eyebrow)}
.th .idea-card:hover{border-color:var(--t-gold)}
.th .card{border-color:var(--t-line)}

/* themed CTA block (partials/theme.njk) */
.th-cta{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:1.6rem 2rem;align-items:center;
  margin:3rem 0;padding:clamp(1.6rem,4vw,2.6rem);border-radius:var(--r-lg);border:1px solid var(--t-line);
  background:radial-gradient(28rem 18rem at 100% 0%,var(--t-wash-1),transparent 70%),radial-gradient(24rem 16rem at 0% 100%,var(--t-wash-2),transparent 70%),linear-gradient(160deg,#fff,var(--t-tint-2));
  box-shadow:0 2px 4px rgba(16,35,30,.04),0 30px 60px -32px rgba(62,34,25,.35)}
.th-cta-art{position:absolute;z-index:-1;right:-3.5rem;top:-4.5rem;width:15rem;height:auto;opacity:.9}
.th-cta h2{margin:.45rem 0 .5rem;font-size:clamp(1.45rem,2.6vw,1.9rem)}
.th-cta h2::before{content:none!important}
.th-cta p{margin:0 0 .9rem;color:var(--muted)}
.th-cta .eyebrow{display:inline-flex;align-items:center;gap:.45rem}
.th-cta .eyebrow::before{content:"";display:inline-block!important;width:1.15rem;height:1.15rem;background:var(--th-mark) center/contain no-repeat}
.th-cta-list{list-style:none;padding:0;margin:0 0 .4rem;display:grid;gap:.35rem}
.th-cta-list li{position:relative;padding-left:1.7rem;font-weight:600;font-size:.96rem;margin:0}
.th-cta-list li::before{content:"";position:absolute;left:0;top:.28em;width:1.05em;height:1.05em;border-radius:5px;border:2px solid var(--t-acc);
  background:linear-gradient(var(--t-acc),var(--t-acc)) center/0 0 no-repeat}
.th-cta-list li::after{content:"";position:absolute;left:.36em;top:.43em;width:.32em;height:.58em;border:solid var(--t-acc);border-width:0 2px 2px 0;transform:rotate(45deg)}
.th-cta .btn-row{margin-top:1.1rem;align-items:center}
.th-cta .btn-row .btn{padding:.8rem 1.2rem;font-size:.95rem}
.th-cta .btn-buy{width:auto}
.th-cta-product{position:relative;display:block;justify-self:end;align-self:start;margin-top:2.6rem;max-width:15rem;border-radius:var(--r-md);overflow:visible}
.th-cta-product img{border-radius:var(--r-md);border:1px solid var(--t-line);box-shadow:0 2px 4px rgba(16,35,30,.05),0 30px 50px -24px rgba(62,34,25,.45);transform:rotate(2deg);background:#fff}
.th-price{position:absolute;left:-.8rem;bottom:-.8rem;background:var(--t-acc);color:#fff;font-weight:800;border-radius:var(--r-pill);padding:.45rem .9rem;box-shadow:var(--sh-2);font-size:1rem}
.th-cta-also{grid-column:1/-1;margin:.4rem 0 0!important}
.th-cta-also a{display:flex;gap:.9rem;align-items:center;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.85);border:1px dashed var(--t-gold);border-radius:var(--r-md);padding:.7rem .9rem;font-size:.92rem}
.th-cta-also a:hover{border-style:solid;color:var(--ink)}
.th-cta-also img{width:4.5rem;height:auto;border-radius:8px;flex:none}
.th-cta-also b{color:var(--t-acc);white-space:nowrap}
.th-cta-also s{color:var(--muted);font-weight:500}
@media (max-width:820px){
  .th-cta{grid-template-columns:1fr}
  .th-cta-product{justify-self:start;max-width:13rem;order:-1;margin:.2rem 0 .6rem .6rem}
  .th-cta-art{width:11rem;right:-3rem;top:-3.5rem;opacity:.6}
  .th-cta .btn-row .btn{width:100%;justify-content:center}
}
@media print{.th .article-hero::after,.th .page-hero::after,.th-cta-art{display:none}}
/* full-width page heroes: smaller art pushed to the edge so it never runs under the headline */
.th .page-hero::after{width:clamp(16rem,24vw,24rem);top:-5rem;right:max(-8rem,calc((100vw - 76rem) / 2 - 12rem));opacity:.85}
@media (max-width:820px){.th .page-hero::after{width:13rem;top:-4rem;right:-6rem;opacity:.5}}
.th .gg-how .step-n,.th .num{background:var(--t-gold-soft);color:var(--t-gold-ink)}

/* holiday sets link under the themed CTA (offers, Oct 22 2026) */
.th-cta-offer{margin:.75rem 0 0;font-size:.92rem;font-weight:600;line-height:1.45}.th-cta-offer a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.th .btn-lime,.th .btn-lime:hover{color:#fff}
/* leaffix 1113 (t1932u): article pages (pt-art) reset blockquote padding to 22px, so the theme mark sat on the "short answer" text. Make room for it. */
body.th.pt-art .prose blockquote{position:relative;padding-left:3.6rem}
/* leaffix 1113 (t1933u): keep the "On this page" mark inside the box so it isn't clipped at the top */
body.th .toc::before{top:.7rem;right:.7rem;width:3.2rem;height:3.2rem}
body.th .toc{position:relative}