/* TGIFM Marketplace(TM) colour theme: Variant B "Soft Mid-Grey" (approved by Pastor Tim, 2026-10-05:
   "the mostly grey but strong blue accents"). Source: redesign_2026-10/mockups_grey (grey.css, data-v="b"), ported to the real
   site's markup.
   - An override layer: load it AFTER marketplace.css. It changes colours, surfaces and shadows only, plus the liquid-glass
     buttons. No size, spacing or layout changes. Product photos are never filtered.
   - Balance: grey ~60%, deep/royal blue accents ~30%, white/silver ~10%. No dark full-width backgrounds.
   - WCAG AA: 4.5:1 normal text, 3:1 large text (checked on the rendered pages). */

/* ============================================================ 1. palette (the site's own variables, re-pointed) */
:root,:root body{
  --bg:#ECEEF2; --card:#FFFFFF; --ink:#1F2430; --muted:#4E5666; --line:#D3D8E0; --soft:#E6E9EE; --hair:#D3D8E0;
  --gold:#2350D6; --gold-2:#2350D6; --deep:#1B3A8C; --emerald:#1B3A8C; --emerald-2:#152E70; --white:#FFFFFF;
  --royal:#2350D6; --slate:#3B4250;
  /* theme tokens */
  --tg-page:#ECEEF2; --tg-band:#E1E4E9; --tg-text:#2A303C; --tg-text-2:#3B4250; --tg-deep:#1B3A8C; --tg-royal:#2350D6;
  --tg-silver:#D3D8E0;
  --tg-hero:linear-gradient(180deg,#CDD2D9 0%,#C2C8D0 55%,#BAC0CA 100%);
  --tg-glass-blue:linear-gradient(180deg,#4870EA 0%,#2350D6 40%,#1D40AA 72%,#1B3A8C 100%);
  --tg-glass-blue-hover:linear-gradient(180deg,#5A82F0 0%,#2C59DE 40%,#2147BA 72%,#1D3F96 100%);
  --tg-glass-blue-shadow:inset 0 0 0 1px rgba(255,255,255,.26),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -10px 18px rgba(12,28,80,.26),
                         0 12px 24px -12px rgba(27,58,140,.60),0 2px 5px rgba(31,36,48,.16);
  --tg-glass-white:linear-gradient(180deg,rgba(255,255,255,.95),rgba(236,239,244,.80));
  --tg-glass-white-shadow:inset 0 1px 0 #fff,inset 0 -8px 16px rgba(31,36,48,.05),0 0 0 1px rgba(31,36,48,.11),0 12px 24px -14px rgba(31,36,48,.42);
  --tg-card-glass:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  --tg-card-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(31,36,48,.07),0 22px 48px -30px rgba(31,36,48,.45);
}
html,body{background:var(--tg-page)}
body,body.home{background:var(--tg-page);color:var(--tg-text)}
a:focus-visible,button:focus-visible{outline-color:var(--tg-royal)}

/* ============================================================ 2. announcement bar + header */
.announce,body.home .announce{background:var(--tg-deep);color:#D6DEF5}
.site-head,body.home .site-head{background:rgba(250,251,252,.80);background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(244,245,248,.78));
  -webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);border-bottom-color:var(--tg-silver);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -16px rgba(31,36,48,.40)}
.logo span b{color:var(--tg-royal)}
.logo small{color:var(--muted)}
.head-nav{color:var(--tg-text)}.head-nav a:hover{color:var(--tg-deep)}
.lang{background:var(--tg-glass-white);border-color:var(--tg-silver);box-shadow:inset 0 1px 0 #fff}
.lang a{color:#4E5666}
.lang a[aria-current]{color:#fff;background:var(--tg-glass-blue);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px -4px rgba(27,58,140,.6)}
.search{background:rgba(255,255,255,.92);border-color:var(--tg-silver);box-shadow:inset 0 1px 2px rgba(31,36,48,.05)}
.search:focus-within{border-color:var(--tg-royal);box-shadow:0 0 0 3px rgba(35,80,214,.16)}
.search input{color:var(--ink)}
.sr-drop{background:#FFFFFF;border-color:var(--tg-silver);box-shadow:inset 0 1px 0 #fff,0 24px 50px -20px rgba(31,36,48,.45)}
.sr-item:hover,.sr-all:hover{background:#F1F3F6}.sr-item.act,.sr-all.act{background:#E9EEFB}
.sr-all{color:var(--tg-deep);border-top-color:var(--tg-silver)}
.sr-none{color:var(--muted)}.sr-none a{color:var(--tg-deep)}
.cart-btn{color:#3B4250}.cart-btn:hover{color:var(--tg-deep);background:rgba(35,80,214,.08)}
.cart-count{background:#5E6676;color:#fff}
.cart-btn.has .cart-count{background:var(--tg-royal)}
/* category menu bar + mega menu: frosted white, continuous with the header */
.cats,body.home .cats{background:linear-gradient(180deg,#F8F9FB,#F1F3F6);border-bottom-color:var(--tg-silver)}
.mm-top{color:#3B4250}
.mm-top:hover,.mm-top[aria-expanded="true"],.mm-top.is-cur,.mm-top[aria-current]{color:var(--tg-deep);border-bottom-color:var(--tg-royal)}
.mm-all .sym{color:var(--tg-royal)}
.mm-panel,body.home .mm-panel{background:linear-gradient(180deg,#FFFFFF,#F8F9FB);border-bottom-color:var(--tg-silver);box-shadow:0 28px 40px -30px rgba(31,36,48,.40)}
.mm-link{color:#3B4250}.mm-link b{color:var(--ink)}.mm-link:hover,.mm-link:hover b{color:var(--tg-deep)}
.mm-h{color:#5E6676}
.mm-item .shot{background:#F1F3F6}
.mm-item h3{color:var(--tg-text)}.mm-item:hover h3{color:var(--tg-deep)}
.chip{background:var(--card);border-color:var(--tg-silver);color:var(--tg-text)}
.chip.sub{color:var(--muted);background:transparent}
.chip:hover,.chip.on{background:var(--tg-deep);border-color:var(--tg-deep);color:#fff}
.chip .sym{color:var(--tg-royal)}.chip:hover .sym,.chip.on .sym{color:#fff}
.pills a{background:var(--card);border-color:var(--tg-silver);color:var(--tg-text)}
.pills a:hover{background:var(--tg-deep);border-color:var(--tg-deep);color:#fff}

/* ============================================================ 3. liquid-glass buttons */
/* primary: deep-blue glass. The specular highlight ends just above the label's glyphs (50% - .62em) and sits under the label in the
   stacking order, so the white label always reads on solid blue, on big and small buttons alike. */
.btn,body.home .btn,.shop,.search button,.consent .yes,html #qv .qv-add,.studio-submit{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--tg-glass-blue);
  box-shadow:var(--tg-glass-blue-shadow);text-shadow:0 1px 1px rgba(10,24,70,.35)}
.btn:hover,body.home .btn:hover,.shop:hover,.search button:hover,.consent .yes:hover,html #qv .qv-add:hover,.studio-submit:hover{background:var(--tg-glass-blue-hover);color:#fff}
.btn::before,.shop::before,.search button::before,.consent .yes::before,html #qv .qv-add::before,.studio-submit::before{
  content:"";position:absolute;left:7%;right:7%;top:1px;height:36%;height:calc(50% - .62em);border-radius:999px 999px 60% 60%/999px 999px 40% 40%;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));z-index:-1;pointer-events:none}
.btn::after,.shop::after,.search button::after,.consent .yes::after,html #qv .qv-add::after,.studio-submit::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;
  background:radial-gradient(60% 45% at 50% 112%,rgba(150,180,255,.32),transparent 70%);z-index:-1;pointer-events:none}
/* small pills (the card "Shop" button, the search button) get a tighter drop shadow */
.shop,.search button{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -6px 12px rgba(12,28,80,.24),
  0 6px 12px -8px rgba(27,58,140,.65),0 1px 3px rgba(31,36,48,.16)}
/* secondary: frosted white glass, deep-blue label */
.btn.ghost,body.home .btn.ghost{color:var(--tg-deep);background:var(--tg-glass-white);border-color:#fff;box-shadow:var(--tg-glass-white-shadow);text-shadow:none;
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
.btn.ghost:hover,body.home .btn.ghost:hover{color:var(--tg-royal);background:#fff;border-color:#fff}
.btn.ghost::before{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0))}
.btn.ghost::after{background:radial-gradient(60% 55% at 50% 110%,rgba(35,80,214,.12),transparent 70%)}
.search button svg{position:relative}
/* the guide "Look inside" pill (inline style block in the page, hence the extra "html") */
html .look{color:var(--tg-deep);background:var(--tg-glass-white);border-color:rgba(27,58,140,.45);box-shadow:inset 0 1px 0 #fff,0 6px 14px -10px rgba(31,36,48,.45)}
html .look:hover{color:#fff;background:var(--tg-glass-blue);border-color:var(--tg-deep)}

/* ============================================================ 4. home hero: mid-grey band (full width, painted around the centred hero
   with border-image so nothing moves), charcoal type, deep-blue "Jesus(TM)" */
body.home .hero{background:var(--tg-hero);border-image:var(--tg-hero) 0 50% / 0 100vw / 0 100vw}
/* faint deep-blue glow behind the product photos: only where the centred column is at its full 1240 px, and it fades out
   before the column's edges, so the band never shows a seam */
@media (min-width:1290px){
  body.home .hero{background:radial-gradient(520px 420px at 72% 48%,rgba(35,80,214,.15),transparent 66%),var(--tg-hero)}
}
body.home .hero h1{color:var(--ink)}
body.home .hero h1 em{color:var(--tg-deep);background:linear-gradient(180deg,#2E5BE0 0%,#2350D6 45%,#1B3A8C 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.home .hero h1 em sup.tm{-webkit-text-fill-color:var(--tg-deep);color:var(--tg-deep)}
body.home .hero p{color:var(--tg-text)}
body.home .hero .kicker{color:var(--tg-deep)}
body.home .hero .kicker:before{background:var(--tg-deep)}
body.home .mosaic a{background:#DDE1E7;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 18px 36px -24px rgba(31,36,48,.55)}
/* the trust strip closes the band (its 1 px top/bottom borders keep their width; the band's border-image paints over them) */
body.home .trust{color:var(--tg-text);
  background:linear-gradient(180deg,#BAC0CA,#B7BDC7);border-image:linear-gradient(180deg,#BAC0CA,#B7BDC7) 0 50% / 0 100vw / 0 100vw}
body.home .trust svg{color:var(--tg-deep)}
/* alternate full-width bands (#E1E4E9 -> page) behind two home rows; painted with border-image, so nothing moves.
   The band starts 40 px into the row's top padding and fades into the page below the row. */
body.home #hope,body.home #home{
  border-image:linear-gradient(180deg,rgba(225,228,233,0) 0,rgba(225,228,233,0) 40px,rgba(255,255,255,.85) 40px,rgba(255,255,255,.85) 41px,#E1E4E9 41px,#E6E9ED 60%,#ECEEF2 100%) fill 0 / / 0 100vw 42px}
@media (max-width:899px){
  body.home #hope,body.home #home{
    border-image:linear-gradient(180deg,rgba(225,228,233,0) 0,rgba(225,228,233,0) 26px,rgba(255,255,255,.85) 26px,rgba(255,255,255,.85) 27px,#E1E4E9 27px,#E6E9ED 60%,#ECEEF2 100%) fill 0 / / 0 100vw 34px}
}

/* ============================================================ 5. type, links, sections */
.kicker{color:var(--tg-royal)}.kicker:before{background:var(--tg-royal)}
.heyebrow{color:var(--tg-royal)}
.hhead h2,.sec-head h2,.shop-top h1,.fp-info h1,.fam-hero h1,.fam-how h2,.fam-faq h2,.cd-top h2{color:var(--tg-deep)}
.hhead p,.sec-head p{color:var(--muted)}
.hall{color:var(--tg-deep);border-bottom-color:rgba(27,58,140,.35)}.hall:hover{border-bottom-color:var(--tg-deep)}
.see-all{border-bottom-color:var(--tg-royal);color:var(--tg-deep)}.see-all:hover{color:var(--tg-royal)}
.sec-head .gift{color:var(--tg-royal)}
/* product cards (shop, family pack, rows): the photo tile lifts off the grey like a white card */
.card .shot{background:var(--card);box-shadow:0 0 0 1px rgba(31,36,48,.05),0 14px 28px -20px rgba(31,36,48,.45)}
.mm-item .shot,.sr-item .shot{box-shadow:0 0 0 1px rgba(31,36,48,.06)}
.card h3{color:var(--ink)}.card h3 a:hover{color:var(--tg-deep)}
.card .variant{color:var(--muted)}
.card .note{color:var(--tg-royal)}
.price{color:var(--ink)}.price s.was{color:#5E6676}
.badge{background:var(--tg-deep);color:#fff}
.badge.promo,.sale-tag{background:var(--tg-royal);color:#fff}
.ships{color:var(--muted)}.ships img{border-color:var(--tg-silver)}
.card .coupon{color:var(--tg-text)}.card .coupon b{color:var(--ink)}.card .coupon .code{color:var(--tg-royal)}
/* home cards (after the generic card rules, as in marketplace.css) */
.hcard h3{color:var(--ink)}.hcard h3 a:hover{color:var(--tg-deep)}
.hcard .variant{color:var(--muted)}
.hprice{color:var(--ink)}.hprice s{color:#5E6676}
.hcard .shot{background:#E3E6EB;box-shadow:0 14px 28px -20px rgba(31,36,48,.45)}
.hcard .shot:after{box-shadow:inset 0 0 0 1px rgba(31,36,48,.06)}
.hsig{background:var(--tg-card-glass);box-shadow:var(--tg-card-shadow)}
.hsig .hcard .shot{background:#F1F3F6}
.cimg{background:#E3E6EB;box-shadow:0 12px 24px -18px rgba(31,36,48,.45)}
.cname{color:var(--tg-text)}.ctile:hover .cname{color:var(--tg-deep)}
.sale-band{background:linear-gradient(180deg,var(--tg-band),var(--tg-page));box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
/* Featured Bible Studies band (.guides-sec / .pdf-tag / .feat-pdf, light grey rules at the end of marketplace.css, 2026-10-05):
   keep its band and white cards; its button gets the same deep-blue glass as every primary button */
html .guides-sec .feat-all{color:#fff;background:var(--tg-glass-blue)}
html .guides-sec .feat-all:hover{color:#fff;background:var(--tg-glass-blue-hover)}
.feat-pdf,.pdf-tag{box-shadow:inset 0 1px 0 #fff,0 18px 36px -28px rgba(31,36,48,.45)}

/* ============================================================ 6. closing band ("Made for everyday faith") + verse: mid-grey, never dark */
.band,body.home .band{color:var(--ink);
  background:radial-gradient(1100px 380px at 50% 0%,rgba(35,80,214,.09),transparent 72%),linear-gradient(180deg,#C9CED6 0%,#B7BDC7 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(31,36,48,.06)}
.band:after,body.home .band:after{border-color:rgba(27,58,140,.20)}
.band h2{color:var(--tg-deep)}
.band p,body.home .band p{color:var(--tg-text)}
.verse,body.home .verse{position:relative;z-index:1;background:var(--tg-card-glass);border-color:rgba(255,255,255,.95);box-shadow:var(--tg-card-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.verse q{color:var(--tg-deep)}
.verse span,body.home .verse span{color:var(--tg-text-2)}

/* ============================================================ 7. footer: light grey, 3 px deep-blue top rule (1 px border + 2 px inset, same height) */
.foot{background:#CFD4DB;color:var(--tg-text-2);border-top-color:var(--tg-deep);box-shadow:inset 0 2px 0 var(--tg-deep)}
.foot h4{color:var(--ink)}
.foot a:hover{color:var(--tg-deep)}
.foot .logo span b{color:var(--tg-deep)}
.foot .profit{color:var(--ink)}
.legal{border-top-color:rgba(31,36,48,.16)}
.hol-note{background:var(--tg-card-glass);border-color:#fff;color:var(--tg-text-2);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(31,36,48,.06)}
.hol-note .sym{color:var(--tg-deep)}

/* ============================================================ 8. cookie notice: frosted white glass card */
.consent{color:var(--tg-text);background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,245,248,.92));
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(31,36,48,.10),0 22px 50px -18px rgba(31,36,48,.50)}
.consent a{color:var(--tg-deep)}
.consent .no{color:var(--tg-deep);background:var(--tg-glass-white);border-color:rgba(31,36,48,.18);box-shadow:inset 0 1px 0 #fff}
.consent .no:hover{background:#fff}

/* ============================================================ 9. cart drawer */
.cd-back{background:rgba(31,36,48,.38)}
.cd{background:#F4F5F8;box-shadow:-20px 0 50px rgba(31,36,48,.25)}
.cd-top{background:var(--tg-glass-white);border-bottom-color:var(--tg-silver)}
.cd-x{color:#3B4250}
.cd-line,.cd-added{border-bottom-color:var(--tg-silver)}
.cd-opt,.cd-price s,.cd-pay,.cd-shipline,.fp-shipline,.cd-empty p{color:var(--muted)}
.cd-cp,.cd-code,.lnk,.cd-info-box a{color:var(--tg-deep)}
.cd-free .bar{background:#DDE1E7}.cd-free .bar i{background:var(--tg-royal)}
.step{background:#fff;border-color:var(--tg-silver)}.step button{color:var(--ink)}
.cd-cards span{color:#3B4250;border-color:var(--tg-silver);background:#fff}
.cd-info-box{background:var(--tg-card-glass);border-color:#fff;color:var(--tg-text);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(31,36,48,.07)}
.cd-hol{color:#3B4250}
.cd-empty .sym.big{color:var(--tg-royal)}

/* ============================================================ 10. quick view + size chart (styles injected by quickview.js, hence "html") */
html #qv-ov{background:rgba(31,36,48,.50)}
html #qv{background:#F4F5F8;box-shadow:inset 0 1px 0 #fff,0 24px 70px rgba(31,36,48,.40)}
html #qv h2{color:var(--tg-deep)}
html #qv .qv-x,html #qv-scv .scx{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(31,36,48,.08),0 2px 8px rgba(31,36,48,.15)}
html #qv .qv-main{background:#fff}
html #qv .qv-th button{border-color:var(--tg-silver)}
html #qv .qv-th button.on{border-color:var(--tg-royal);box-shadow:0 0 0 2px rgba(35,80,214,.28)}
html #qv .qv-promo,html #qv .qv-price .st{background:var(--tg-royal);color:#fff}
html #qv .qv-price{border-top-color:var(--tg-silver)}
html #qv .qv-fn,html #qv .qv-cp .code{color:var(--tg-royal)}
html #qv .qv-opt button{background:#fff;border-color:var(--tg-silver);color:var(--ink)}
html #qv .qv-opt button.on{border-color:var(--tg-deep);box-shadow:0 0 0 1px var(--tg-deep)}
html #qv .qv-qty select{background:#fff;border-color:var(--tg-silver);color:var(--ink)}
html #qv .qv-add.off{background:#C9CED6;color:#3B4250;text-shadow:none;box-shadow:none}
html #qv .qv-add.off::before,html #qv .qv-add.off::after{display:none}
html #qv .qv-det{color:var(--tg-deep)}
html #qv .qv-gift{background:#E9EEFB;border-left-color:var(--tg-royal)}
html #qv .qv-about ul{color:var(--tg-text)}
html #qv .qv-pairs{border-top-color:var(--tg-silver)}
html #qv-scv{background:rgba(31,36,48,.45)}
html #qv-scv .scb{background:#F4F5F8}
html #qv-scv h3{color:var(--tg-deep)}
html #qv-scv .scu{background:#fff;border-color:var(--tg-silver)}
html #qv-scv .scu button[aria-pressed=true]{background:var(--tg-deep);color:#fff}
html #qv-scv thead th,html #qv-scv thead th:first-child{background:#E6E9EE}
html #qv-scv .sctw{border-color:var(--tg-silver)}
/* Bible guide "Look inside" preview (inline style block in the page) */
html #look-ov{background:rgba(31,36,48,.55)}
html .look-box{background:#F4F5F8}
html .look-top{background:linear-gradient(180deg,#FFFFFF,#E9ECF0);color:var(--tg-deep);box-shadow:inset 0 -1px 0 var(--tg-silver)}
html .look-x{color:var(--ink)}
html .look-pages .tease:after{background:linear-gradient(180deg,rgba(244,245,248,0),#F4F5F8 92%)}
html .look-end{background:#fff;border-top-color:var(--tg-silver)}

/* ============================================================ 11. shop page */
/* inner-page header band: mid-grey, full width (border-image, nothing moves), closed by the filters' silver line */
.shop-top{background:linear-gradient(180deg,#CDD2D9 0%,#C3C9D1 100%);border-image:linear-gradient(180deg,#CDD2D9 0%,#C3C9D1 100%) 0 50% / 0 100vw / 0 100vw}
.shop-top h1{color:var(--tg-deep)}
.shop-top .shop-count{color:#343B48}
.shop-tools label{color:var(--ink)}
.shop-count{color:var(--muted)}
.shop-tools select,.fgroup select{background:#fff;border-color:var(--tg-silver);color:var(--ink)}
.shop-filters{border-top-color:#B3B9C3;border-bottom-color:var(--tg-silver)}
.shop-filters summary{color:var(--tg-deep)}.shop-filters summary:after{color:var(--muted)}
.fgroup>span{color:var(--muted)}
.fchip{background:#fff;border-color:var(--tg-silver);color:var(--tg-text)}
.fchip.on{border-color:var(--tg-deep);box-shadow:0 0 0 1px var(--tg-deep);color:var(--tg-deep)}
.fclear{color:var(--tg-deep)}
.shop-empty p{color:var(--muted)}

/* ============================================================ 12. Family Pack page */
.fp-crumb{color:var(--muted)}.fp-crumb a{color:var(--tg-deep)}
.fp-th,.fp-sw{border-color:var(--tg-silver)}
.fp-th.on,.fp-th:hover,.fp-sw.on{border-color:var(--tg-royal);box-shadow:0 0 0 2px rgba(35,80,214,.28)}
.fp-main{background:#fff;box-shadow:0 0 0 1px rgba(31,36,48,.05),0 18px 36px -24px rgba(31,36,48,.45)}
.fp-hint,.fp-ships,.fp-pkg,.fp-imgnote,.fp-value{color:var(--muted)}
.fp-sub,.fp-colors p,.fp-about,.fp-tagline{color:var(--tg-text)}
.fp-by{color:var(--tg-royal)}
.fp-price{border-top-color:var(--tg-silver)}
.fp-pk{background:#fff;border-color:var(--tg-silver);color:var(--ink)}.fp-pk small{color:var(--muted)}
.fp-pk.on{border-color:var(--tg-deep);box-shadow:0 0 0 1px var(--tg-deep)}
.fp-buybox{background:var(--tg-card-glass);border-color:#fff;box-shadow:var(--tg-card-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
.fp-soon{background:#E9EEFB;color:var(--tg-text)}
.fp-soon:target{outline-color:var(--tg-royal)}
.fp-box,.fp-more{border-top-color:var(--tg-silver)}
/* full-screen photo lightboxes stay dark on purpose (photos read best on a dark surround), retinted from green-black to charcoal */
#fp-lb,html #qv-lb{background:rgba(31,36,48,.94)}

/* ============================================================ 13. TGIFM Family page, policies */
.fam-hero p{color:var(--muted)}.fam-hero .sym.big{color:var(--tg-royal)}
.fam-b{background:var(--tg-card-glass);border-color:#fff;box-shadow:var(--tg-card-shadow)}
.fam-b svg{color:var(--tg-royal)}.fam-b p{color:var(--muted)}
.fam-q{border-bottom-color:var(--tg-silver)}.fam-q summary{color:var(--ink)}.fam-q p{color:var(--muted)}
.policy{color:var(--tg-text)}
.policy h1,.policy h3{color:var(--tg-deep)}
.policy a{color:var(--tg-deep)}
.policy a:hover{color:var(--tg-royal)}

/* ============================================================ 14. newer components in marketplace.css: Personalize page, AI Studio,
   TGIFM Care (same rules: grey surfaces, white glass cards, deep-blue headings, glass buttons, nothing dark) */
.personalize-section{border-color:#fff;background:linear-gradient(180deg,#E1E4E9,#ECEEF2);box-shadow:var(--tg-card-shadow)}
.personalize-copy h2{color:var(--tg-deep)}
.personalize-copy p,.personalize-hero p,.studio-hero p,.studio-disclaimer{color:var(--muted)}
.personalize-arrow{color:var(--ink);border-top-color:rgba(27,58,140,.30);border-bottom-color:rgba(27,58,140,.30)}
.personalize-arrow b{color:var(--tg-royal)}
.personalize-arrow:hover{color:var(--tg-deep);border-color:var(--tg-deep)}
.eligible-card{background:#fff;border-color:#fff;box-shadow:var(--tg-card-shadow)}
.eligible-card a{color:var(--tg-deep)}.eligible-card a:hover{color:var(--tg-royal)}
.eligible-note{background:linear-gradient(180deg,#FFFFFF,#E6ECFA);border-color:#fff;color:var(--ink)}
.eligible-note h3{color:var(--tg-deep)}.eligible-note p{color:var(--tg-text)}.eligible-note a{color:var(--tg-deep)}
.ai-studio,.ai-studio-ad{border-color:#fff;background:var(--tg-card-glass);box-shadow:var(--tg-card-shadow)}
.ai-studio-ad-mark{background:var(--tg-glass-blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.ai-studio-ad-mark span:first-child{color:#D6DEF5}.ai-studio-ad-mark i{background:#D6DEF5}
.ai-studio-ad-link{color:var(--ink);border-left-color:var(--tg-silver)}.ai-studio-ad-link b{color:var(--tg-royal)}.ai-studio-ad-link:hover{color:var(--tg-deep)}
@media (max-width:720px){.ai-studio-ad-link{border-top-color:var(--tg-silver)}}
.studio-rule{color:#3B4250}.studio-rule b{color:var(--ink)}
.ai-studio-top{border-bottom-color:var(--tg-silver)}.ai-studio-top h2{color:var(--tg-deep)}
.ai-status{color:#3B4250}
.ai-studio label{color:var(--ink)}
.ai-studio select,.ai-studio textarea{background:#fff;border-color:var(--tg-silver)}
.ai-studio select:focus,.ai-studio textarea:focus{border-color:var(--tg-royal);box-shadow:0 0 0 3px rgba(35,80,214,.14)}
.studio-guide{background:#fff;border-color:var(--tg-silver);color:#3B4250}.studio-guide:hover{border-color:var(--tg-royal);color:var(--tg-deep)}
.studio-response{color:var(--ink);background:linear-gradient(180deg,#FFFFFF,#EEF1F6);box-shadow:inset 0 0 0 1px rgba(31,36,48,.08)}
.studio-response:after{border-color:rgba(27,58,140,.14)}
.studio-response .kicker{color:var(--tg-royal)}.studio-response h3{color:var(--tg-deep)}
.studio-response p{color:var(--tg-text)}.studio-response p strong{color:var(--ink)}
.studio-response .studio-mini{color:var(--tg-deep)}.studio-response[data-state="working"] .studio-mini{color:var(--muted)}
.studio-response[data-state="error"]{background:#FBEDED}
.care-launcher{color:#fff;background:var(--tg-glass-blue);box-shadow:var(--tg-glass-blue-shadow)}
.care-launcher:hover{background:var(--tg-glass-blue-hover)}
.care-launcher span{background:#fff;color:var(--tg-deep)}
.care-panel{background:#fff;border-color:var(--tg-silver);box-shadow:0 26px 64px rgba(31,36,48,.24)}
.care-panel header{color:var(--tg-deep);background:linear-gradient(180deg,#FFFFFF,#E9ECF0);box-shadow:inset 0 -1px 0 var(--tg-silver)}
.care-panel header .kicker{color:var(--tg-royal)}
.care-close{color:var(--ink)}
.care-welcome,.care-ai{background:#EEF1F5;color:var(--tg-text)}
.care-me{background:var(--tg-deep);color:#fff}
.care-pending{color:#5E6676}
.care-chips button{background:#fff;border-color:var(--tg-silver);color:#3B4250}.care-chips button:hover{border-color:var(--tg-royal);color:var(--tg-deep)}
.care-form{border-top-color:var(--tg-silver)}
.care-form textarea{border-color:var(--tg-silver)}.care-form textarea:focus{border-color:var(--tg-royal);box-shadow:0 0 0 3px rgba(35,80,214,.14)}
.care-form button{color:#fff;background:var(--tg-glass-blue)}
.care-note a{color:var(--tg-deep)}

/* ============================================================ 15. comfort settings */
@media (prefers-reduced-transparency:reduce){
  .site-head,.cats,.mm-panel,.sr-drop,.consent,.btn.ghost,.verse,.hsig,.fp-buybox,.fam-b,.cd-info-box,.hol-note{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* 2026-10-05 phone fix (existing bug, not the theme): the no-wrap "View the entire collection of Hope has a name: Jesus" link
   pushed the home page to 446-463px wide on 390px phones. Let it wrap on small screens. */
@media (max-width:720px){.hall{white-space:normal;flex:1 1 auto;min-width:0}}