on /collections/nostalgia-auction picks up
pink mono styling from Diffusion selectors like
`.#product-card .#product-card-price` — selectors that don't
exist on Boost cards. So we re-apply the same visual treatment
here scoped to .tbb-boost-auction-slot.
Color reference (matches native widget):
- pink #FE8AED (rgb(254,138,237)) = TBB auction accent
- mono ui-monospace stack
- status dot: gray-300 (scheduled), green (live), red (ending)
— the auction app updates this attribute itself; we just
leave the bg-gray-300 default for now.
───────────────────────────────────────────────────────────────── */
.tbb-boost-auction-slot {
width: 100%;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
letter-spacing: -0.5px;
color: #FE8AED;
text-align: center;
}
.tbb-boost-auction-slot .auction.auction-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* Kill Tailwind my-2 / gap-1 spacing inside the slot */
.tbb-boost-auction-slot .my-2 { margin-top: 0 !important; margin-bottom: 0 !important; }
.tbb-boost-auction-slot .gap-1 { gap: 0 !important; }
/* Label ("Starting Bid"/"Current Bid") matches native: GRAY, not pink. */
.tbb-boost-auction-slot .text-sm.uppercase {
font-size: 11px !important;
line-height: 16px !important;
color: rgb(107, 114, 128) !important;
text-transform: none !important;
font-weight: 400 !important;
}
/* Countdown ("Starts in 23 hours") — pink, smaller than native to fit. */
.tbb-boost-auction-slot time,
.tbb-boost-auction-slot .text-sm:not(.uppercase) {
font-size: 11px !important;
line-height: 16px !important;
color: #FE8AED !important;
text-transform: none !important;
font-weight: 400 !important;
}
/* Price — pink, scaled down from native 25px to fit smaller Boost card. */
.tbb-boost-auction-slot .text-lg {
font-size: 19px !important;
line-height: 22px !important;
color: #FE8AED !important;
font-weight: 400 !important;
}
.tbb-boost-auction-slot strong,
.tbb-boost-auction-slot strong > span { font-weight: 400 !important; }
/* Status dot scales with text. */
.tbb-boost-auction-slot .rounded-full {
width: 6px;
height: 6px;
}
/* Status dot — keep the inline bg-gray-300 default; auction app
would normally swap this color when auction transitions state. */
.tbb-boost-auction-slot .rounded-full {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 9999px;
background: rgb(209, 213, 219);
margin-right: 0.25rem;
vertical-align: middle;
}
.tbb-boost-auction-slot time {
display: inline-flex;
align-items: center;
gap: 0.15rem;
}
/* =========================================================================
★ ANTI-FOUC — prevent visual flashes during JS-driven layout changes
=========================================================================
Problem: several JS scripts patch visual properties after the first paint
(carousel slidesPerView, auction price → widget swap). The user sees
a brief "jump" before JS finishes.
Strategy: hide with CSS, reveal once JS marks the element ready, with
a keyframe fallback so nothing stays invisible if JS fails.
========================================================================= */
/* ── 1. Carousel slidesPerView flash ──────────────────────────────────────
Diffusion inits Swiper at 1.5 on mobile; tbb-carousel-enhance.js
patches to 2.15 within ~100ms (one poll cycle). The flash is
sub-perceptible at normal CPU speed. CSS width overrides were tried
but caused blank carousels during Swiper init — the cure was worse
than the disease. Left as-is; enhance polling is fast enough. */
/* ── 2. Auction price → widget replacement flash ──────────────────────────
On homepage/search, auction JS fetches data then replaces .boost-sd__product-price
with the auction widget. During the fetch (~1-3s), the regular price is
visible and then vanishes. We can't pre-hide all prices (non-auction
products need them), but we CAN make the swap seamless by ensuring the
auction slot fades in rather than popping. */
.tbb-boost-auction-slot {
animation: tbb-auction-fadein 0.15s ease-out;
}
@keyframes tbb-auction-fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* =====================================================
Boost filter column — kill the built-in dark overlay
Boost ships `.boost-sd-left.boost-filter-tree-column` with a
baked-in `rgba(0, 0, 0, 0.25)` fill. Against our older 0.80 shell
that blended OK, but with the shell now at 0.95 the 25% black
reads as a distinct darker column — especially on search with
few/no filters, where the empty column extends visibly down past
any filter content.
Making it transparent lets the shell's 0.95 navy show through
cleanly on both search and collection pages.
===================================================== */
.boost-sd-left.boost-filter-tree-column,
.boost-filter-tree-column {
background: transparent !important;
}
/* =====================================================
TBB Site Skins
Storewide background image toggler.
Architecture (Figma Path B — dedicated fixed overlay, layered):
• layout/theme.liquid emits inside
only when a skin is active. position: fixed, z-index:
-1, so it sits behind all content and stays locked during
scroll. Sidesteps iOS's background-attachment: fixed bugs.
• Two pseudo-elements do the actual work:
::before → background image + filter: blur() [one-time GPU
cost, cached; way cheaper than backdrop-filter]
::after → overlay scrim (rgba black with variable alpha)
• still carries the attribute
so the default backdrop in core.css can scope itself out via
:not([data-skin^="skin_"]) when a skin is active.
• The div receives three CSS vars via inline style:
--tbb-skin-url
--tbb-skin-blur (px)
--tbb-skin-overlay (alpha 0..1)
• --tbb-tile-width is the single source of truth for tiled
mode. Height auto-calculates from image aspect ratio so 16:9
or 4:3 uploads don't get squished into a square.
• Precedence: collection metafield custom.skin_override on
partner-template collections > theme default (see theme.liquid).
===================================================== */
:root {
--tbb-tile-width: 250px;
}
.tbb-skin-bg {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
}
.tbb-skin-bg::before,
.tbb-skin-bg::after {
content: "";
position: absolute;
inset: 0;
}
.tbb-skin-bg::before {
background-image: var(--tbb-skin-url);
filter: blur(var(--tbb-skin-blur, 0px));
}
.tbb-skin-bg::after {
background: rgba(0, 0, 0, var(--tbb-skin-overlay, 0));
}
.tbb-skin-bg[data-skin-mode="tiled"]::before {
background-repeat: repeat;
background-size: var(--tbb-tile-width) auto;
background-position: top left;
}
.tbb-skin-bg[data-skin-mode="stretched"]::before {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
/* ============================================================
PDP product-meta block spacing — tighten from Diffusion's
default 32px gap to a denser 14px so blocks (title, price,
curated-by, specs, ATC, wishlist) read as a single unit
rather than spaced-apart sections. Mobile gets a slightly
tighter 12px since vertical real estate is precious.
============================================================ */
.\#product-meta {
gap: 26px !important;
}
@media (max-width: 767px) {
.\#product-meta {
gap: 22px !important;
}
}
/* ============================================================
CURATED BY badge (PDP product info sub-block)
Compact inline seller badge — registered as block type
`curated_by` in s_product.liquid. Lives in the product info
column flow alongside title/price/text. Not a shell, not
side-by-side with Memory Wall (deferred to v2).
============================================================ */
.tbb-curated-by {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5rem 0.625rem;
margin: 0.375rem 0;
border: 1px solid rgba(141, 224, 244, 0.55);
border-radius: 4px;
background: rgba(141, 224, 244, 0.04);
}
/* Avatar — small polaroid-feel frame, pink border (matches Figma) */
.tbb-curated-by__avatar-link {
flex: 0 0 auto;
display: block;
text-decoration: none;
line-height: 0;
}
.tbb-curated-by__avatar-frame {
display: inline-block;
padding: 2px;
background: #fff;
border: 2px solid #fe8aed;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
transition: transform 0.15s ease;
}
.tbb-curated-by__avatar-link:hover .tbb-curated-by__avatar-frame {
transform: scale(1.04);
}
.tbb-curated-by__avatar {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
background: #fff;
border-radius: 2px;
}
.tbb-curated-by__avatar--placeholder {
background: linear-gradient(135deg, #8de0f4 0%, #9c01ff 100%);
}
/* Text column */
.tbb-curated-by__text {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.tbb-curated-by__label {
font-family: 'Courier New', Courier, monospace;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65);
line-height: 1;
}
.tbb-curated-by__verified {
display: inline-flex;
align-items: center;
vertical-align: middle;
margin-left: 5px;
cursor: help;
filter: drop-shadow(0 0 4px rgba(141, 224, 244, 0.4));
}
.tbb-curated-by__verified svg {
width: 18px;
height: 18px;
display: block;
}
.tbb-curated-by__name {
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
font-weight: 700;
line-height: 1.1;
color: #fff;
letter-spacing: 0.01em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tbb-curated-by__name a {
color: inherit;
text-decoration: none;
border-bottom: 2px solid #fe8aed;
padding-bottom: 1px;
transition: color 0.15s ease;
}
.tbb-curated-by__name a:hover {
color: #fe8aed;
}
/* Meta row — product count + visit shop link */
.tbb-curated-by__meta {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
font-family: 'Courier New', Courier, monospace;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.125rem;
}
.tbb-curated-by__count {
letter-spacing: 0.04em;
}
.tbb-curated-by__divider {
color: rgba(255, 255, 255, 0.35);
}
.tbb-curated-by__visit {
color: #fe8aed;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.04em;
transition: color 0.15s ease;
}
.tbb-curated-by__visit:hover {
color: #fff;
text-decoration: underline;
}
/* Unresolved fallback (vendor with no matching collection) */
.tbb-curated-by--unresolved .tbb-curated-by__avatar-frame {
border-color: rgba(255, 255, 255, 0.2);
}
/* Mobile: keep horizontal layout but tighten everything */
@media (max-width: 767px) {
.tbb-curated-by {
gap: 0.5rem;
padding: 0.4375rem 0.5rem;
}
.tbb-curated-by__avatar {
width: 36px;
height: 36px;
}
.tbb-curated-by__name {
font-size: 14px;
}
.tbb-curated-by__label {
font-size: 10px;
}
.tbb-curated-by__meta {
font-size: 11px;
}
}
/* ============================================================
CAROUSEL FLUIDITY (sitewide)
LeMarc directive: "all carousels — frictionless and smooth
both directions, period." The default Swiper CSS engine ships
`scroll-snap-type: x mandatory` on every horizontal swiper
wrapper, which forces every thumb-drag (no matter how short)
to jump to the next slide. That reads as jerky and unresponsive
on mobile. Removing snap entirely gives free, fluid touch
scroll in both directions, just as you'd expect from a native
horizontal scroll container.
Targets:
- `.swiper-wrapper` — every Swiper instance, all axes
- `.swiper-slide` — clear the per-slide snap-align so the
cascade can't re-introduce snap behavior
Boost's own carousels reuse the swiper class names, so this
covers Boost recommendations + product grids too.
============================================================ */
.swiper-wrapper,
.swiper-horizontal .swiper-wrapper,
.swiper-vertical .swiper-wrapper,
.swiper-css-mode > .swiper-wrapper {
scroll-snap-type: none !important;
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch !important;
}
.swiper-slide,
.swiper-wrapper > .swiper-slide {
scroll-snap-align: none !important;
scroll-snap-stop: normal !important;
}
/* ============================================================
BOOST RECOMMENDATION WIDGET — loading-state polish
The bad loading sequence LeMarc reported was:
1. Section blank (next section visible in its place)
2. Tall empty box appears
3. Carousel pops in with products
Two-part fix:
(a) Reserve a reasonable approximate final height so the section
holds its place from initial render. Boost's default 600px was
too tall; the actual final height is ~420-500px. Splitting the
difference at 460 keeps layout stable without dwarfing the page.
(b) Hide the widget's INNER content while products haven't
hydrated yet — the section reserves space but the user
never sees an empty box. When `.boost-sd__product-list`
(or the swiper) appears, the :has() selector stops matching
and the content fades in.
============================================================ */
.boost-sd__rc-pl {
min-height: 460px !important;
transition: opacity 0.2s ease-out;
}
/* While Boost hasn't injected products, hide the widget's interior so
the user only sees reserved space (no empty-box flash). The section
header above stays visible the whole time. */
.boost-sd__rc-pl:not(:has(.boost-sd__product-list, .swiper-slide)) > * {
visibility: hidden;
}
/* Hide Slick's cloned slides on Boost recommendation carousels.
Slick clones the first/last few slides for its infinite-loop visual,
even when our enhance.js removes the wrap-around logic. With these
clones hidden, drag-past-end shows empty space (which the existing
clamp observer in tbb-carousel-enhance.js snaps back from), instead
of the wrap-around illusion. visibility:hidden keeps Slick's width
measurements intact — display:none would break the slider layout. */
.boost-sd__slider-container .slick-cloned {
visibility: hidden !important;
pointer-events: none !important;
}
/* ============================================================
PRODUCT CARD HOVER — disabled on touch devices
On phones/tablets, a tap registers as :hover and the state
sticks until the next tap clears it. The polaroid card's
lift+rotate+scale + dim overlay then leaves the card visually
"stuck up" at random points during scroll, which reads as broken.
`(hover: none)` matches devices where the primary input has no
true hover capability (touchscreens). Desktop with a mouse
keeps the lift; laptops with a trackpad still register `hover:
hover` so they're unaffected.
We zero out the transform + dim-overlay-pseudo for both :hover
and :active so a stuck tap never produces visual lift.
============================================================ */
@media (hover: none) {
/* Diffusion / native cards */
.\#product-card.\@tbb-polaroid:hover .\#product-card-media,
.\#product-card.\@tbb-polaroid:active .\#product-card-media,
.\#product-card.\@tbb-polaroid:focus-within .\#product-card-media {
transform: none !important;
}
.\#product-card.\@tbb-polaroid:hover .\#product-card-media::before,
.\#product-card.\@tbb-polaroid:active .\#product-card-media::before,
.\#product-card.\@tbb-polaroid:focus-within .\#product-card-media::before {
background: transparent !important;
}
/* Quick-view and media-alt fade-ins are also hover-driven by Diffusion
base CSS — keep them hidden on touch since they require hover intent. */
.\#product-card:hover .\#product-card-quick-view,
.\#product-card:hover .\#product-card-media-alt {
opacity: 0 !important;
pointer-events: none !important;
}
/* Boost cards — same lift+rotate+scale at .boost-sd__product-item:hover.
Different class names from Diffusion, same UX problem on touch. */
body .boost-sd__product-item:hover .boost-sd__product-image-wrapper,
body .boost-sd__product-item:active .boost-sd__product-image-wrapper,
body .boost-sd__product-item:focus-within .boost-sd__product-image-wrapper {
transform: none !important;
}
}
/* ============================================================
QIKIFY SMART MENU — product grid skin
The "Throwback Collections" mega menu (Qikify tmenu) optionally
shows product cards at the bottom of each column. By default
they render at the source image's native dimensions (~600×700px)
with no styling — too big, no polaroid feel, doesn't match the
rest of the site.
Scope: ALL styling here is prefixed with `.tmenu_app` so it can
never leak outside the Qikify menu. Inherits font + colors from
the panel-level settings (mono body, white text, dark bg, pink
price already set in the app's color tokens).
What this rule does:
- Caps card image at a tile-friendly square aspect
- Adds the white polaroid frame + soft drop-shadow used sitewide
- Sets the title in mono, white, line-clamped to 2 lines
- Pink price in mono, matches PDP/auction price treatment
- Compact column gutters
============================================================ */
.tmenu_app .tmenu_product {
max-width: 200px;
margin: 0 auto;
background: #ffffff;
padding: 0.5rem 0.5rem 0.75rem;
border-radius: 2px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tmenu_app .tmenu_product-top {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #ffffff;
margin-bottom: 0.5rem;
}
.tmenu_app .tmenu_product-top img,
.tmenu_app .tmenu_product img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
.tmenu_app .tmenu_product_body {
text-align: center;
padding: 0 0.25rem;
}
.tmenu_app .tmenu_product_title {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 12px;
line-height: 1.3;
color: #1a1a2e; /* dark navy on white polaroid card */
font-weight: 600;
letter-spacing: -0.01em;
text-transform: none;
margin: 0 0 0.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tmenu_app .tmenu_product_price {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 14px;
font-weight: 700;
color: #fe8aed; /* TBB brand pink — matches PDP/auction price */
letter-spacing: -0.5px;
margin: 0;
}
/* Compare-at strikethrough — sitewide rule per design system */
.tmenu_app .tmenu_product_price s,
.tmenu_app .tmenu_product_price del,
.tmenu_app .tmenu_product_price [class*="compare"] {
text-decoration: line-through !important;
opacity: 0.6;
}
/* Hover lift — desktop mouse only (touch handled by sitewide hover:none rule) */
@media (hover: hover) {
.tmenu_app .tmenu_product:hover {
transform: translateY(-2px) rotate(-1deg);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
}
/* Tighter column gap when product cards are present */
.tmenu_app .tmenu_item_submenu_type_automatic .tmenu_submenu {
gap: 0.75rem !important;
}
/* Column headers (level 1 — "Throwback Playground", "Throwback Gaming",
etc.) in brand cyan to differentiate from the white items below.
Wins against the app's panel-set text color via !important. */
.tmenu_app .tmenu_item_level_1 > .tmenu_item_link > .tmenu_item_text,
.tmenu_app .tmenu_item_level_1 > .tmenu_item_link {
color: #8de0f4 !important;
}
/* Top-level nav links (the trigger row in the cyan header bar — e.g.
"Throwback Collections", "Nostalgia Auctions" rendered by Qikify).
Qikify's default is 14px / #333 which is too small and unreadable
on cyan. Restore TBB header link treatment: 16px, dark navy text
(matches existing nav contrast on cyan), mono font, slight bold. */
.tmenu_app .tmenu_item_level_0 > .tmenu_item_link,
.tmenu_app .tmenu_item_level_0 > .tmenu_item_link > .tmenu_item_text {
font-size: 16px !important;
color: #1a1a2e !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
/* Hover state on top-level nav links — purple accent matches sitewide
hover convention. */
.tmenu_app .tmenu_item_level_0 > .tmenu_item_link:hover,
.tmenu_app .tmenu_item_level_0 > .tmenu_item_link:hover > .tmenu_item_text {
color: #9c01ff !important;
}
/* ============================================================
QIKIFY INSIDE MOBILE HAMBURGER — match native drawer typography
On desktop, Qikify items get bespoke styling (cyan column headers,
uppercase, etc.). On mobile they should look identical to the
native drawer items (e.g. "Nostalgia Auctions") so the menu reads
as one cohesive list, not two visually-different blocks.
These overrides scope to the hamburger drawer only — desktop mega
menu styling above this block is untouched.
============================================================ */
/* Typography match for Qikify items inside the mobile drawer.
Targets only the link text — no `*` wildcard, no submenu/item-level
resets that could fight Qikify's own visibility logic. */
.\#main-navigation-mobile-drawer .tmenu_item_link,
.\#main-navigation-mobile-drawer .tmenu_item_text {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !important;
color: #ffffff !important;
font-size: 16px !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
/* ============================================================
QIKIFY MENU INSIDE TBB MOBILE HAMBURGER
The bridge script (tbb-mobile-menu-bridge.js) clones Qikify's
mega submenu into the hamburger drawer's mount point. The cloned
instance gets `.tbb-qikify-cloned` so we can scope styles ONLY
to the in-drawer copy without affecting Qikify's desktop dropdown.
Goals:
- Mega columns → vertical stack (single-column accordion)
- Inherit drawer typography (mono, white) and tokens
- Hide product cards on mobile (no room, drawer is narrow)
- Brand cyan column headers (already cascading from the global
.tmenu_item_level_1 rule above)
============================================================ */
.tbb-drawer-qikify-mount {
width: 100%;
}
/* Collapsible "Throwback Collections" parent — looks like a native
drawer item (label + chevron), expands to reveal the menu. Matches
the visual pattern of the drawer's other lvl0 nav links. */
.tbb-qikify-collapsible {
display: block;
border: 0;
margin: 0;
padding: 0;
}
.tbb-qikify-collapsible-summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.875rem 1rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-size: 16.8px;
font-weight: 700;
line-height: 1.4;
letter-spacing: normal;
color: #ffffff;
cursor: pointer;
list-style: none;
}
.tbb-qikify-collapsible-summary::-webkit-details-marker { display: none; }
.tbb-qikify-collapsible-summary::after {
content: '';
display: inline-block;
width: 8px; height: 8px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: rotate(-45deg);
transition: transform 0.2s ease;
margin-right: 0.25rem;
}
.tbb-qikify-collapsible[open] > .tbb-qikify-collapsible-summary::after {
transform: rotate(45deg);
}
/* Cloned Qikify root — flatten to vertical block. Use !important and
broad selectors to defeat any Qikify CSS that sets grid/flex. */
.tbb-qikify-cloned,
.tbb-qikify-cloned.tmenu_submenu_type_mega {
display: block !important;
position: static !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
transform: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
grid-template-columns: 1fr !important;
list-style: none !important;
}
/* Each column → full-width stacked block with subtle divider */
.tbb-qikify-cloned > .tmenu_item,
.tbb-qikify-cloned .tmenu_item.tmenu_col {
display: block !important;
width: 100% !important;
max-width: none !important;
flex: none !important;
padding: 0.625rem 1rem !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid rgba(141, 224, 244, 0.12) !important;
background: transparent !important;
}
.tbb-qikify-cloned > .tmenu_item:last-child,
.tbb-qikify-cloned .tmenu_item.tmenu_col:last-child {
border-bottom: 0 !important;
}
/* Column header (level 1 — "Throwback Playground" etc.) → CYAN, mono,
uppercase. Selector broad enough to win against Qikify's panel-
set color and Diffusion theme inheritance. */
.tbb-qikify-cloned .tmenu_item_level_1 > .tmenu_item_link,
.tbb-qikify-cloned .tmenu_item_level_1 > .tmenu_item_link > .tmenu_item_text,
.tbb-qikify-cloned .tmenu_item_level_1 > a,
.tbb-qikify-cloned .tmenu_item_level_1 > a > * {
color: #8de0f4 !important;
display: block !important;
padding: 0.375rem 0 !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
background: transparent !important;
}
/* Items (level 2) — white, mono, indented from the column header */
.tbb-qikify-cloned .tmenu_item_level_2 > .tmenu_item_link,
.tbb-qikify-cloned .tmenu_item_level_2 > .tmenu_item_link > .tmenu_item_text,
.tbb-qikify-cloned .tmenu_item_level_2 > a {
color: #ffffff !important;
display: block !important;
padding: 0.375rem 0 0.375rem 0.75rem !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace !important;
font-size: 13px !important;
font-weight: 400 !important;
text-transform: none !important;
background: transparent !important;
}
/* Inner submenus (sub-lists inside columns) → flow vertically, no popup */
.tbb-qikify-cloned .tmenu_submenu,
.tbb-qikify-cloned ul.tmenu_submenu {
position: static !important;
display: block !important;
width: 100% !important;
height: auto !important;
visibility: visible !important;
opacity: 1 !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
transform: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
grid-template-columns: 1fr !important;
}
/* Hide product cards inside the drawer — no room in a narrow side panel */
.tbb-qikify-cloned .tmenu_product,
.tbb-qikify-cloned .tmenu_product-top,
.tbb-qikify-cloned .tmenu_product_body,
.tbb-qikify-cloned .tmenu_item_submenu_type_automatic .tmenu_item {
display: none !important;
}
/* Hide per-column background images — designed for desktop only */
.tbb-qikify-cloned .tmenu_item_background_image,
.tbb-qikify-cloned [class*="background_image"],
.tbb-qikify-cloned [class*="background-image"] {
display: none !important;
background: transparent !important;
background-image: none !important;
}
/* =========================================================================
TBB 2026 — Design System parity pass (session 30, 2026-04-30)
Brings stragglers (404, page/blog/search headers, footer, password,
customer account) into the new shell + mono-first treatment.
Skipped: seller-header-shell + top8-shell already styled (~L2893, L3103).
========================================================================= */
/* ---- GAP 1: 404 page (templates/404.json — d_rich-text is active) ---- */
body.template--404 [id^="shopify-section-"] > .\#section-body {
max-width: 1240px;
margin: 2rem auto !important;
padding: 1.5rem 1rem !important;
border: 4px solid var(--tbb-border-color, #9c01ff);
border-radius: 8px;
box-shadow: 0 0 20px var(--tbb-border-glow, rgba(156, 1, 255, 0.30));
background: rgba(15, 15, 30, 0.95) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-sizing: border-box;
}
@media (max-width: 767px) {
body.template--404 [id^="shopify-section-"] > .\#section-body {
margin: 1.5rem 0.5rem !important;
padding: 1rem 0.5rem !important;
}
}
/* ---- GAPS 2–4: Header sections on blog / page / search templates.
These template body classes get the auto-shell on any section that
contains a heading. Skip g_header / g_footer / cart / newsletter
(they render fixed in their own areas, not in the body flow). ---- */
body.template--blog [id^="shopify-section-template"] > .\#section-body,
body.template--page [id^="shopify-section-template"] > .\#section-body,
body.template--search [id^="shopify-section-template"] > .\#section-body,
body.template--article [id^="shopify-section-template"] > .\#section-body,
body.template--list-collections [id^="shopify-section-template"] > .\#section-body {
max-width: 1240px;
margin: 2rem auto !important;
padding: 1.5rem 1rem !important;
border: 4px solid var(--tbb-border-color, #9c01ff);
border-radius: 8px;
box-shadow: 0 0 20px var(--tbb-border-glow, rgba(156, 1, 255, 0.30));
background: rgba(15, 15, 30, 0.95) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-sizing: border-box;
}
@media (max-width: 767px) {
body.template--blog [id^="shopify-section-template"] > .\#section-body,
body.template--page [id^="shopify-section-template"] > .\#section-body,
body.template--search [id^="shopify-section-template"] > .\#section-body,
body.template--article [id^="shopify-section-template"] > .\#section-body,
body.template--list-collections [id^="shopify-section-template"] > .\#section-body {
margin: 1.5rem 0.5rem !important;
padding: 1rem 0.5rem !important;
}
}
/* Mono-first heading treatment for headings inside any auto-shelled
section (404, blog, page, search, article, list-collections). */
body.template--404 [id^="shopify-section-"] h1,
body.template--404 [id^="shopify-section-"] h2,
body.template--blog [id^="shopify-section-template"] h1,
body.template--blog [id^="shopify-section-template"] h2,
body.template--page [id^="shopify-section-template"] h1,
body.template--page [id^="shopify-section-template"] h2,
body.template--search [id^="shopify-section-template"] h1,
body.template--search [id^="shopify-section-template"] h2,
body.template--article [id^="shopify-section-template"] h1,
body.template--article [id^="shopify-section-template"] h2,
body.template--list-collections [id^="shopify-section-template"] h1,
body.template--list-collections [id^="shopify-section-template"] h2 {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: #ffffff !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
/* ---- GAP 10 (newly surfaced): Shopify-rendered policy pages
(e.g. /policies/terms-of-service). Uses .shopify-policy__container,
sits outside the Shopify section system. ---- */
.shopify-policy__container {
max-width: 1240px !important;
margin: 2rem auto !important;
padding: 1.5rem 1rem !important;
border: 4px solid var(--tbb-border-color, #9c01ff);
border-radius: 8px;
box-shadow: 0 0 20px var(--tbb-border-glow, rgba(156, 1, 255, 0.30));
background: rgba(15, 15, 30, 0.95) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-sizing: border-box;
color: #ffffff;
}
.shopify-policy__title h1,
.shopify-policy__container h1,
.shopify-policy__container h2,
.shopify-policy__container h3 {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: #ffffff !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
.shopify-policy__body,
.shopify-policy__body .rte,
.shopify-policy__body .rte p,
.shopify-policy__body .rte li {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: rgba(255, 255, 255, 0.85);
}
.shopify-policy__body .rte a {
color: #fe8aed;
}
@media (max-width: 767px) {
.shopify-policy__container {
margin: 1.5rem 0.5rem !important;
padding: 1rem 0.5rem !important;
}
}
/* ---- Body-text default inside any branded shell ----
Anything sitting inside the dark shell on these auto-shelled templates
should default to white. Catches paragraphs, list items, spans, and
stray rich-text blocks where the section's old custom_css forced black. */
body.template--404 [id^="shopify-section-template"] p,
body.template--404 [id^="shopify-section-template"] li,
body.template--404 [id^="shopify-section-template"] span:not([class*="button"]):not([class*="badge"]),
body.template--404 [id^="shopify-section-template"] .\#hero-text,
body.template--blog [id^="shopify-section-template"] p,
body.template--blog [id^="shopify-section-template"] li,
body.template--blog [id^="shopify-section-template"] .\#hero-text,
body.template--page [id^="shopify-section-template"] p,
body.template--page [id^="shopify-section-template"] li,
body.template--page [id^="shopify-section-template"] .\#hero-text,
body.template--search [id^="shopify-section-template"] p,
body.template--search [id^="shopify-section-template"] li,
body.template--article [id^="shopify-section-template"] p,
body.template--article [id^="shopify-section-template"] li,
body.template--list-collections [id^="shopify-section-template"] p,
body.template--list-collections [id^="shopify-section-template"] li {
color: rgba(255, 255, 255, 0.85) !important;
}
/* ---- SVG icons inside buttons keep their fill (sprite uses currentColor) ----
Fixes empty qty buttons in cart drawer where my earlier `fill: none` killed
the +/- glyphs. */
.\#cart-drawer-product-qty-button svg,
.\#cart-drawer-product-qty-button .\#icon,
button .\#icon {
fill: currentColor !important;
stroke: currentColor !important;
}
/* ---- Buttons: GLOBAL mono font + bevel treatment (sitewide rule, 2026-04-30) ----
Applies to EVERY button-like element on the site. Not just `.#button`.
Memory rule: "Buttons = mono + bevel, NEVER Permanent Marker, EVERYWHERE".
Selector list intentionally broad — picks up cart qty buttons, PDP qty,
form submits, custom widget buttons, etc. */
a.\#button,
button.\#button,
.\#button,
.\#button.heading-font,
a.\#button.heading-font,
button.\#button.heading-font,
.\#cart-drawer-product-qty-button,
.\#product-qty-selector-button,
.\#product-form button[type="submit"],
form.shopify-product-form button[type="submit"],
input[type="submit"]:not([class*="boost"]):not([class*="search"]),
input[type="button"]:not([class*="boost"]):not([class*="search"]) {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
/* Bevel = INSET shadows only. Top highlight + bottom recess.
No outset drop shadow, no float, no Y-translate. Surface stays
flat-positioned; depth lives entirely on the inner edge. */
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.40),
inset 0 -3px 0 rgba(0, 0, 0, 0.45) !important;
transition: box-shadow 80ms ease !important;
border: none !important;
}
a.\#button:hover,
button.\#button:hover,
.\#button:hover,
.\#cart-drawer-product-qty-button:hover,
.\#product-qty-selector-button:hover,
.\#product-form button[type="submit"]:hover,
form.shopify-product-form button[type="submit"]:hover {
/* Brighten the top highlight on hover — no transform, no drop shadow */
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.55),
inset 0 -3px 0 rgba(0, 0, 0, 0.45) !important;
}
a.\#button:active,
button.\#button:active,
.\#button:active,
.\#cart-drawer-product-qty-button:active,
.\#product-qty-selector-button:active,
.\#product-form button[type="submit"]:active,
form.shopify-product-form button[type="submit"]:active {
/* Pressed state — flatten/invert the bevel inward, still no transform */
box-shadow:
inset 0 3px 5px rgba(0, 0, 0, 0.45),
inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
}
/* ---- Strip inline rich-text formatting from product descriptions ----
Sellers often paste formatted text (Google Docs, Word, etc.) into
Shopify's rich text editor. Those inline `style` attrs preserve fonts
and colors that don't match brand (e.g. Google Sans, color #0a0a0a)
and render unreadable on TBB's dark surface. This rule force-resets
font + color on rich-text descendants. Bold/italic markup
(, , font-weight, font-style) is intentionally NOT
touched so emphasis still works. */
.\#product-description,
.\#product-description *,
.\#product-description-content,
.\#product-description-content *,
.rte,
.rte * {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: rgba(255, 255, 255, 0.88) !important;
background-color: transparent !important;
}
/* Allow links inside rich text to keep brand pink */
.\#product-description a,
.\#product-description-content a,
.rte a {
color: #fe8aed !important;
}
/* Headings inside rich text get the heading treatment */
.\#product-description h1, .\#product-description h2, .\#product-description h3,
.\#product-description h4, .\#product-description h5, .\#product-description h6,
.rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 {
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
color: #ffffff !important;
}
/* ============================================================
Cart drawer reskin (sliding cart) — design-system parity pass
============================================================
Surfaces: .#cart-drawer (the entire slide-in panel)
Goals: dark navy backdrop, mono headings, branded pricing,
beveled controls. Replaces the legacy cyan + white treatment.
CSS-only — no liquid changes. */
/* Outer drawer — dark navy bg, mono everything */
.\#cart-drawer {
background: rgba(15, 15, 30, 0.98) !important;
color: #ffffff !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
}
/* Header — transparent so it inherits the dark bg, divider below */
.\#cart-drawer-header {
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.\#cart-drawer-header-inner {
background: transparent !important;
color: #ffffff !important;
}
.\#cart-drawer-heading {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
color: #ffffff !important;
}
.\#cart-drawer-close,
.\#cart-drawer-modal-close,
.\#cart-drawer-cart-link {
color: #ffffff !important;
}
.\#cart-drawer-close svg,
.\#cart-drawer-modal-close svg,
.\#cart-drawer-cart-link svg {
stroke: #ffffff !important;
fill: none !important;
}
/* Body — transparent (inherits drawer bg) */
.\#cart-drawer-body {
background: transparent !important;
color: #ffffff !important;
}
/* The actual cart line item is `.#product-card-min` (shared mini-card snippet,
NOT `.#cart-drawer-product` which is just an outer wrapper). Targeting the
real white card here, scoped to inside the cart drawer so we don't affect
other places `.#product-card-min` may be used. */
.\#cart-drawer .\#product-card-min,
.\#cart-drawer-products .\#product-card-min,
.\#cart-drawer .\#cart-drawer-product,
.\#cart-drawer-products .\#cart-drawer-product {
background: rgba(20, 20, 40, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
border-radius: 8px !important;
padding: 0.75rem !important;
margin-bottom: 0.75rem !important;
color: #ffffff !important;
box-shadow: none !important;
/* Fixed minimum height so cards don't vary by image aspect */
min-height: 130px !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
/* Header of the cart drawer also renders white via `.shadow-1` — kill that */
.\#cart-drawer .\#cart-drawer-header,
.\#cart-drawer .\#cart-drawer-header.shadow-1,
.\#cart-drawer-header.shadow-1 {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Free-shipping progress bar — white track replaced with subtle white */
.\#cart-drawer .\#free-shipping-progress-bar-progress,
.\#free-shipping-progress-bar-progress {
background: rgba(255, 255, 255, 0.15) !important;
}
/* Constrain the thumbnail inside the line item to a fixed box */
.\#cart-drawer .\#product-card-min img,
.\#cart-drawer .\#product-card-min picture,
.\#cart-drawer-product img,
.\#cart-drawer-product picture,
.\#cart-drawer-product .\#cart-drawer-product-image {
width: 90px !important;
height: 110px !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
/* Info column flexes to fill remaining width and uses white mono text */
.\#cart-drawer .\#product-card-min-info,
.\#cart-drawer .\#product-card-min-info *,
.\#cart-drawer-product-info {
flex: 1 1 auto !important;
min-width: 0 !important;
color: #ffffff !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
}
.\#cart-drawer .\#product-card-min-info [class*="price"],
.\#cart-drawer .\#product-card-min [class*="price"] {
color: #fe8aed !important;
font-weight: 700 !important;
}
/* Polaroid-style frame on the product thumbnail inside the drawer */
.\#cart-drawer-product img {
background: #ffffff !important;
padding: 6px 6px 18px 6px !important;
border-radius: 2px !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35) !important;
}
/* Product info — white mono text, pink price */
.\#cart-drawer-product-info,
.\#cart-drawer-product-info * {
color: #ffffff !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
}
.\#cart-drawer-product-info [class*="price"],
.\#cart-drawer-product-info .price {
color: #fe8aed !important;
font-weight: 700 !important;
}
/* Quantity adjuster — beveled pill buttons, brand purple */
.\#cart-drawer-product-qty {
background: transparent !important;
color: #ffffff !important;
}
.\#cart-drawer-product-qty-button {
background: var(--tbb-border-color, #9c01ff) !important;
color: #ffffff !important;
border: none !important;
border-radius: 4px !important;
width: 28px !important;
height: 28px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
0 1px 0 rgba(0, 0, 0, 0.25) !important;
transition: transform 80ms ease !important;
}
.\#cart-drawer-product-qty-button:hover {
transform: translateY(-1px);
}
.\#cart-drawer-product-qty-button:active {
transform: translateY(1px);
}
.\#cart-drawer-product-qty-button svg {
stroke: #ffffff !important;
fill: none !important;
}
.\#cart-drawer-product-qty-adjust input,
.\#cart-drawer-product-qty input {
color: #ffffff !important;
background: transparent !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
font-weight: 700 !important;
}
.\#cart-drawer-product-qty-max-note {
color: rgba(255, 255, 255, 0.6) !important;
}
/* Remove (X) button */
.\#cart-drawer-product-remove {
color: rgba(255, 255, 255, 0.6) !important;
}
.\#cart-drawer-product-remove:hover {
color: #fe8aed !important;
}
.\#cart-drawer-product-remove svg {
stroke: currentColor !important;
}
/* Subtotal block — divider + mono labels + pink price */
.\#cart-drawer-subtotal {
background: transparent !important;
border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
padding-top: 1rem !important;
}
.\#cart-drawer-subtotal-item {
background: transparent !important;
color: #ffffff !important;
}
.\#cart-drawer-subtotal-item-title {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: #ffffff !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
.\#cart-drawer-subtotal-item-price {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: #fe8aed !important;
font-weight: 700 !important;
}
.\#cart-drawer-subtotal-item-spacer {
border-bottom: 1px dashed rgba(255, 255, 255, 0.25) !important;
}
.\#cart-drawer-subtotal-tax-note {
color: rgba(255, 255, 255, 0.6) !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
}
/* Free shipping progress bar */
.\#cart-drawer-block .\#free-shipping-progress-bar,
.\#cart-drawer .\#free-shipping-progress-bar {
background: rgba(255, 255, 255, 0.15) !important;
}
.\#cart-drawer-block .\#free-shipping-progress-bar-fill,
.\#cart-drawer .\#free-shipping-progress-bar-fill {
background: var(--tbb-border-color, #9c01ff) !important;
}
/* Empty state */
.\#cart-drawer-empty {
color: rgba(255, 255, 255, 0.85) !important;
}
.\#cart-drawer-empty .\#splash-msg,
.\#cart-drawer-empty p {
color: rgba(255, 255, 255, 0.85) !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
}
/* Cart link button (if rendered as text link) */
.\#cart-drawer-cart-link {
color: #fe8aed !important;
text-decoration: none !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
font-weight: 700 !important;
}
/* ---- GAP 7: Footer — mono typography + design system shell (global) ---- */
.\#footer .\#footer-heading,
.\#footer .heading-font,
.\#footer .\#footer-menu,
.\#footer .\#footer-menu a,
.\#footer .\#footer-menu a.reset-link,
.\#footer p,
.\#footer label,
.\#footer span,
.\#footer .form-label {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
}
.\#footer .\#footer-heading,
.\#footer h3.heading-font {
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
/* Footer text + headings flipped white globally (was black on template
pages, default-dark elsewhere — both wrong against the new dark shell). */
.\#footer,
.\#footer p,
.\#footer span,
.\#footer label,
.\#footer .form-label,
.\#footer .\#footer-menu,
.\#footer .\#footer-menu a,
.\#footer .\#footer-menu a.reset-link {
color: rgba(255, 255, 255, 0.85) !important;
}
.\#footer .\#footer-heading,
.\#footer h2,
.\#footer h3,
.\#footer h3.heading-font,
.\#footer h4 {
color: #ffffff !important;
}
/* Shelled footer — applied globally, not scoped to template pages. */
[id^="shopify-section-"][id*="g_footer"] > .\#section-body {
max-width: 1240px;
margin: 2rem auto !important;
padding: 1.5rem 1rem !important;
border: 4px solid var(--tbb-border-color, #9c01ff);
border-radius: 8px;
box-shadow: 0 0 20px var(--tbb-border-glow, rgba(156, 1, 255, 0.30));
background: rgba(15, 15, 30, 0.95) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-sizing: border-box;
}
@media (max-width: 767px) {
[id^="shopify-section-"][id*="g_footer"] > .\#section-body {
margin: 1.5rem 0.5rem !important;
padding: 1rem 0.5rem !important;
}
}
/* ---- 404 page — kill the gap below content ----
Diffusion's has min-height: 100vh to keep the footer pinned at
the viewport bottom. On 404 the content is short and that pads out a
large empty area between shell and footer. Drop the min-height. */
body.template--404 main,
body.template--404 .content-for-layout {
min-height: auto !important;
}
/* ---- GAP 8: Password page (s_password.liquid → .#password) ---- */
[id^="shopify-section-"]:has(> .\#password) .\#section-body,
[id^="shopify-section-"]:has(> .\#password) > .\#password {
max-width: 1240px;
margin: 2rem auto !important;
padding: 1rem;
border: 4px solid var(--tbb-border-color, #9c01ff);
border-radius: 8px;
box-shadow: 0 0 20px var(--tbb-border-glow, rgba(156, 1, 255, 0.30));
background: rgba(15, 15, 30, 0.95) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-sizing: border-box;
}
[id^="shopify-section-"]:has(> .\#password) h1,
[id^="shopify-section-"]:has(> .\#password) h2,
[id^="shopify-section-"]:has(> .\#password) .\#hero-heading {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: #ffffff !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
@media (max-width: 767px) {
[id^="shopify-section-"]:has(> .\#password) .\#section-body,
[id^="shopify-section-"]:has(> .\#password) > .\#password {
margin: 1.5rem 0.5rem !important;
padding: 0.75rem 0.5rem !important;
}
}
/* ---- GAP 9: Customer account (s_customer-account.liquid → .#customer-account) ---- */
[id^="shopify-section-"]:has(> .\#customer-account) .\#section-body,
[id^="shopify-section-"]:has(> .\#customer-account) > .\#customer-account {
max-width: 1240px;
margin: 2rem auto !important;
padding: 1rem;
border: 4px solid var(--tbb-border-color, #9c01ff);
border-radius: 8px;
box-shadow: 0 0 20px var(--tbb-border-glow, rgba(156, 1, 255, 0.30));
background: rgba(15, 15, 30, 0.95) !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-sizing: border-box;
}
[id^="shopify-section-"]:has(> .\#customer-account) h1,
[id^="shopify-section-"]:has(> .\#customer-account) h2,
[id^="shopify-section-"]:has(> .\#customer-account) th,
[id^="shopify-section-"]:has(> .\#customer-account) caption {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !important;
color: #ffffff !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
@media (max-width: 767px) {
[id^="shopify-section-"]:has(> .\#customer-account) .\#section-body,
[id^="shopify-section-"]:has(> .\#customer-account) > .\#customer-account {
margin: 1.5rem 0.5rem !important;
padding: 0.75rem 0.5rem !important;
}
}
/* ---- Footer: kill Diffusion's redundant divider + 64px padding ----
Diffusion's stock footer (assets/footer.css line 1-5) renders with:
padding-top: 4rem;
border-top: 3px solid var(--border-color);
The 64px padding was breathing room BELOW that border-line divider.
In TBB our purple-bordered shell already provides the visual
separation, so the Diffusion border-top + padding are now redundant
and create the empty band complaint. Strip both. */
.\#footer {
padding-top: 8px !important;
border-top: none !important;
}