/* TUTU Champion Takeover -- home banner (design "B"), strictly replicating
   banners/banner-B.html. Only enqueued when should_render() is true.
   Note: the reference file used a page-level `*{margin:0;box-sizing:border-box}`
   reset and a `body{...}` rule -- both dropped/rescoped here since this loads
   on the live site, not a standalone demo page; a bare `*`/`body` rule would
   clobber the rest of tutustudio.es. Everything is scoped under .tcx-bb. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@400;500;600&display=swap');

.tcx-bb,
.tcx-bb *{box-sizing:border-box;margin:0}

.tcx-bb{position:relative;overflow:hidden;padding:40px 24px;text-align:center;
  background:radial-gradient(120% 140% at 50% -20%,#B96342 0%,#9A4A2C 55%,#6E3520 100%)}
.tcx-bb__glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,168,59,.45),rgba(224,168,59,0) 65%);pointer-events:none}
.tcx-bb__confetti{position:absolute;inset:0;pointer-events:none;opacity:.5}
.tcx-bb__wrap{position:relative;z-index:2}
.tcx-bb__stars{display:flex;gap:14px;justify-content:center;margin-bottom:16px}
.tcx-bb__stars svg{width:44px;height:44px;filter:drop-shadow(0 2px 10px rgba(224,168,59,.55))}
.tcx-bb__eyebrow{font:600 12px/1 'Jost',system-ui,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:#F2CFA0;margin-bottom:12px}
.tcx-bb__h{font:700 52px/1.02 'Cormorant Garamond',Georgia,serif;color:#FBF3E9;max-width:840px;margin:0 auto}
.tcx-bb__h em{font-style:italic;color:#EFCB89}
.tcx-bb__sub{font:400 16px/1.5 'Jost',system-ui,sans-serif;color:#F3E3D2;opacity:.92;margin:14px auto 22px;max-width:560px}
.tcx-bb__cta{display:inline-flex;align-items:center;gap:9px;background:#FBF3E9;color:#8A3D22;font:600 15px/1 'Jost',system-ui,sans-serif;padding:16px 32px;border-radius:999px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .15s ease}
.tcx-bb__cta:hover{transform:translateY(-1px)}

@media(max-width:640px){
  .tcx-bb{padding:30px 20px}
  .tcx-bb__stars svg{width:34px;height:34px}
  .tcx-bb__h{font-size:33px}
  .tcx-bb__sub{font-size:14px}
  .tcx-bb__cta{width:100%;justify-content:center;padding:15px}
  .tcx-bb__glow{width:240px;height:240px}
}

/* ================= layout robustness (real-page audit, 2026-07-20) =================
   The tufting page (page-id-5422) has EXISTING sitewide CSS
   `.page-id-5422 #content{margin-top:-112px!important}` (pulls its whole
   content block up to sit flush under the header -- that page also hides the
   breadcrumb band that would otherwise fill that space). #content always
   shifts up by that fixed amount regardless of what precedes it, so once our
   banner is inserted before it, the negative margin eats into the banner's
   own bottom instead of empty space. Fixed by reserving genuine extra box
   height via padding-bottom (112px known encroachment + safety margin) --
   this is real space the encroachment lands INTO, not a stacking/z-index
   trick, so it works regardless of paint order and needs no !important (a
   page-scoped selector is simply more specific than the base .tcx-bb rule).
   No other page was found using this same pattern (checked via the site's
   shared "SEO/Conversion fixes" stylesheet, present on every page) -- if
   another one surfaces during Enki's review, add the same pattern for it. */
body.page-id-5422 .tcx-bb{padding-bottom:160px}
@media(max-width:640px){
  body.page-id-5422 .tcx-bb{padding-bottom:140px}
}

/* ================= admin preview flag ================= */
.tcx-preview-flag{position:fixed;left:16px;bottom:16px;z-index:100000;background:#422B1C;color:#fff;font-family:'Jost',system-ui,-apple-system,sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;padding:10px 16px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:320px;line-height:1.4}