@font-face{font-family:'Baloo 2';src:url('/assets/fonts/Baloo2.woff2') format('woff2');font-weight:400 800;font-display:swap}@font-face{font-family:'Titan One';src:url('/assets/fonts/TitanOne.woff2') format('woff2');font-weight:400;font-display:swap}
/* BrickTurtle theme - "home2": fun toy-brick look, mascot + surfing hero, brick-tab category
   sidebar that folds to a horizontal scroll-strip on mobile. */
@font-face{font-family:'Nunito';src:url('/assets/fonts/Nunito.woff2') format('woff2');font-weight:300 900;font-display:swap}

:root{
  --bt-red:#d01414; --bt-red-d:#a50f0f;
  --bt-yellow:#f6c422; --bt-yellow-d:#e0a900;
  --bt-blue:#2a7fd4; --bt-blue-d:#1f63aa;
  --bt-green:#49a94a;
  --bt-cream:#fbf3df; --bt-card:#fff;
  --bt-ink:#17224a; --bt-muted:#5b647f;
  --bt-line:#e6ddc4;
}
*{box-sizing:border-box}
body.theme-brickturtle{
  margin:0; background:var(--bt-cream); color:var(--bt-ink);
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.theme-brickturtle .wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.theme-brickturtle a{color:inherit;text-decoration:none}
.theme-brickturtle h1,.theme-brickturtle h2,.theme-brickturtle h3{font-family:'Baloo 2',sans-serif;font-weight:600;letter-spacing:.2px}
img{max-width:100%}

/* ---- header ---- */
.theme-brickturtle .site-head{background:var(--bt-yellow);border-bottom:5px solid var(--bt-yellow-d)}
.theme-brickturtle .site-head .wrap{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.theme-brickturtle .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.theme-brickturtle .bt-logo{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 2px 0 rgba(0,0,0,.15))}
.theme-brickturtle .bt-word{font-family:'Titan One',cursive;font-weight:400;font-size:30px;line-height:1;letter-spacing:.3px}
.theme-brickturtle .bt-word .b1{color:var(--bt-red)}
.theme-brickturtle .bt-word .b2{color:var(--bt-blue)}
/* header byline, mirroring TV Rex's tagline - dark navy so it reads on the yellow bar */
.theme-brickturtle .bt-tagline{align-self:center;font-size:13px;font-weight:800;color:var(--bt-ink);line-height:1.25}
.theme-brickturtle .bt-search{flex:1 1 auto;display:flex;max-width:560px}
.theme-brickturtle .bt-search input{flex:1;border:3px solid var(--bt-red);border-right:none;border-radius:26px 0 0 26px;
  padding:11px 18px;font:inherit;font-size:15px;outline:none;background:#fff}
.theme-brickturtle .bt-search button{border:3px solid var(--bt-red);background:var(--bt-red);color:#fff;
  border-radius:0 26px 26px 0;padding:0 22px;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:16px;cursor:pointer}
.theme-brickturtle .bt-nav{display:flex;gap:20px;flex:0 0 auto;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:17px}
.theme-brickturtle .bt-nav a{color:var(--bt-ink)}
.theme-brickturtle .bt-nav a:hover{color:var(--bt-red)}
.theme-brickturtle .bt-burger{display:none;flex:0 0 auto;background:none;border:none;cursor:pointer;padding:6px}
.theme-brickturtle .bt-burger span{display:block;width:26px;height:3px;background:var(--bt-ink);border-radius:2px;margin:5px 0}
.theme-brickturtle #bt-menu{display:none}

/* ---- hero ---- */
.theme-brickturtle .bt-hero{margin:0 0 22px}
.theme-brickturtle .bt-hero-in{position:relative;overflow:hidden;background:linear-gradient(180deg,#57a6e6,#2a7fd4);
  border:4px solid var(--bt-ink);border-radius:20px;min-height:170px;display:flex;align-items:center;
  box-shadow:0 6px 0 rgba(0,0,0,.12)}
.theme-brickturtle .bt-hero-txt{padding:22px 26px;z-index:2;max-width:64%}
.theme-brickturtle .bt-hero-txt h1{color:#fff;font-size:38px;line-height:1.02;margin:0 0 6px;
  text-shadow:0 2px 0 var(--bt-blue-d),0 3px 6px rgba(0,0,0,.25)}
.theme-brickturtle .bt-hero-txt h1 em{color:var(--bt-yellow);font-style:normal}
.theme-brickturtle .bt-hero-txt p{color:#eaf4ff;font-weight:700;margin:0 0 14px;font-size:15px}
.theme-brickturtle .bt-cta{display:inline-block;background:var(--bt-red);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:600;
  font-size:17px;padding:11px 22px;border-radius:30px;border:3px solid #fff;box-shadow:0 4px 0 var(--bt-red-d)}
.theme-brickturtle .bt-cta:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--bt-red-d)}
.theme-brickturtle .bt-hero-img{position:absolute;right:6px;bottom:0;height:104%;max-height:230px;z-index:1;
  filter:drop-shadow(-3px 3px 4px rgba(0,0,0,.2))}

/* ---- body: sidebar + rails ---- */
.theme-brickturtle .bt-body{display:flex;gap:22px;align-items:flex-start;padding-bottom:30px}
/* breathing room between the yellow header and the page content, on EVERY page type
   (home hero, content-page breadcrumbs, category, product, search) */
.theme-brickturtle main{display:block;padding-top:20px}
.theme-brickturtle .bt-cats{flex:0 0 220px;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:#e0c98a transparent}
.theme-brickturtle .bt-cats::-webkit-scrollbar{width:7px}
.theme-brickturtle .bt-cats::-webkit-scrollbar-thumb{background:#e0c98a;border-radius:4px}
/* product detail: match the category pages' breathing room under the header */
.theme-brickturtle .product{padding-top:7px}
.theme-brickturtle .band{padding-top:7px}
.theme-brickturtle .bt-cats .bt-cats-h{font-size:16px;margin:6px 2px 10px;color:var(--bt-muted);text-transform:uppercase;letter-spacing:1px}
/* Pack the theme tabs: flex-wrap with content-width bricks, so short names share a row (mostly 2 per row)
   and a long name takes only the width it needs - uses the sidebar space far better than 1-per-row, while
   keeping the LEGO brick look (stud nub retained per Adam's mock). Padding tightened a touch to help 2 fit. */
.theme-brickturtle .bt-cats-list{display:flex;flex-wrap:wrap;gap:8px}
.theme-brickturtle .brick-tab{position:relative;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:9px;
  color:#fff;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:14px;border:3px solid rgba(0,0,0,.28);
  box-shadow:0 3px 0 rgba(0,0,0,.22);line-height:1;flex:0 1 auto;min-width:0}
.theme-brickturtle .brick-tab .ic{font-size:15px;filter:saturate(1.2)}
.theme-brickturtle .brick-tab .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-brickturtle .brick-tab:hover{transform:translateY(-1px);box-shadow:0 5px 0 rgba(0,0,0,.22)}
/* brick colours (rotate) - background uses the colour; text/icon forced white (or dark on yellow) */
.theme-brickturtle .bt-c0{background:var(--bt-red);color:var(--bt-red)}
.theme-brickturtle .bt-c1{background:var(--bt-blue);color:var(--bt-blue)}
.theme-brickturtle .bt-c2{background:var(--bt-yellow);color:var(--bt-yellow)}
.theme-brickturtle .bt-c3{background:var(--bt-green);color:var(--bt-green)}
.theme-brickturtle .bt-c4{background:#7b4fb0;color:#7b4fb0}
.theme-brickturtle .bt-c5{background:#e8842a;color:#e8842a}
.theme-brickturtle .bt-c6{background:#2bb3a3;color:#2bb3a3}
.theme-brickturtle .bt-c7{background:#e05a9a;color:#e05a9a}
.theme-brickturtle .brick-tab .ic,.theme-brickturtle .brick-tab .nm{color:#fff}
.theme-brickturtle .bt-c2 .ic,.theme-brickturtle .bt-c2 .nm{color:#5a4300}

.theme-brickturtle .bt-rails{flex:1 1 auto;min-width:0}

/* ---- rails / sections ---- */
.theme-brickturtle .rail{margin:0 0 26px}
.theme-brickturtle .rail-head{display:flex;justify-content:space-between;align-items:flex-end;margin:4px 0 14px}
.theme-brickturtle .rail-head h2{font-size:25px;margin:0;color:var(--bt-ink)}
.theme-brickturtle .rail-head h2::after{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--bt-red);margin-top:5px}
.theme-brickturtle .rail-blurb{margin:2px 0 0;color:var(--bt-muted);font-size:14px;font-weight:600}
.theme-brickturtle .rail-more{color:var(--bt-blue);font-family:'Baloo 2',sans-serif;font-weight:600;white-space:nowrap}
.theme-brickturtle .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ---- cards ---- */
.theme-brickturtle .card{position:relative;display:flex;flex-direction:column;background:var(--bt-card);
  border:3px solid var(--bt-red);border-radius:16px;overflow:hidden;box-shadow:0 4px 0 rgba(208,20,20,.18);
  transition:transform .12s,box-shadow .12s}
.theme-brickturtle .card:hover{box-shadow:0 6px 0 rgba(208,20,20,.26);border-color:var(--bt-red-d)}
.theme-brickturtle .card>img{width:100%;height:158px;object-fit:contain;background:#fff;padding:12px}
.theme-brickturtle .card .noimg{height:158px;display:flex;align-items:center;justify-content:center;color:#bbb;background:#faf7ef}
.theme-brickturtle .card-b{padding:10px 12px 13px;display:flex;flex-direction:column;gap:4px;border-top:2px dashed var(--bt-line)}
.theme-brickturtle .card .setno{align-self:flex-start;background:var(--bt-yellow);color:#5a4300;font-family:'Baloo 2',sans-serif;
  font-weight:600;font-size:11px;padding:1px 8px;border-radius:20px}
.theme-brickturtle .card .t{font-weight:700;font-size:14px;line-height:1.25;color:var(--bt-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.theme-brickturtle .card .p{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:22px;color:var(--bt-red)}
.theme-brickturtle .card .p small{font-size:12px;color:var(--bt-muted);font-weight:600}
.theme-brickturtle .card .rlogos{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:2px;min-height:20px}
.theme-brickturtle .card .rlogos img{height:18px;width:auto;border-radius:3px;background:#fff}
.theme-brickturtle .card .stores{color:var(--bt-muted);font-size:12px;font-weight:700}
.theme-brickturtle .badge{position:absolute;top:9px;right:9px;z-index:3;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:14px;
  padding:3px 9px;border-radius:20px;color:#fff}
.theme-brickturtle .badge.retired{background:var(--bt-blue);transform:rotate(4deg);border:2px solid #fff}
.theme-brickturtle .badge.cheap{background:var(--bt-green)}
.theme-brickturtle .badge.off{background:var(--bt-red)}
/* header/pill badges (hot-buy, great-value) live in a .badges line - keep them IN FLOW; only the
   sticker badges above (retired/cheap/off) sit absolutely on the card image. */
/* header/pill badges (retiring, great-value, hot-buy) live in a .badges line - keep them IN FLOW and
   size them consistently, bigger than the little sticker badges that sit on the card images above. */
.theme-brickturtle .badges .badge{position:static;top:auto;right:auto;z-index:auto;font-size:15px;padding:7px 15px}
.theme-brickturtle .badges .badge .badge-ico{width:18px;font-size:16px}
/* retiring-soon is the key scarcity signal - dark ink text (matching the tagline) on its gold pill; the
   others keep the white text from the base .badge rule since they sit on coloured backgrounds. */
.theme-brickturtle .badges .badge-retiring{color:var(--bt-ink)}
/* theme links (card subtitle + product-page brand line) in the BrickTurtle red */
.theme-brickturtle .bg-theme-link,.theme-brickturtle .theme-link{color:var(--bt-red)}
.theme-brickturtle .brand-sep{color:var(--bt-muted)}
.theme-brickturtle .p .wasp{color:var(--bt-muted);text-decoration:line-through;font-weight:700;font-size:.8em;margin-left:6px}

/* base card elements used on category / search pages (discount pill, stock, compare button) */
.theme-brickturtle .off-badge{position:absolute;top:9px;left:9px;z-index:3;background:var(--bt-green);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:12px;padding:3px 9px;border-radius:20px;border:2px solid #fff;
  box-shadow:0 2px 0 rgba(0,0,0,.12)}
.theme-brickturtle .oos-badge{position:absolute;top:9px;left:9px;z-index:3;background:#9aa0b0;color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:11px;padding:3px 9px;border-radius:20px}
.theme-brickturtle .view-deal{margin-top:8px;display:block;text-align:center;background:var(--bt-red);color:#fff;
  font-family:'Baloo 2',sans-serif;font-weight:600;font-size:14px;padding:8px 12px;border-radius:22px;box-shadow:0 3px 0 var(--bt-red-d);line-height:1}
.theme-brickturtle .card:hover .view-deal{background:var(--bt-red-d)}
/* search / buyer-guide list card "Compare prices" button. Needs an explicit theme rule: the base
   .bg-cta{color:#fff} is out-specified by .theme-brickturtle a{color:inherit}, so without this the
   text renders dark on red. */
.theme-brickturtle .bg-cta{background:var(--bt-red);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:600;border-radius:22px;padding:9px 18px;box-shadow:0 3px 0 var(--bt-red-d);line-height:1}
.theme-brickturtle .bg-cta:hover{background:var(--bt-red-d);box-shadow:none}
/* when a buyer_guide list sits INSIDE an article body, the .prose .body a rule (blue + underline) out-
   specifies .bg-cta - so the Compare button renders blue underlined text on red. Force it back to white,
   no underline. Same for the card title so it reads as a card, not a prose link. */
.theme-brickturtle .prose .body a.bg-cta,.theme-brickturtle .body a.bg-cta{color:#fff;text-decoration:none}
.theme-brickturtle .prose .body a.bg-title,.theme-brickturtle .body a.bg-title{color:var(--bt-ink);text-decoration:none}
.theme-brickturtle .rlogos .more{font-size:12px;color:var(--bt-muted);font-weight:700;margin-left:2px}
.theme-brickturtle .p-oos{color:var(--bt-muted)}

/* ---- footer ---- */
.theme-brickturtle .site-foot{background:#2e2419;color:#e5d9c2;font-size:13px;line-height:1.6;padding:22px 0;margin-top:10px}
.theme-brickturtle .site-foot a{color:#f6c422}

/* ---- ad label ---- */
.theme-brickturtle .ad-label{display:block;text-align:center;color:#b3a980;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:6px 0}

/* ---- responsive ---- */
@media(max-width:860px){
  /* consistent mobile gutter (12px) across home + product + article. Inner pages wrap content in BOTH
     .bt-inner-grid AND an inner .wrap - that double-pads; the sidebar is hidden on mobile, so the grid's
     horizontal padding is zeroed (in a rule AFTER the base .bt-inner-grid def below, so it actually wins)
     and the inner .wrap owns the single 12px gutter. */
  .theme-brickturtle .wrap{padding:0 12px}
  /* the base prism-critical.css pins .site-head .wrap to height:62px; on mobile the search wraps to a
     2nd row, so force the header to GROW (height:auto) - else the search spills below the yellow bar and
     the first content row tucks under it. With auto height the yellow extends down behind the search. */
  .theme-brickturtle .site-head .wrap{flex-wrap:wrap;gap:10px;height:auto}
  /* clear breathing room under the (now taller) header so content isn't tucked against the search */
  .theme-brickturtle .bt-body{padding-top:14px}
  .theme-brickturtle .bt-search{order:3;flex-basis:100%;max-width:none}
  .theme-brickturtle .bt-nav{flex-basis:100%;flex-direction:column;gap:2px;display:none;
    background:#fff;border:3px solid var(--bt-yellow-d);border-radius:12px;padding:8px;margin-top:4px}
  .theme-brickturtle #bt-menu:checked ~ .bt-nav{display:flex}
  .theme-brickturtle .bt-nav a{padding:8px 10px;border-radius:8px}
  .theme-brickturtle .bt-nav a:hover{background:var(--bt-cream)}
  .theme-brickturtle .bt-burger{display:block;margin-left:auto}
  /* keep the hamburger on the TOP row with the wordmark: order the byline (order:2, full width) below the
     brand+burger row, and pull it in tight so it doesn't add a fat gap. */
  .theme-brickturtle .bt-tagline{order:2;flex-basis:100%;margin:-4px 0 -2px;line-height:1.15}
  .theme-brickturtle .bt-word{font-size:24px}
  .theme-brickturtle .bt-logo{width:42px;height:42px}
  .theme-brickturtle .bt-hero-txt{max-width:66%}
  .theme-brickturtle .bt-hero-txt h1{font-size:26px}
  .theme-brickturtle .bt-hero-img{max-height:150px}
  /* sidebar -> horizontal scroll strip above the rails */
  .theme-brickturtle .bt-body{flex-direction:column;gap:12px}
  .theme-brickturtle .bt-cats{flex:1 1 auto;width:100%;order:-1;position:static;max-height:none;overflow:visible;padding-right:0}
  .theme-brickturtle .bt-cats .bt-cats-h{display:none}
  /* theme pills: cap at 2 ROWS and let the user swipe RIGHT for more (was wrapping into a huge stack -
     flex-direction:row alone kept the base flex-wrap:wrap, so it wrapped instead of scrolling). A 2-row
     grid that flows into columns overflows horizontally = a clean 2-row swipe strip. */
  .theme-brickturtle .bt-cats-list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
    grid-auto-columns:max-content;gap:8px;overflow-x:auto;overflow-y:hidden;padding:9px 2px 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-snap-type:x proximity}
  .theme-brickturtle .brick-tab{flex:0 0 auto;scroll-snap-align:start}
  .theme-brickturtle .brick-tab .nm{white-space:nowrap;overflow:visible;text-overflow:clip}
  .theme-brickturtle .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .theme-brickturtle .rail-head h2{font-size:21px}
}
@media(max-width:460px){
  .theme-brickturtle .bt-hero-txt h1{font-size:21px}
  .theme-brickturtle .bt-hero-img{max-height:120px;opacity:.9}
  .theme-brickturtle .card .p{font-size:19px}
}

/* ---- Guides hub (/guides) ---- */
.theme-brickturtle .guides-intro{font-size:16px;color:var(--bt-muted);margin:2px 0 22px;max-width:760px;line-height:1.5}
.theme-brickturtle .guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:10px 0 30px}
.theme-brickturtle .guide-card{display:block;background:#fff;border:2px solid #efe4c4;border-left:5px solid var(--bt-red);border-radius:12px;padding:14px 16px;box-shadow:0 2px 0 rgba(0,0,0,.05);transition:transform .12s,box-shadow .12s,border-color .12s;text-decoration:none}
.theme-brickturtle .guide-card:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.08);border-color:var(--bt-red)}
.theme-brickturtle .guide-card strong{display:block;font-family:'Baloo 2',sans-serif;font-weight:600;font-size:15px;color:var(--bt-ink);margin-bottom:4px;line-height:1.3;text-decoration:none}
.theme-brickturtle .guide-card:hover strong{color:var(--bt-red)}
.theme-brickturtle .guide-card span{display:block;font-size:13px;color:var(--bt-muted);line-height:1.45}
/* guide cards live inside .body, so exclude them from the body-link underline/blue */
.theme-brickturtle .prose .body a.guide-card,.theme-brickturtle .body a.guide-card{text-decoration:none;color:inherit}

/* ---- inner-page layout: Shop-by-theme rail (NavThemesWidget) + main content ---- */
.theme-brickturtle .bt-inner-grid{max-width:1180px;margin:0 auto;padding:20px 16px 0;display:flex;gap:22px;align-items:flex-start}
.theme-brickturtle .bt-inner-main{flex:1 1 auto;min-width:0;padding-top:0}
.theme-brickturtle .bt-cats-side{flex:0 0 220px;position:sticky;top:14px;max-height:calc(100vh - 28px);overflow-y:auto}
@media(max-width:860px){
  .theme-brickturtle .bt-cats-side{display:none}
  /* mobile: sidebar hidden, so the grid adds no horizontal padding - the inner .wrap owns the 12px
     gutter (see the .wrap rule above). Declared HERE, after the base .bt-inner-grid def, so it wins. */
  .theme-brickturtle .bt-inner-grid{padding:14px 0 0}
}

/* body-content text links (articles, guides, content pages) get a clear underline + link colour, so they
   read as links - but ONLY in the prose body, never the header/nav/footer/cards. */
.theme-brickturtle .prose .body a,.theme-brickturtle .prose .lede a,.theme-brickturtle .guides-intro a{color:var(--bt-blue);text-decoration:underline}
.theme-brickturtle .prose .body a:hover,.theme-brickturtle .guides-intro a:hover{color:var(--bt-red)}

/* price-table action button (Check/View) right-aligned in its column, to line up with the Watch price
   button + not float mid-cell */
.theme-brickturtle table.prices tr:not(.pulled) td:last-child{text-align:right}

/* sort/filter pills get a subtle LEGO drop-shadow */
.theme-brickturtle .sort-bar a{box-shadow:0 2px 0 rgba(0,0,0,.14);border-width:2px}
.theme-brickturtle .sort-bar a.on{box-shadow:0 2px 0 var(--bt-red-d)}
/* active-filters chips match the chunky LEGO pill look (Baloo font, 2px border, drop-shadow) */
.theme-brickturtle .af-chip{font-family:'Baloo 2',sans-serif;border-width:2px;box-shadow:0 2px 0 var(--bt-red-d)}
.theme-brickturtle .af-chip.af-clear{border:2px solid var(--bt-red);color:var(--bt-red);box-shadow:0 2px 0 rgba(0,0,0,.12)}
.theme-brickturtle .af-chip.af-clear:hover{color:var(--bt-red-d);border-color:var(--bt-red-d)}
.theme-brickturtle .active-filters .af-label{color:var(--bt-muted)}

/* no-image placeholder must occupy the same 158px slot as a real card image (was 150px + 14px margin =
   178px -> a taller card that broke the grid alignment). 134 + 12*2 margin = 158, matching .card>img. */
.theme-brickturtle .card-noimg{height:134px;margin:12px;background:#faf7ef;border-color:#e6ddc4}