/** Shopify CDN: Minification failed
Line 1147:0 Unexpected bad string token
Line 1147:14 Unterminated string token
**/
/* ============================================================
WEST BLUE COLLECTIBLES — Ocean Design System
============================================================ */
:root {
/* Ocean palette — one family, three depths */
--wb-bg: #ffffff; /* white page background */
--wb-sand: #c8b89a; /* warm sand — footer background */
--gradient-background: #ffffff; /* override Dawn's body background variable */
--wb-surface: #ffffff; /* white caps */
--wb-surface-2: #f0f9ff; /* shallow water */
--wb-surface-3: #bae6fd; /* light ocean */
--wb-ocean: #0369a1; /* mid ocean (footer, trust, dark sections) */
--wb-ocean-deep: #0c4a6e; /* deep ocean */
--wb-accent: #0ea5e9; /* surface blue -- DECORATIVE ONLY (hero gradient, borders,
hovers, focus rings). White text on it is 2.77:1 and fails AA. */
--wb-accent-strong:#0369A1; /* the same blue at AA depth: white on it is 5.93:1, and it is
5.93:1 as text on white. Use this anywhere text meets the blue
(2026-09-02 audit, UX M1). */
--wb-accent-light: #38bdf8; /* bright sky */
--wb-accent-dark: #0284c7; /* deeper accent */
--wb-text: #0c1a26; /* near-black with blue tint */
--wb-text-muted: #334e68;
--wb-text-dim: #46738e; /* AA on white at small sizes (5.1:1) */
--wb-border: #bae6fd;
--wb-radius: 0.8rem;
--wb-radius-sm: 0.5rem;
--wb-radius-xs: 0.3rem;
--wb-font-heading: 'Permanent Marker', sans-serif;
--wb-font-body: 'M PLUS Rounded 1c', sans-serif;
--wb-font-display: 'Permanent Marker', sans-serif;
--wb-ease: 0.2s ease;
--wb-shadow: 0 4px 20px rgba(3, 105, 161, 0.15);
--wb-shadow-sm: 0 2px 8px rgba(3, 105, 161, 0.08);
--wb-shadow-card: 0 1px 3px rgba(3, 105, 161, 0.1), 0 4px 12px rgba(3, 105, 161, 0.08);
/* Sand texture. layout/theme.liquid overrides this with the versioned asset_url so the
and the CSS request the SAME url; without that the texture was
downloaded twice on every page (2026-09-02 audit, UX L2). This relative fallback keeps
layouts that do not set it (password page) working. */
--wb-sand-texture: url('sand-texture.png');
}
/* ============================================================
Base
============================================================ */
html,
body,
body.gradient {
background: var(--wb-bg) !important;
background-color: var(--wb-bg) !important;
color: var(--wb-text) !important;
font-family: var(--wb-font-body) !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--wb-font-heading) !important;
color: var(--wb-text);
font-weight: 400;
line-height: 1.2;
}
p { color: var(--wb-text-muted); line-height: 1.7; }
a { color: var(--wb-accent-strong); transition: color var(--wb-ease); }
a:hover { color: var(--wb-ocean-deep) !important; }
.skip-to-content-link:focus { background-color: var(--wb-ocean); color: #fff; }
/* ============================================================
Header
============================================================ */
.wb-header {
position: sticky;
top: 0;
z-index: 100;
/* Was --wb-accent: white nav links measured 2.64:1 on it. --wb-accent-strong takes
every white-on-blue item in the header (nav links, Request a Manga, search, icons)
to 5.93:1 in one move. */
background: var(--wb-accent-strong);
border-bottom: 1px solid #075985;
box-shadow: 0 2px 12px rgba(3, 105, 161, 0.25);
}
.template-index .wb-header,
.template-collection .wb-header,
.template-blog .wb-header,
.template-article .wb-header { border-bottom: none; }
.wb-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: var(--page-width);
margin: 0 auto;
padding: 0 2rem;
height: 6.4rem;
gap: 1.6rem;
}
.wb-header__inner > nav {
display: flex;
justify-content: center;
}
.wb-header__logo {
flex-shrink: 0;
text-decoration: none;
display: flex;
align-items: center;
}
.wb-header__logo img { height: 5.6rem; width: auto; display: block; }
/* Nav */
.wb-nav {
display: flex !important;
align-items: center;
gap: 0.2rem;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
opacity: 1 !important;
}
.wb-nav__item {
position: relative;
}
/* Invisible bridge covers the gap between nav link and dropdown */
.wb-nav__item::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 1rem;
}
.wb-nav__link {
display: flex !important;
align-items: center;
gap: 0.4rem;
padding: 0.7rem 1.1rem;
color: rgba(255, 255, 255, 0.95) !important;
text-decoration: none !important;
font-size: 1.4rem;
font-weight: 700 !important;
letter-spacing: 0.01em;
border-radius: var(--wb-radius-xs);
transition: color var(--wb-ease), background-color var(--wb-ease);
white-space: nowrap;
font-family: var(--wb-font-body) !important;
visibility: visible !important;
opacity: 1 !important;
}
.wb-nav__link:hover {
color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.15);
}
.wb-nav__link svg {
width: 1.1rem; height: 1.1rem; fill: currentColor;
transition: transform var(--wb-ease);
}
.wb-nav__item:hover .wb-nav__link svg,
.wb-nav__item:focus-within .wb-nav__link svg { transform: rotate(180deg); }
/* Dropdown */
.wb-dropdown {
position: absolute;
top: calc(100% + 0.6rem);
left: 50%;
transform: translateX(-50%) translateY(-0.6rem);
background-color: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-radius-sm);
padding: 0.6rem;
min-width: 22rem;
box-shadow: var(--wb-shadow);
opacity: 0;
visibility: hidden;
transition: opacity var(--wb-ease), visibility var(--wb-ease), transform var(--wb-ease);
pointer-events: none;
z-index: 200;
list-style: none;
}
.wb-nav__item:hover .wb-dropdown,
.wb-nav__item:focus-within .wb-dropdown {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
.wb-dropdown__link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.2rem;
color: var(--wb-text) !important;
text-decoration: none !important;
font-size: 1.4rem;
font-family: var(--wb-font-body);
border-radius: var(--wb-radius-xs);
transition: background-color var(--wb-ease), color var(--wb-ease);
}
.wb-dropdown__link:hover {
background-color: var(--wb-surface-2);
color: var(--wb-accent-strong) !important;
}
.wb-dropdown__flag { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
/* Header actions */
.wb-header__actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.wb-icon-btn {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 4rem; height: 4rem;
background: none; border: none;
border-radius: var(--wb-radius-xs);
color: rgba(255, 255, 255, 0.85);
cursor: pointer;
transition: color var(--wb-ease), background-color var(--wb-ease);
text-decoration: none; padding: 0;
}
.wb-icon-btn:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.15);
}
.wb-icon-btn svg { width: 2rem; height: 2rem; display: block; }
.wb-nav__link--actions {
padding: 0.6rem 1rem;
font-size: 1.3rem;
}
.wb-cart-bubble {
position: absolute;
top: 0.4rem; right: 0.4rem;
min-width: 1.8rem; height: 1.8rem;
background-color: var(--wb-surface);
color: var(--wb-accent-strong);
font-size: 1.2rem; font-weight: 700; /* was 1rem (audit UX M5) */
border-radius: 10rem;
display: flex; align-items: center; justify-content: center;
padding: 0 0.3rem; line-height: 1;
font-family: var(--wb-font-body);
}
/* Search */
.wb-search {
position: relative;
display: flex;
align-items: center;
}
.wb-search__form {
display: flex;
align-items: center;
border-radius: var(--wb-radius-xs);
overflow: visible;
}
.wb-search__form {
background-color: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
border-radius: var(--wb-radius-xs);
overflow: hidden;
}
.wb-search__input {
background: none !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
color: #ffffff !important;
font-family: var(--wb-font-body) !important;
font-size: 1.4rem !important;
padding: 0.7rem 0.8rem 0.7rem 1.2rem !important;
width: 20rem;
border-radius: 0 !important;
}
.wb-search__input::placeholder { color: rgba(255,255,255,0.85); }
.wb-search__submit {
flex-shrink: 0;
width: 4rem;
height: 4rem;
}
/* Hamburger */
.wb-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 4rem; height: 4rem;
background: none; border: none;
cursor: pointer;
padding: 0.8rem;
border-radius: var(--wb-radius-xs);
flex-shrink: 0;
}
.wb-hamburger span {
display: block; width: 100%; height: 2px;
background-color: rgba(255, 255, 255, 0.92);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.wb-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wb-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.wb-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile nav */
.wb-mobile-nav {
position: fixed; inset: 0; z-index: 300; visibility: hidden;
}
.wb-mobile-nav__overlay {
position: absolute; inset: 0;
background-color: rgba(12, 74, 110, 0.55);
opacity: 0; transition: opacity 0.3s ease;
}
.wb-mobile-nav__panel {
position: absolute; top: 0; left: 0; bottom: 0;
width: 32rem; max-width: 90vw;
background: linear-gradient(180deg, var(--wb-accent) 0%, var(--wb-ocean) 100%);
border-right: 1px solid var(--wb-accent-dark);
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease;
display: flex; flex-direction: column;
padding: 2rem; gap: 0.4rem;
}
.wb-mobile-nav.is-open { visibility: visible; }
.wb-mobile-nav.is-open .wb-mobile-nav__overlay { opacity: 1; }
.wb-mobile-nav.is-open .wb-mobile-nav__panel { transform: translateX(0); }
.wb-mobile-nav__close { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 1.2rem; }
.wb-mobile-nav__link {
display: block; padding: 1.1rem 1.2rem;
font-size: 1.6rem; font-weight: 700;
color: rgba(255, 255, 255, 0.92) !important;
text-decoration: none !important;
border-radius: var(--wb-radius-xs);
font-family: var(--wb-font-body);
transition: background-color var(--wb-ease), color var(--wb-ease);
}
.wb-mobile-nav__link:hover { background-color: rgba(255,255,255,0.12); color: #fff !important; }
.wb-mobile-nav__sublabel {
padding: 1.2rem 1.2rem 0.4rem;
font-size: 1.1rem; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
.wb-mobile-nav__sublink {
display: flex; align-items: center; gap: 0.8rem;
padding: 0.9rem 1.2rem 0.9rem 2rem;
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.78) !important;
text-decoration: none !important;
border-radius: var(--wb-radius-xs);
font-family: var(--wb-font-body);
transition: background-color var(--wb-ease), color var(--wb-ease);
}
.wb-mobile-nav__sublink:hover { background-color: rgba(255,255,255,0.12); color: #fff !important; }
.wb-mobile-nav__divider { height: 1px; background-color: rgba(255,255,255,0.15); margin: 0.8rem 0; }
/* ============================================================
Hero (smaller — lets categories peek above the fold)
============================================================ */
.wb-hero {
/* ONE PROPORTIONAL SCENE. Sprite positions are % of a CENTERED stage
box (same centering as the text column), sprite sizes scale off
--wb-stage, and the hero's height is a fixed ratio of that same
stage — never the window height. So the whole composition scales
together like a single image: identical at every viewport width,
frozen above 1760px. Don't reintroduce vh into the height or
per-width sprite patches; that's what made the hero look different
on every monitor. */
--wb-stage-box: min(100vw, 1760px);
--wb-stage: var(--wb-stage-box);
position: relative;
width: 100%;
min-height: max(380px, calc(var(--wb-stage-box) * 0.36));
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(to top, var(--wb-ocean-deep) 0%, var(--wb-accent) 100%);
}
.wb-hero__bg { position: absolute; inset: 0; z-index: 0; }
.wb-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.wb-hero__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(12,74,110,0.75) 0%, rgba(14,165,233,0.0) 100%);
z-index: 1;
}
.wb-hero__content {
position: relative; z-index: 2;
max-width: var(--page-width);
margin: 0 auto;
padding: 5rem 2rem;
width: 100%;
display: grid;
grid-template-columns: 55fr 45fr;
gap: 4rem;
align-items: center;
}
.wb-hero__left {
display: flex; flex-direction: column;
/* Keep the headline clear of NAMI — the rightmost of the left-corner
pair (block at 7% left, 140px design width; Robin at 0% sits behind
her). Nami's viewport-left = stage-box offset + 7% of the box; her
width = 140/1440 of --wb-stage. Push the headline right past her
plus a 28px gap. Because both terms freeze above 1760px, this
resolves to a constant there. If Nami's position/size changes,
update the 0.07 / 0.0972 (= 140/1440) factors. */
margin-left: max(0px, calc(
max((100vw - 1760px) / 2, 0px)
+ var(--wb-stage-box) * 0.07
+ var(--wb-stage) * 0.0972
+ 28px
- max((100vw - var(--page-width)) / 2, 0px)
- 2rem
));
}
.wb-hero__right {
display: flex; flex-direction: column;
justify-content: center;
}
.wb-hero__eyebrow {
display: inline-block;
font-size: 1.15rem; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--wb-accent-light);
margin-bottom: 1.2rem;
font-family: var(--wb-font-body);
}
.wb-hero__title {
font-family: var(--wb-font-display) !important;
font-size: clamp(2.8rem, 4.6vw, 5.4rem);
line-height: 1.18;
letter-spacing: 0;
color: #ffffff !important;
margin: 0 0 1.6rem;
max-width: 72rem;
font-weight: 400;
text-shadow: 0 3px 0 rgba(4, 30, 48, 0.35);
}
.wb-hero__title em { font-style: italic; color: var(--wb-accent-light); }
.wb-hero__subtitle {
font-size: clamp(1.5rem, 1.8vw, 1.8rem);
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
margin: 0 0 2.8rem;
max-width: 52rem;
line-height: 1.6;
font-family: var(--wb-font-body);
}
.wb-hero__actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* ---- Ocean life: rising bubbles ---------------------------- */
.wb-hero__bubbles {
position: absolute; inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.wb-hero__bubbles span {
position: absolute;
bottom: -4rem;
border-radius: 50%;
background: radial-gradient(circle at 32% 30%,
rgba(255,255,255,0.55) 0%,
rgba(255,255,255,0.14) 45%,
rgba(255,255,255,0.03) 70%);
box-shadow: inset 0 0 4px rgba(255,255,255,0.35);
opacity: 0;
animation: wb-bubble-rise linear infinite;
}
/* Size, lane, tempo per bubble — slower = bigger = closer */
.wb-hero__bubbles span:nth-child(1) { left: 6%; width: 10px; height: 10px; animation-duration: 11s; animation-delay: -2s; }
.wb-hero__bubbles span:nth-child(2) { left: 14%; width: 18px; height: 18px; animation-duration: 14s; animation-delay: -9s; }
.wb-hero__bubbles span:nth-child(3) { left: 26%; width: 7px; height: 7px; animation-duration: 9s; animation-delay: -4s; }
.wb-hero__bubbles span:nth-child(4) { left: 38%; width: 13px; height: 13px; animation-duration: 12s; animation-delay: -7s; }
.wb-hero__bubbles span:nth-child(5) { left: 47%; width: 8px; height: 8px; animation-duration: 10s; animation-delay: -1s; }
.wb-hero__bubbles span:nth-child(6) { left: 58%; width: 22px; height: 22px; animation-duration: 16s; animation-delay: -11s; }
.wb-hero__bubbles span:nth-child(7) { left: 66%; width: 9px; height: 9px; animation-duration: 9.5s; animation-delay: -6s; }
.wb-hero__bubbles span:nth-child(8) { left: 77%; width: 15px; height: 15px; animation-duration: 13s; animation-delay: -3s; }
.wb-hero__bubbles span:nth-child(9) { left: 86%; width: 11px; height: 11px; animation-duration: 11.5s; animation-delay: -8s; }
.wb-hero__bubbles span:nth-child(10) { left: 94%; width: 6px; height: 6px; animation-duration: 8.5s; animation-delay: -5s; }
@keyframes wb-bubble-rise {
0% { transform: translate(0, 0); opacity: 0; }
8% { opacity: 0.7; }
25% { transform: translate(0.8rem, -16vh); }
50% { transform: translate(-0.6rem, -32vh); opacity: 0.55; }
75% { transform: translate(0.9rem, -48vh); }
92% { opacity: 0.25; }
100% { transform: translate(-0.3rem, -62vh); opacity: 0; }
}
/* ---- Ocean life: floating image (bobbing at the waterline) - */
.wb-hero__stage {
/* Centered box, capped at --wb-stage-box: sprite left-% resolve
against this, not the viewport, so the layout is identical on a
1760px laptop and a 3440px ultrawide. */
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: var(--wb-stage-box);
z-index: 1;
pointer-events: none;
}
.wb-hero__float {
position: absolute;
width: var(--wb-float-w, 200px);
pointer-events: none;
animation: wb-float-bob 7s ease-in-out infinite;
}
.wb-hero__float img {
display: block;
width: 100%;
height: auto;
}
.wb-hero__float-img--flipped { transform: scaleX(-1); }
/* Resting on the sea floor — no bobbing */
.wb-hero__float--static { animation: none; }
/* Formation crossing: swimmers keep their arranged spots relative to
each other and sweep across together (right to left). The fixed
negative delay puts the group exactly at its arranged position on
page load. */
.wb-hero__float--swim {
animation: wb-float-cross 55s linear infinite;
animation-delay: -38s !important;
}
.wb-hero__float--swim-reverse {
animation: wb-float-cross-reverse 80s linear infinite;
animation-delay: -42s !important;
}
@keyframes wb-float-cross {
from { transform: translateX(100vw); }
to { transform: translateX(-42vw); }
}
@keyframes wb-float-cross-reverse {
from { transform: translateX(calc(-100vw - 100%)); }
to { transform: translateX(100vw); }
}
@keyframes wb-float-bob {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-9px) rotate(2.5deg); }
}
@media screen and (max-width: 749px) {
.wb-hero__float--desktop-only { display: none; }
/* Uta rides her turtle bottom-right at a fixed readable size
(the stacked buttons own the left side). */
.wb-hero__float--uta {
--wb-float-w: 94px !important;
left: auto !important;
right: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.wb-hero__bubbles { display: none; }
.wb-hero__float { animation: none !important; }
}
/* Buttons */
.wb-btn {
display: inline-flex; align-items: center; gap: 0.8rem;
padding: 1.2rem 2.4rem;
font-size: 1.45rem; font-weight: 700;
font-family: var(--wb-font-body);
border-radius: 50rem;
text-decoration: none !important;
transition: all var(--wb-ease);
border: 2px solid transparent;
cursor: pointer; white-space: nowrap;
}
.wb-btn::after {
content: '';
display: inline-block;
width: 1.2rem; height: 1.2rem;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 11L11 1M1 1H11V11' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 11L11 1M1 1H11V11' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: contain; mask-size: contain;
}
.wb-btn--primary {
background-color: #ffffff;
color: var(--wb-ocean) !important;
border-color: #ffffff;
}
.wb-btn--primary:hover {
background-color: var(--wb-accent-light);
border-color: var(--wb-accent-light);
color: var(--wb-ocean-deep) !important;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
}
.wb-btn--ghost {
background-color: transparent;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.45);
}
.wb-btn--ghost:hover {
border-color: #ffffff; color: #ffffff !important;
background-color: rgba(255,255,255,0.1);
transform: translateY(-2px);
}
/* ============================================================
Homepage collection names
============================================================ */
.contains-card--collection .card__heading,
.contains-card--collection .card__heading a {
font-size: 2rem !important;
font-weight: 700 !important;
}
/* ============================================================
Homepage blog section — warm paper treatment, Sanji lounging
Gojo (on his infinity turtle) as the guide-section mascot
============================================================ */
body.template-index .section-featured-blog .blog,
body.template-index .blog.color-scheme-4,
body.template-index .blog.color-scheme-4.gradient {
background-color: #fdf9f0 !important;
background-image:
url('wb-mascot-gojo.png'),
linear-gradient(180deg, #fdf9f0 0%, #f5edda 100%) !important;
background-repeat: no-repeat, no-repeat !important;
background-position: right 48px bottom 8px, top left !important;
background-size: 130px auto, 100% 100% !important;
background-attachment: scroll !important;
--color-background: 253,249,240 !important;
--gradient-background: #fdf9f0 !important;
}
/* From 1800px up Gojo moves to the LEFT side gutter (opposite Goku two
bands above, so both page edges get some life). left calc(50% - 813px):
background % offsets resolve against (band width - image width), so the
165px sprite sits a constant ~30px left of the 140rem content column. */
@media screen and (min-width: 1800px) {
body.template-index .section-featured-blog .blog,
body.template-index .blog.color-scheme-4,
body.template-index .blog.color-scheme-4.gradient {
background-position: left calc(50% - 813px) bottom 8px, top left !important;
background-size: 165px auto, 100% 100% !important;
}
}
@media screen and (max-width: 749px) {
body.template-index .blog.color-scheme-4 {
background-size: 82px auto, 100% 100% !important;
background-position: right 12px bottom 8px, top left !important;
/* Cards are full-width on mobile, so give Gojo (82x~105px) his own
empty band below the last card instead of overlapping it */
padding-bottom: 122px !important;
}
}
body.template-index .blog.color-scheme-4 .blog__title,
body.template-index .blog.color-scheme-4 .blog__view-all a {
color: var(--wb-text) !important;
}
/* ============================================================
Trust Strip
============================================================ */
.wb-trust {
background-color: #c8b49a;
background-image: var(--wb-sand-texture);
background-size: 256px 256px;
background-repeat: repeat;
padding: 1.4rem 2rem;
border-top: 2px solid #a8936e;
border-bottom: 2px solid #a8936e;
}
.wb-trust__inner {
max-width: var(--page-width);
margin: 0 auto;
display: flex; align-items: center; justify-content: center;
flex-wrap: wrap; gap: 1.6rem 4rem;
}
.wb-trust__item {
display: flex; align-items: center; gap: 0.8rem;
font-size: 1.25rem; font-weight: 700;
color: #3d2810;
font-family: var(--wb-font-body);
white-space: nowrap;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.wb-trust__item svg {
width: 1.7rem; height: 1.7rem;
color: #6b4423; flex-shrink: 0;
}
/* ============================================================
Dawn section overrides — color + headings
============================================================ */
.color-scheme-1 { background-color: var(--wb-bg) !important; }
.color-scheme-2 { background-color: var(--wb-bg) !important; }
.color-scheme-3 { background-color: var(--wb-surface-3) !important; }
.color-scheme-4 {
background: linear-gradient(135deg, var(--wb-ocean-deep) 0%, var(--wb-ocean) 100%) !important;
color: #fff !important;
}
.color-scheme-5 {
background-color: var(--wb-accent) !important;
color: #fff !important;
}
/* Section headings — accent underline */
.title-wrapper .title,
.title-wrapper-with-link .title,
.collection-list__title,
.collection-list-title,
.featured-collection .title,
.featured-blog .title {
font-family: var(--wb-font-heading) !important;
font-weight: 400 !important;
color: var(--wb-text) !important;
position: relative;
display: inline-block;
padding-bottom: 0.6rem;
}
.title-wrapper .title::after,
.title-wrapper-with-link .title::after,
.collection-list__title::after,
.collection-list-title::after,
.featured-collection .title::after,
.featured-blog .title::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 3.6rem; height: 3px;
/* orange: ties headings to the "Collectibles" half of the logo */
background: linear-gradient(90deg, #f97316, #fb923c);
border-radius: 2px;
}
/* Dark section headings and text — scoped to avoid bleeding into white cards */
.color-scheme-4 > .page-width-desktop > .title-wrapper .title,
.color-scheme-4 > .page-width-desktop > .title-wrapper-with-link .title,
.color-scheme-4 .blog__title,
.color-scheme-4 .inline-richtext,
.color-scheme-4 .title-wrapper .title,
.color-scheme-4 .featured-blog__title { color: #ffffff !important; }
.color-scheme-4 .link--text { color: var(--wb-accent-light) !important; }
/* Blog section outer background forced dark — cards inside keep their own scheme */
.blog.color-scheme-4,
.featured-collection.color-scheme-4 {
background: linear-gradient(135deg, var(--wb-ocean-deep) 0%, var(--wb-ocean) 100%) !important;
}
/* Blog cards inside the dark section — keep their text dark on white card bg */
.blog.color-scheme-4 .card__heading,
.blog.color-scheme-4 .card__heading a,
.blog.color-scheme-4 .article-card__excerpt,
.blog.color-scheme-4 .card__information p { color: var(--wb-text) !important; }
/* Shop by Category tiles — narrower on desktop so images are smaller */
@media screen and (min-width: 990px) {
.section-collection-list .collection-list {
max-width: 100rem;
margin-left: auto;
margin-right: auto;
}
}
/* ============================================================
Product & Collection cards — Igloo style
============================================================ */
.card-wrapper,
.card {
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden;
}
/* Cards drift up on hover like they're caught in a current — the one
hover behavior kept from Dawn's set. No motion for reduced-motion. */
.card-wrapper { transition: transform 0.25s ease; }
.card-wrapper .card__media img { transition: transform 0.35s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.card-wrapper:hover { transform: translateY(-6px); }
.card-wrapper:hover .card__media img { transform: scale(1.045); }
.card-wrapper:hover .card {
box-shadow: 0 14px 28px rgba(3, 105, 161, 0.16) !important;
}
}
/* Remove accent top bar */
.card::before { display: none !important; }
/* Kill hover second-image swap (the zoom above stays on the first image) */
.media--hover-effect > img + img { display: none !important; }
.card-wrapper:hover .media--hover-effect > img:first-child { opacity: 1 !important; }
/* Remove Dawn's inner card border */
.card__inner,
.card .card__inner,
.card--standard .card__inner,
.card--card { border: none !important; }
.card__heading a,
.card__heading {
color: var(--wb-text) !important;
font-family: var(--wb-font-body) !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
}
.card__information {
background-color: #f2ede5 !important;
padding: 1.4rem !important;
border-top: none !important;
border-radius: 0 0 10px 10px !important;
}
.price { color: var(--wb-text) !important; }
/* Product count badge — top-left overlay on collection cards */
.wb-collection-badge {
position: absolute;
top: 0.6rem;
left: 0.6rem;
z-index: 2;
}
.wb-collection-badge span {
display: inline-block;
background-color: var(--wb-accent-strong);
color: #ffffff;
font-size: 1.2rem; /* was 1.15rem: 12px minimum (audit UX M5) */
font-weight: 700;
font-family: var(--wb-font-body);
padding: 0.35rem 1.1rem;
border-radius: 1.2rem 1.2rem 0.3rem 0.3rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.price--sale .price-item--sale { color: var(--wb-accent-strong) !important; font-weight: 700 !important; }
.price-item--regular { color: var(--wb-text-muted) !important; }
/* Dawn buttons */
.button {
font-family: var(--wb-font-body) !important;
font-weight: 700 !important;
border-radius: 50rem !important;
transition: all var(--wb-ease) !important;
gap: 0.6rem !important;
}
.button::after { display: none !important; }
.button:not(.button--secondary):not(.button--tertiary) {
background-color: var(--wb-accent-strong) !important;
color: #ffffff !important;
}
.button:not(.button--secondary):not(.button--tertiary):hover {
background-color: #075985 !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
}
.button--secondary {
color: var(--wb-accent-strong) !important;
border-color: var(--wb-accent-strong) !important;
background-color: transparent !important;
}
/* Add to cart is always solid regardless of secondary demotion */
.product-form__submit {
background-color: var(--wb-accent-strong) !important;
color: #ffffff !important;
border-color: var(--wb-accent-strong) !important;
}
.product-form__submit:hover {
background-color: #075985 !important;
border-color: #075985 !important;
color: #ffffff !important;
}
/* Plastic-holder add-on checkbox (raw manga PDPs) */
.wb-holder-addon {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 1rem 1.2rem;
margin-bottom: 1rem;
border: 1px solid var(--wb-border);
border-radius: var(--wb-radius-sm);
background-color: var(--wb-surface-2);
cursor: pointer;
font-size: 1.4rem;
line-height: 1.4;
transition: background-color var(--wb-ease), border-color var(--wb-ease);
}
.wb-holder-addon:hover {
background-color: var(--wb-surface-3);
border-color: var(--wb-accent);
}
.wb-holder-addon input[type="checkbox"] {
width: 1.8rem;
height: 1.8rem;
accent-color: var(--wb-accent);
flex-shrink: 0;
margin: 0;
}
.wb-holder-addon__price {
font-weight: 700;
color: var(--wb-ocean);
white-space: nowrap;
}
.wb-holder-addon--free {
background-color: #ecfdf5;
border-color: #6ee7b7;
cursor: default;
}
.wb-holder-addon--free:hover {
background-color: #ecfdf5;
border-color: #6ee7b7;
}
.wb-holder-addon--free input[type="checkbox"] {
accent-color: #059669;
}
.wb-holder-addon__price--free {
color: #047857;
letter-spacing: 0.05em;
font-size: 1.2rem;
}
/* ============================================================
Footer
============================================================ */
.wb-footer {
background-color: #c8b49a;
background-image:
linear-gradient(to bottom, #0ea5e9 0%, #0369a1 30%, #0c4a6e 82%, rgba(12,74,110,0) 100%),
var(--wb-sand-texture);
background-position: top left, bottom left;
background-size: 100% 100%, 256px 256px;
background-repeat: no-repeat, repeat-x;
border-top: 3px solid #0ea5e9;
padding: 5rem 2rem 2.8rem;
}
.wb-footer__inner { max-width: var(--page-width); margin: 0 auto; }
.wb-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 4rem;
padding-bottom: 3.6rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
margin-bottom: 2.4rem;
}
.wb-footer__logo { display: block; margin-bottom: 1.2rem; text-decoration: none; }
.wb-footer__logo img { height: 6rem; width: auto; }
.wb-footer__tagline {
font-size: 1.35rem; color: #ffffff;
line-height: 1.7; margin: 0 0 1.4rem;
max-width: 26rem; font-family: var(--wb-font-body);
}
.wb-footer__contact {
font-style: normal;
display: flex; flex-direction: column; gap: 0.3rem;
margin-bottom: 1.8rem;
font-size: 1.32rem; font-family: var(--wb-font-body);
}
.wb-footer__contact-link {
color: #ffffff !important;
text-decoration: none !important;
transition: color var(--wb-ease);
}
.wb-footer__contact-link:hover { color: #ffffff !important; }
.wb-footer__contact span { color: #ffffff; }
.wb-footer__social { display: flex; gap: 0.8rem; }
.wb-footer__social-btn {
display: flex; align-items: center; justify-content: center;
width: 3.4rem; height: 3.4rem;
background-color: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--wb-radius-xs);
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: all var(--wb-ease);
}
.wb-footer__social-btn:hover {
color: #fff; border-color: rgba(255,255,255,0.45);
background-color: rgba(255,255,255,0.18);
}
.wb-footer__social-btn svg { width: 1.7rem; height: 1.7rem; }
.wb-footer__col-title {
font-family: var(--wb-font-body) !important;
font-size: 1.1rem; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
color: #ffffff; margin: 0 0 1.4rem;
}
.wb-footer__links {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 0.9rem;
}
.wb-footer__link {
font-size: 1.35rem;
color: #ffffff !important;
text-decoration: none !important;
font-family: var(--wb-font-body);
transition: color var(--wb-ease);
}
.wb-footer__link:hover { color: #ffffff !important; }
.wb-footer__payment {
display: flex; align-items: center; gap: 0.8rem;
flex-wrap: wrap;
padding-bottom: 1.6rem;
margin-bottom: 1.6rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 1.25rem; font-family: var(--wb-font-body);
}
/* Both were alpha-faded white over a gradient and measured 2.4-3.4:1 (audit UX M1). */
.wb-footer__payment-label { color: #ffffff; white-space: nowrap; }
.wb-footer__payment-icons {
display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.wb-footer__payment-icons svg { width: 3.8rem; height: 2.4rem; display: block; }
.wb-footer__bottom {
display: flex; align-items: center;
justify-content: space-between; flex-wrap: wrap; gap: 1.2rem;
}
.wb-footer__copy { font-size: 1.25rem; color: rgba(60,35,10,0.9); font-family: var(--wb-font-body); }
.wb-footer__legal { display: flex; gap: 2rem; flex-wrap: wrap; }
.wb-footer__legal-link {
font-size: 1.25rem;
color: rgba(60,35,10,0.9) !important;
text-decoration: none !important;
font-family: var(--wb-font-body);
transition: color var(--wb-ease);
}
.wb-footer__legal-link:hover { color: rgba(60,35,10,0.9) !important; }
/* ============================================================
Customer / Order pages
============================================================ */
.customer {
max-width: 96rem;
margin: 0 auto;
padding: 4rem 2rem;
color: var(--wb-text);
}
.customer__title {
font-family: var(--wb-font-heading) !important;
font-size: clamp(2rem, 3vw, 2.8rem);
font-weight: 400;
color: var(--wb-text) !important;
margin-bottom: 0.4rem;
}
".customer a {
color: var(--wb-accent-strong) !important;
font-size: 1.4rem;
}
.customer h2 {
font-family: var(--wb-font-heading) !important;
font-size: 1.8rem;
font-weight: 400;
color: var(--wb-text) !important;
margin: 0 0 1rem;
}
/* Order header row */
.customer.order > div > div:first-child {
display: flex;
align-items: baseline;
gap: 2rem;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 2px solid var(--wb-border);
}
/* Order details table */
.order-details {
width: 100%;
border-collapse: collapse;
font-size: 1.4rem;
margin-bottom: 3rem;
background: var(--wb-surface);
border-radius: var(--wb-radius);
overflow: hidden;
box-shadow: var(--wb-shadow-card);
}
.order-details thead tr {
background: linear-gradient(90deg, var(--wb-ocean-deep), var(--wb-ocean));
}
.order-details thead th {
padding: 1.2rem 1.6rem;
text-align: left;
color: #ffffff !important;
font-family: var(--wb-font-body) !important;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.order-details tbody tr {
border-bottom: 1px solid var(--wb-border);
transition: background-color 0.15s ease;
}
.order-details tbody tr:hover { background-color: var(--wb-surface-2); }
.order-details tbody tr:last-child { border-bottom: none; }
.order-details tbody td {
padding: 1.4rem 1.6rem;
color: var(--wb-text) !important;
vertical-align: top;
}
.order-details tbody td a {
color: var(--wb-accent-strong) !important;
font-weight: 700;
text-decoration: none;
}
.order-details tfoot tr { border-top: 1px solid var(--wb-border); }
.order-details tfoot td {
padding: 1rem 1.6rem;
color: var(--wb-text-muted) !important;
font-size: 1.4rem;
}
.order-details tfoot tr:last-child td {
font-weight: 700;
font-size: 1.6rem;
color: var(--wb-text) !important;
border-top: 2px solid var(--wb-border);
padding-top: 1.4rem;
}
/* Billing / Shipping address cards */
.customer.order > div > div:last-child {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-top: 3rem;
}
.customer.order > div > div:last-child > div {
background: var(--wb-surface);
border: 1px solid var(--wb-border);
border-radius: var(--wb-radius);
padding: 2rem 2.4rem;
box-shadow: var(--wb-shadow-card);
}
.customer.order > div > div:last-child p {
color: var(--wb-text-muted) !important;
font-size: 1.4rem;
margin-bottom: 0.6rem;
}
.customer.order > div > div:last-child strong {
color: var(--wb-text);
}
@media screen and (max-width: 749px) {
.customer.order > div > div:last-child {
grid-template-columns: 1fr;
}
.order-details thead { display: none; }
.order-details tbody td {
display: block;
padding: 0.6rem 1.2rem;
}
.order-details tbody td::before {
content: attr(data-label) ": ";
font-weight: 700;
color: var(--wb-text-muted);
}
}
/* ============================================================
Inputs
============================================================ */
.field__input,
.select__select,
textarea.text-area {
background-color: var(--wb-surface) !important;
border-color: var(--wb-border) !important;
color: var(--wb-text) !important;
font-family: var(--wb-font-body) !important;
border-radius: var(--wb-radius-xs) !important;
}
.field__input:focus,
.select__select:focus,
textarea.text-area:focus {
border-color: var(--wb-accent) !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
outline: none;
}
.field__label { color: var(--wb-text-muted) !important; }
/* ============================================================
Product page
============================================================ */
.product { color: var(--wb-text); }
.product__title {
font-family: var(--wb-font-heading) !important;
color: var(--wb-text) !important;
font-weight: 400 !important;
}
/* Rein in Dawn's oversized PDP type */
.product__title h1,
h1.product__title,
.product__title > * {
font-size: clamp(2rem, 2.2vw, 2.6rem) !important;
line-height: 1.3 !important;
}
.product .price--large {
font-size: 1.8rem !important;
}
.product__vendor {
color: var(--wb-accent-strong) !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em; text-transform: uppercase;
font-family: var(--wb-font-body) !important;
}
.product__description { color: var(--wb-text-muted) !important; }
/* Gallery sits on a shallow-water panel instead of bare white, so the
slab photo reads as the exhibit rather than floating in a void */
.product .product__media-wrapper {
background: linear-gradient(180deg, #f0f9ff 0%, #e2f2fd 100%);
border-radius: 14px;
padding: 1.6rem;
}
@media screen and (max-width: 749px) {
.product .product__media-wrapper { padding: 1rem; border-radius: 10px; }
}
/* Smaller product image thumbnails */
.thumbnail-list { gap: 0.5rem !important; }
@media screen and (min-width: 750px) {
.thumbnail-list {
grid-template-columns: repeat(auto-fill, 5.6rem) !important;
}
.product--medium .thumbnail-list,
.product--large .thumbnail-list {
grid-template-columns: repeat(auto-fill, 5.6rem) !important;
}
}
.thumbnail-list__item,
.thumbnail-list__item.slider__slide {
width: 5.6rem !important;
height: 5.6rem !important;
}
/* ============================================================
Collection page
============================================================ */
.collection__title {
font-family: var(--wb-font-heading) !important;
color: var(--wb-text) !important;
font-weight: 400 !important;
}
/* ============================================================
Badges
============================================================ */
.badge {
font-family: var(--wb-font-body) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
border-radius: var(--wb-radius-xs) !important;
}
/* ============================================================
Scrollbar
============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--wb-bg); }
::-webkit-scrollbar-thumb { background: var(--wb-surface-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--wb-accent); }
/* ============================================================
Responsive
============================================================ */
@media screen and (max-width: 989px) {
.wb-nav { display: none !important; }
.wb-hamburger { display: flex; }
.wb-footer__grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
@media screen and (max-width: 749px) {
/* Collapse the header: the full search box + "Request a Manga" link
have fixed widths that forced a 733px page layout on phones (the
"blank space on the right" bug). Both live in the hamburger menu
on mobile instead. */
.wb-header__actions .wb-search,
.wb-header__actions .wb-nav__link--actions { display: none !important; }
.wb-header__inner { gap: 0.8rem; }
.wb-header__logo img { height: 4.2rem; }
.wb-header__actions .wb-icon-btn,
.wb-hamburger { width: 3.4rem; height: 3.4rem; }
.wb-hamburger { padding: 0.7rem; position: relative; }
/* Keep the compact 34px visuals but give both a 44px+ touch target
(invisible hit-area halo; parent boxes are position:relative) */
.wb-header__actions .wb-icon-btn::after,
.wb-hamburger::after {
content: '';
position: absolute;
inset: -0.6rem;
}
.wb-mobile-nav__search { margin-bottom: 0.8rem; }
.wb-mobile-nav__search .wb-search__form { display: flex; width: 100%; }
.wb-mobile-nav__search .wb-search__input { width: 100% !important; min-width: 0; flex: 1; }
.wb-hero { min-height: 44vh; }
/* pull the headline up: less dead water above "Graded Manga." */
.wb-hero__content { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.2rem; }
.wb-hero__actions { flex-direction: column; align-items: flex-start; }
/* Robin (the headline-clearance target) is hidden on mobile */
.wb-hero__left { margin-left: 0; }
/* Chopper floats top-right, level with "Graded Manga." */
.wb-hero__float--chopper {
--wb-float-w: 56px !important;
left: auto !important;
right: 10px;
bottom: 79% !important;
animation: wb-float-bob 7s ease-in-out infinite !important;
}
/* Nami sits mid-right, beside "First Prints."/"Guaranteed." */
.wb-hero__float--nami {
--wb-float-w: 82px !important;
left: auto !important;
right: 62px;
bottom: 66% !important;
}
.wb-footer__grid { grid-template-columns: 1fr; }
.wb-footer__bottom { flex-direction: column; text-align: center; }
.wb-trust__inner { gap: 1.2rem 2rem; }
/* Trust strip on mobile: only "Authentic 1st Prints" (2) and
"Free US Shipping Over $50" (3) — the rest are desktop-only */
.wb-trust__item:nth-child(1),
.wb-trust__item:nth-child(4),
.wb-trust__item:nth-child(5) { display: none; }
.wb-trust { padding: 1.2rem 1rem; }
.wb-trust__inner { gap: 1rem 1.2rem; flex-wrap: nowrap; }
.wb-trust__item { font-size: clamp(0.9rem, 2.7vw, 1.1rem); gap: 0.5rem; }
.wb-trust__item svg { width: 1.4rem; height: 1.4rem; }
/* Collection-card wishlist heart: smaller and top-left on mobile so it
covers less of the cover art */
.wb-wishlist-btn--card {
width: 30px;
height: 30px;
bottom: auto;
top: 6px;
left: 6px;
right: auto;
}
.wb-wishlist-btn--card .wb-wishlist-btn__icon { width: 16px; height: 16px; }
/* 30px visual (covers less cover art) but a 44px touch target */
.wb-wishlist-btn--card::after {
content: '';
position: absolute;
inset: -7px;
}
}
/* ============================================================
Blog listing — text-only, responsive grid
============================================================ */
.wb-blog-list {
list-style: none;
padding: 0;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
max-width: 110rem;
}
.wb-blog-list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.wb-blog-list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.wb-blog-list--cols-4 { grid-template-columns: repeat(4, 1fr); max-width: 132rem; }
@media (max-width: 989px) {
.wb-blog-list,
.wb-blog-list--cols-2,
.wb-blog-list--cols-3,
.wb-blog-list--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 749px) {
.wb-blog-list,
.wb-blog-list--cols-2,
.wb-blog-list--cols-3,
.wb-blog-list--cols-4 { grid-template-columns: 1fr; }
}
.wb-blog-list--cols-4 .wb-blog-list__title { font-size: 1.7rem; }
.wb-blog-list--cols-4 .wb-blog-list__link { padding: 1.3rem 1.5rem; }
.wb-blog-list__excerpt {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wb-blog-list__item {
background-color: #ffffff;
border: 1px solid rgba(40, 40, 42, 0.10);
border-radius: 12px;
transition: border-color 0.15s ease;
}
.wb-blog-list__item:hover {
border-color: var(--wb-accent);
}
.wb-blog-list__link {
display: block;
padding: 1.6rem 2rem;
text-decoration: none;
color: inherit;
}
.wb-blog-list__title {
font-family: var(--wb-font-body) !important;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 0.5rem 0;
color: var(--wb-text);
}
.wb-blog-list__link:hover .wb-blog-list__title {
color: var(--wb-accent);
}
.wb-blog-list__meta {
font-size: 1.2rem;
color: var(--wb-text-muted);
margin-bottom: 0.6rem;
}
.wb-blog-list__excerpt {
font-size: 1.4rem;
line-height: 1.5;
color: var(--wb-text);
margin: 0;
}
@media (max-width: 749px) {
.wb-blog-list__link { padding: 1.2rem 1.4rem; }
.wb-blog-list__title { font-size: 1.7rem; }
}
/* Homepage featured-blog variant: 3-column grid, no max-width on the list */
.wb-blog-list--featured {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
max-width: none;
}
.wb-blog-list--featured .wb-blog-list__title { font-size: 1.7rem; }
.wb-blog-list--featured .wb-blog-list__excerpt {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 989px) {
.wb-blog-list--featured { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 749px) {
.wb-blog-list--featured { grid-template-columns: 1fr; }
}
/* ============================================================
PAGE BACKGROUND — final override (must stay last)
============================================================ */
html,
body,
body.gradient {
background: #ffffff !important;
background-color: #ffffff !important;
}
.color-scheme-1,
.color-scheme-1.gradient,
.color-scheme-1.isolate,
.color-scheme-1.isolate.gradient {
background: #ffffff !important;
background-color: #ffffff !important;
}
/* ============================================================
Manga Price Tracker
------------------------------------------------------------
The widget owns its own look; its styles live in the PAGE BODY
(Shopify page "manga-price-tracker"), which loads after this
sheet and therefore wins.
2026-08-21: removed the old override block that lived here. It
dated from the previous tracker design and forced Nunito — a
font this theme no longer loads — plus #1e293b headings and
18px rounded cards, all !important. Against the current design
that rendered the section bars near-black on black and dropped
the table onto a browser fallback font.
Dawn's product-card styles still leak in via the widget's
.card class; that is neutralised in the page body, next to the
rules it has to beat, rather than from here.
============================================================ */
/* ============================================================
Information blog — featured image constrained but in proportion
============================================================ */
.template-article-information .article-template__hero-container {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
Article pages — wide furniture, narrow prose
============================================================ */
/* Breadcrumbs, header, share and the end blocks may use the full page width. */
.template-article .article-template .page-width--narrow,
.template-blog .page-width--narrow {
max-width: var(--page-width) !important;
padding: 0 2rem !important;
}
/* ...but the reading column does NOT. This override used to catch the article body too,
giving ~170 characters per line at 16px (2026-09-02 audit, UX H4 / item 31).
72rem is about 70 characters, the readable range. */
.template-article .article-template .article-template__content.page-width--narrow {
max-width: 72rem !important;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
Blog post content components
============================================================ */
.article-template__content .callout {
background: #f4f8ff;
border-left: 4px solid #2255cc;
padding: 1rem 1.4rem;
margin: 2rem 0;
border-radius: 0 6px 6px 0;
}
.article-template__content .code-block {
background: #f4f4f4;
padding: 0.8rem 1.2rem;
border-radius: 6px;
font-family: monospace;
font-size: 1rem;
margin: 1rem 0;
}
.article-template__content .cta {
background: #1a1a2e;
color: #fff;
padding: 1.4rem 2rem;
border-radius: 8px;
margin: 2.5rem 0;
text-align: center;
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.article-template__content .cta a {
color: #7eb8f7 !important;
font-weight: bold;
font-size: 1.05rem;
}
.article-template__content .video-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 8px;
margin: 1.5rem 0;
}
.article-template__content .video-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
.article-template__content .video-caption {
font-size: 0.88rem;
color: #666;
text-align: center;
margin-top: 0.6rem;
}
.article-template__content hr {
margin: 2.5rem 0;
border: none;
border-top: 1px solid #ddd;
}
.article-template__content figure {
margin: 1.8rem 0;
text-align: center;
}
.article-template__content figure img {
max-width: 100%;
border-radius: 6px;
border: 1px solid #ddd;
}
.article-template__content figcaption {
margin-top: 0.6rem;
font-size: 0.88rem;
color: #666;
}
/* ============================================================
Manga Request Form — /pages/request
============================================================ */
.wb-request__intro { margin-bottom: 2.4rem; }
.wb-request__form {
display: flex;
flex-direction: column;
gap: 1.6rem;
background: #ffffff;
border: 1px solid rgba(40, 40, 42, 0.12);
border-radius: 18px 18px 8px 8px;
padding: 2.4rem;
margin-top: 1rem;
}
.wb-form-row { display: flex; flex-direction: column; gap: 0.6rem; }
.wb-form-row--two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
}
@media (max-width: 600px) {
.wb-form-row--two { grid-template-columns: 1fr; }
}
.wb-form-row label {
font-weight: 700;
font-size: 1.4rem;
color: var(--wb-text, #1a1a1a);
}
.wb-req-star { color: #c0392b; }
.wb-req-optional { font-weight: normal; opacity: 0.6; font-size: 0.85em; margin-left: 0.25rem; }
.wb-form-row input,
.wb-form-row select,
.wb-form-row textarea {
font: inherit;
font-size: 1.5rem;
padding: 1rem 1.2rem;
border: 1px solid rgba(40, 40, 42, 0.18);
border-radius: 8px;
background: #fff;
color: #1a1a1a;
width: 100%;
}
.wb-form-row input:focus,
.wb-form-row select:focus,
.wb-form-row textarea:focus {
outline: 2px solid rgba(16, 37, 74, 0.4);
outline-offset: 1px;
border-color: rgba(16, 37, 74, 0.6);
}
.wb-request__submit { align-self: flex-start; min-width: 18rem; }
.wb-request__status {
min-height: 1.5em;
margin: 0;
font-size: 1.4rem;
}
.wb-request__status[data-kind="success"] { color: #1d6f4a; }
.wb-request__status[data-kind="error"] { color: #c0392b; }
/* ============================================================
Wishlist heart button + page
============================================================ */
.card-wrapper { position: relative; }
.wb-wishlist-btn {
z-index: 3;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(2px);
border: 1px solid rgba(40, 40, 42, 0.12);
border-radius: 50%;
color: #1a1a1a;
cursor: pointer;
padding: 0;
transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.wb-wishlist-btn--card {
position: absolute;
bottom: 8px;
right: 8px;
}
.wb-wishlist-btn:hover { transform: scale(1.06); background: #fff; }
.wb-wishlist-btn:disabled { opacity: 0.6; cursor: wait; }
.wb-wishlist-btn__icon {
width: 24px;
height: 24px;
pointer-events: none;
}
.wb-wishlist-btn.is-active {
color: #d63b48;
background: #fff;
}
.wb-wishlist-btn.is-active .wb-wishlist-btn__icon path {
fill: currentColor;
stroke: currentColor;
}
.wb-wishlist-btn--pdp {
position: static;
width: 44px;
height: 44px;
margin-left: 1.2rem;
vertical-align: middle;
}
.product__title--with-wishlist {
display: flex;
align-items: flex-start;
gap: 1.2rem;
}
.product__title--with-wishlist h1 { flex: 1; margin: 0; }
.wb-wishlist-flash {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #1a1a1a;
color: #fff;
padding: 11px 18px;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 500;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10000;
pointer-events: none;
}
.wb-wishlist-flash--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wb-wishlist-flash--err { background: #b22; }
/* Wishlist page */
.wb-wishlist-page__login {
margin-top: 2rem;
padding: 2.4rem;
background: #fff;
border: 1px solid rgba(40, 40, 42, 0.12);
border-radius: 18px 18px 8px 8px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.6rem;
}
.wb-wishlist-page__login p { margin: 0; flex: 1 0 240px; font-size: 1.5rem; }
#wb-wishlist-grid { margin-top: 2rem; }
.wb-wishlist-page__message { margin-top: 2rem; }
.wb-wishlist-page__empty {
text-align: center;
padding: 4rem 2rem;
color: #666;
font-size: 1.5rem;
}
.wb-wishlist-grid__loading {
grid-column: 1 / -1;
text-align: center;
padding: 4rem 2rem;
color: #666;
font-size: 1.5rem;
list-style: none;
}
/* ============================================================
Admin Stats page
============================================================ */
.wb-admin__hint {
font-size: 1.4rem;
color: #666;
margin: 0 0 1.6rem;
}
.wb-admin__token-row {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
align-items: center;
margin: 1.6rem 0;
}
.wb-admin__token-row input {
flex: 1 1 280px;
font-size: 1.4rem;
padding: 0.9rem 1.2rem;
border: 1px solid rgba(40, 40, 42, 0.18);
border-radius: 8px;
}
.wb-admin__status {
font-size: 1.3rem;
margin: 0.8rem 0 1.6rem;
min-height: 1.4em;
}
.wb-admin__status[data-kind="success"] { color: #1d6f4a; }
.wb-admin__status[data-kind="error"] { color: #c0392b; }
.wb-admin__section {
margin-top: 3.2rem;
background: #fff;
border: 1px solid rgba(40, 40, 42, 0.12);
border-radius: 14px 14px 6px 6px;
padding: 2rem 2.4rem;
}
.wb-admin__section h2 {
margin: 0 0 1.4rem;
font-size: 1.8rem;
}
.wb-admin__empty {
margin: 0;
color: #666;
font-size: 1.4rem;
}
.wb-admin__table {
width: 100%;
border-collapse: collapse;
font-size: 1.3rem;
}
.wb-admin__table th,
.wb-admin__table td {
text-align: left;
padding: 0.8rem 1rem;
border-bottom: 1px solid rgba(40, 40, 42, 0.08);
vertical-align: top;
}
.wb-admin__table th {
font-weight: 700;
background: #f5f7f9;
}
.wb-admin__table td a { color: #10254a; text-decoration: underline; }
.wb-admin__table tbody tr:hover { background: #fafbfc; }
/* ============================================================
Customer account — Wishlist + Requests blocks
============================================================ */
.wb-account-extras {
margin-top: 3.2rem;
display: grid;
gap: 2.4rem;
}
.wb-account-block {
background: #fff;
border: 1px solid rgba(40, 40, 42, 0.12);
border-radius: 14px 14px 6px 6px;
padding: 2rem 2.4rem;
}
.wb-account-block__head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 1.4rem;
gap: 1rem;
}
.wb-account-block__head h2 { margin: 0; font-size: 1.8rem; }
.wb-account-block__more {
font-size: 1.3rem;
text-decoration: none;
color: #10254a;
}
.wb-account-block__more:hover { text-decoration: underline; }
.wb-account-block__empty {
margin: 0;
color: #666;
font-size: 1.4rem;
}
.wb-account-thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1.2rem;
}
.wb-account-thumb {
display: block;
text-decoration: none;
color: inherit;
border: 1px solid rgba(40, 40, 42, 0.1);
border-radius: 10px 10px 4px 4px;
overflow: hidden;
transition: border-color 0.15s ease;
}
.wb-account-thumb:hover { border-color: rgba(40, 40, 42, 0.28); }
.wb-account-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.wb-account-thumb__noimg {
width: 100%; aspect-ratio: 1;
background: linear-gradient(135deg, #eaf3f8, #d8e3eb);
}
.wb-account-thumb__title {
display: block;
padding: 0.7rem 0.9rem;
font-size: 1.2rem;
line-height: 1.3;
font-weight: 700;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wb-account-requests {
width: 100%;
border-collapse: collapse;
font-size: 1.3rem;
}
.wb-account-requests th,
.wb-account-requests td {
text-align: left;
padding: 0.7rem 0.9rem;
border-bottom: 1px solid rgba(40, 40, 42, 0.07);
}
.wb-account-requests th {
background: #f5f7f9;
font-weight: 700;
}
/* ============================================================
Product cards: fully rounded (image top corners too), uniform
title block, price pinned to a constant spot at the bottom
============================================================ */
.product-card-wrapper .card,
.product-card-wrapper .card__inner,
.product-card-wrapper .card__media {
border-radius: 10px 10px 0 0 !important;
overflow: hidden;
}
/* Title block is always exactly 3 lines tall (clamped with ellipsis),
so the price sits at the same spot on every card */
.product-card-wrapper .card__heading {
font-size: 1.25rem !important;
line-height: 1.4 !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.25rem * 1.4 * 3);
margin-bottom: 0.6rem;
}
/* Narrow 2-col cards: smaller title font + a 4th clamped line so long
graded titles (with the grade at the end) fit without truncating.
Must come after the base heading rule to win the !important tie. */
@media screen and (max-width: 749px) {
.product-card-wrapper .card__heading {
font-size: 1.15rem !important;
-webkit-line-clamp: 4;
min-height: calc(1.15rem * 1.4 * 4);
}
}
/* Show the WHOLE item photo on product cards. Dawn crops card media
with object-fit: cover inside a fixed 4:5 ratio box — fine for BGS
manga slabs (~3:4, ~6% cropped) but PSA TCG slabs are ~0.59 and lose
~26% of their height ("zoomed in"). contain letterboxes instead of
cropping, keeping the uniform card grid + pinned price layout. */
.product-card-wrapper .card__media .media img {
object-fit: contain;
}
/* ============================================================
Readability pass — Permanent Marker is reserved for big
display titles. Smaller headings and functional UI text
(filters, sort, counts, accordions) use the rounded body
font so they stay easy to read.
============================================================ */
h4, h5, h6,
.h4, .h5, .h6 {
font-family: var(--wb-font-body) !important;
font-weight: 700;
}
.facets__heading,
.facets__heading--vertical,
.mobile-facets__heading,
.mobile-facets__open,
.facet-filters__label,
.facet-filters__label label,
.product-count__text,
.active-facets *,
.predictive-search__heading,
.cart-notification__heading,
.accordion__title,
.accordion summary,
.totals__total,
.cart__login-title,
.shopify-pc__banner__dialog h2,
.shopify-pc__prefs__dialog h2,
.shopify-pc__prefs__dialog h3 {
font-family: var(--wb-font-body) !important;
}
/* ==================== Homepage section environments ==================== */
/* Each band below the hero gets its own "part of West Blue" instead of a
flat white feed: shallow-water category band, cream product shelf, dark
ocean guide band, sandy footer. Mascots are single sprites anchored to a
corner, applied as CSS backgrounds so no template markup changes. */
/* Shop by Category: shallow-water band, Bulma as the band mascot,
color-coded card tops (Japanese blue / English orange / 1st print green).
Below 1560px Bulma tucks bottom-right and the extra padding-bottom
reserves a strip below the cards for him; from 1560px up he moves into
the right side gutter (a fixed 40px off the 100rem card list, so he is
"attached" to the content at any monitor width) and the dead strip goes
away. Faint kelp silhouettes dress the bottom corners from 750px up. */
.section-collection-list > .color-scheme-2 {
background-color: #eaf3f8;
background-image:
url('wb-mascot-bulma-2.png'),
linear-gradient(180deg, #d5eaf7 0%, #eaf3f8 55%, #f6fafc 100%);
background-repeat: no-repeat, no-repeat;
background-position: right 34px bottom 8px, top left;
background-size: 132px auto, 100% 100%;
background-attachment: scroll !important;
padding-bottom: 128px;
}
@media screen and (min-width: 750px) {
.section-collection-list > .color-scheme-2 {
background-image:
url('wb-mascot-bulma-2.png'),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 170'%3E%3Cg fill='none' stroke='%230369a1' stroke-linecap='round' opacity='0.14'%3E%3Cpath d='M30 170 C24 132 40 112 30 76 C24 54 34 34 30 12' stroke-width='9'/%3E%3Cpath d='M64 170 C72 140 54 118 66 88 C74 66 62 52 68 34' stroke-width='8'/%3E%3Cpath d='M98 170 C92 148 106 128 96 102 C90 84 100 72 96 58' stroke-width='7'/%3E%3C/g%3E%3Cg fill='%230369a1' opacity='0.1'%3E%3Ccircle cx='46' cy='26' r='5'/%3E%3Ccircle cx='82' cy='16' r='3.5'/%3E%3Ccircle cx='112' cy='40' r='4'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 170'%3E%3Cg fill='none' stroke='%230369a1' stroke-linecap='round' opacity='0.14'%3E%3Cpath d='M30 170 C24 132 40 112 30 76 C24 54 34 34 30 12' stroke-width='9'/%3E%3Cpath d='M64 170 C72 140 54 118 66 88 C74 66 62 52 68 34' stroke-width='8'/%3E%3Cpath d='M98 170 C92 148 106 128 96 102 C90 84 100 72 96 58' stroke-width='7'/%3E%3C/g%3E%3Cg fill='%230369a1' opacity='0.1'%3E%3Ccircle cx='46' cy='26' r='5'/%3E%3Ccircle cx='82' cy='16' r='3.5'/%3E%3Ccircle cx='112' cy='40' r='4'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(180deg, #d5eaf7 0%, #eaf3f8 55%, #f6fafc 100%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: right 34px bottom 8px, left 10px bottom -6px, right 10px bottom -6px, top left;
background-size: 132px auto, 110px auto, 110px auto, 100% 100%;
}
}
@media screen and (min-width: 1560px) {
.section-collection-list > .color-scheme-2 {
/* right calc(50% - 626px): background % offsets resolve against
(band width - image width), so with the 172px mascot this pins his
left edge ~40px right of the 100rem card list at every width */
background-position: right calc(50% - 626px) bottom 32px, left 10px bottom -6px, right 10px bottom -6px, top left;
background-size: 172px auto, 110px auto, 110px auto, 100% 100%;
padding-bottom: 36px;
}
}
/* !important: the global ".card--card { border: none !important }" reset
would strip these color-coded tops otherwise */
.section-collection-list .collection-list > li:nth-child(1) .card { border-top: 4px solid #0ea5e9 !important; }
.section-collection-list .collection-list > li:nth-child(2) .card { border-top: 4px solid #f97316 !important; }
.section-collection-list .collection-list > li:nth-child(3) .card { border-top: 4px solid #10b981 !important; }
/* Recently Listed: warm cream shelf so the product cards pop.
Compound selector out-specifies the ".color-scheme-1.isolate.gradient
{ background:#fff !important }" whitewash rule above. */
[id$="__featured_collection"] .color-scheme-1,
[id$="__featured_collection"] .color-scheme-1.isolate.gradient {
background: linear-gradient(180deg, #f6eedd 0%, #efe4c9 100%) !important;
background-attachment: scroll !important;
}
/* Mascot + paper treatment for the Starter's Guide band lives in the
"Homepage blog section" block further up (needs its !important). */
/* Footer: the West Blue turtle logo swimming over the sand, right side.
It used to hotlink the 1205px Files-CDN PNG (165 KB, the largest asset on 7 of
10 pages) for a 160px slot. Now a theme asset sized for the slot at 2x: a
320px quantised PNG, 25 KB (2026-09-02 audit, UX L3). A WebP was generated too
and came out LARGER than the quantised PNG, so it was dropped. */
.wb-footer {
background-image:
url('wb-turtle-logo.png'),
linear-gradient(to bottom, #0ea5e9 0%, #0369a1 30%, #0c4a6e 82%, rgba(12,74,110,0) 100%),
var(--wb-sand-texture);
background-position: right 4% bottom 40px, top left, bottom left;
background-size: 160px auto, 100% 100%, 256px 256px;
background-repeat: no-repeat, no-repeat, repeat-x;
}
@media screen and (max-width: 749px) {
.section-collection-list > .color-scheme-2 {
background-position: right 12px bottom 8px, top left;
background-size: 88px auto, 100% 100%;
padding-bottom: 104px;
}
/* mobile footer: content spans full width, so the mascot sits out */
.wb-footer {
background-image:
linear-gradient(to bottom, #0ea5e9 0%, #0369a1 30%, #0c4a6e 82%, rgba(12,74,110,0) 100%),
var(--wb-sand-texture);
background-position: top left, bottom left;
background-size: 100% 100%, 256px 256px;
background-repeat: no-repeat, repeat-x;
}
}
/* Header CTA: Manga Price Tracker is the one filled button in the header;
Request a Manga stays a subtle outlined pill */
.wb-nav__link--tracker {
background: #c2410c; /* darkened from #f97316: white text needs 4.5:1 (AA) */
border-radius: 999px;
padding: 0.55rem 1.4rem;
color: #ffffff !important;
}
.wb-nav__link--tracker:hover {
background: #9a3412;
}
/* "Why collectors buy from West Blue" trust cards */
.wb-why {
background-color: #ffffff;
padding: 5.6rem 2rem;
}
.wb-why__inner { max-width: var(--page-width); margin: 0 auto; }
.wb-why__title {
font-family: var(--wb-font-heading);
font-size: clamp(2.2rem, 3vw, 3rem);
font-weight: 700;
color: var(--wb-ocean, #0c4a6e);
margin: 0 0 2.4rem;
}
.wb-why__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
gap: 2rem;
}
.wb-why__card {
background: #f6fafd;
border: 1px solid rgba(12, 74, 110, 0.08);
border-radius: 12px;
padding: 2.4rem 2.2rem;
}
.wb-why__card svg {
width: 3.2rem;
height: 3.2rem;
color: var(--wb-sky, #0369a1);
margin-bottom: 1.2rem;
}
.wb-why__card h3 {
/* !important: the global h1-h6 marker-font rule would grab these */
font-family: var(--wb-font-body) !important;
font-weight: 700;
font-size: 1.7rem;
color: var(--wb-ocean, #0c4a6e);
margin: 0 0 0.8rem;
}
.wb-why__card p {
font-size: 1.45rem;
line-height: 1.65;
color: #475569;
margin: 0;
}
@media (max-width: 749px) {
.wb-why { padding: 4rem 1.6rem; }
.wb-why__grid { grid-template-columns: 1fr; gap: 1.2rem; }
}
/* Mid-width header squeeze: between ~990px and ~1300px the full desktop
header (nav + search + Request link + icons) is wider than the viewport,
which expands the layout viewport and paints a white bar on the right.
Tighten everything instead of overflowing. */
@media screen and (min-width: 990px) and (max-width: 1299px) {
.wb-header__inner { gap: 0.8rem; padding: 0 1.2rem; }
.wb-nav__link { padding: 0.6rem 0.7rem; font-size: 1.3rem; }
.wb-nav__link--tracker { padding: 0.5rem 1rem; }
.wb-search__input { width: 13rem; }
.wb-header__actions { gap: 0.4rem; }
/* Request a Manga stays reachable via the CTA band, account pages,
and the mobile menu; the text link doesn't fit at these widths */
.wb-header__actions .wb-nav__link--actions { display: none !important; }
}
/* Section subtitles under the marker-font headings */
.wb-section-subtitle,
.collection__description.rte {
font-family: var(--wb-font-body) !important;
font-size: 1.45rem;
color: var(--wb-text-muted) !important;
margin: 0.4rem 0 0;
max-width: 62rem;
}
/* Category card subtitles: collector-path blurbs under each title */
.wb-cat-sub {
font-family: var(--wb-font-body);
font-size: 1.25rem;
line-height: 1.5;
color: var(--wb-text-muted);
margin: 0.4rem 0 0;
}
/* Tracker + Request CTA band: deep ocean strip with two light cards.
From 1300px up, faint bubble columns rise in the side gutters so the
dark band's edges aren't dead space. */
.wb-cta-band {
background: linear-gradient(135deg, var(--wb-ocean-deep) 0%, var(--wb-ocean) 100%);
padding: 5rem 2rem;
}
@media screen and (min-width: 1300px) {
.wb-cta-band {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 260'%3E%3Cg fill='none' stroke='%23ffffff' opacity='0.12'%3E%3Ccircle cx='30' cy='236' r='14' stroke-width='2'/%3E%3Ccircle cx='58' cy='188' r='8' stroke-width='2'/%3E%3Ccircle cx='24' cy='140' r='11' stroke-width='2'/%3E%3Ccircle cx='52' cy='96' r='6' stroke-width='2'/%3E%3Ccircle cx='34' cy='52' r='9' stroke-width='2'/%3E%3Ccircle cx='60' cy='16' r='5' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 260'%3E%3Cg fill='none' stroke='%23ffffff' opacity='0.12'%3E%3Ccircle cx='30' cy='236' r='14' stroke-width='2'/%3E%3Ccircle cx='58' cy='188' r='8' stroke-width='2'/%3E%3Ccircle cx='24' cy='140' r='11' stroke-width='2'/%3E%3Ccircle cx='52' cy='96' r='6' stroke-width='2'/%3E%3Ccircle cx='34' cy='52' r='9' stroke-width='2'/%3E%3Ccircle cx='60' cy='16' r='5' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(135deg, var(--wb-ocean-deep) 0%, var(--wb-ocean) 100%);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left 24px bottom -30px, right 24px top -40px, top left;
background-size: 84px auto, 84px auto, 100% 100%;
}
}
.wb-cta-band__inner {
max-width: var(--page-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.4rem;
}
.wb-cta-band__card {
background: rgba(255, 255, 255, 0.97);
border-radius: 14px;
padding: 2.8rem 2.6rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.wb-cta-band__card h3 {
/* body font: these are readable feature titles, not display titles */
font-family: var(--wb-font-body) !important;
font-weight: 700;
font-size: 1.9rem;
color: var(--wb-ocean, #0c4a6e);
margin: 0 0 0.8rem;
}
.wb-cta-band__card p {
font-size: 1.45rem;
line-height: 1.65;
color: #475569;
margin: 0 0 1.6rem;
}
.wb-cta-band__note {
font-size: 1.2rem !important;
color: var(--wb-text-dim) !important;
margin: 1.2rem 0 0 !important;
}
@media (max-width: 749px) {
.wb-cta-band { padding: 3.6rem 1.6rem; }
.wb-cta-band__inner { grid-template-columns: 1fr; gap: 1.4rem; }
}
/* Orange accent underline for the custom "Why" section heading too */
.wb-why__title {
position: relative;
display: inline-block;
padding-bottom: 0.6rem;
}
.wb-why__title::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 3.6rem; height: 3px;
background: linear-gradient(90deg, #f97316, #fb923c);
border-radius: 2px;
}
/* blog subtitle sits under the heading, above the article cards */
.wb-section-subtitle--blog {
margin: -0.6rem 0 1.8rem;
}
/* Request a Manga sits next to the header icons as the subtle outlined pill
(the filled CTA treatment moved to the Manga Price Tracker link) */
.wb-header__actions .wb-nav__link--actions {
border: 1.5px solid rgba(255, 255, 255, 0.55);
border-radius: 999px;
padding: 0.5rem 1.2rem;
}
.wb-header__actions .wb-nav__link--actions:hover {
border-color: #ffffff;
background-color: rgba(255, 255, 255, 0.18);
}
/* Product-card scan badges: max two, BGS grade + language */
.wb-card-badges {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0.3rem 0 0.5rem;
}
.wb-card-badge {
font-family: var(--wb-font-body);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
background: #e0f2fe;
color: #0c4a6e;
padding: 0.35rem 0.85rem;
border-radius: 999px;
white-space: nowrap;
}
.wb-card-badge--grade {
background: #c2410c; /* darkened from #f97316: the grade is the key datum, must pass AA */
color: #ffffff;
}
/* Card price: after the cover art, price is the decision datum — give it
real weight instead of blending into the muted body text */
.card__information .price,
.card__information .price .price-item--regular {
color: var(--wb-ocean) !important;
font-weight: 700 !important;
font-size: 1.5rem;
}
/* Sold-out lead path: one quiet secondary action */
.wb-request-similar {
display: inline-block;
margin-top: 0.5rem;
font-family: var(--wb-font-body);
font-size: 1.2rem;
font-weight: 700;
color: var(--wb-sky, #0369a1) !important;
text-decoration: underline !important;
}
/* Guide article tags: quiet single label per card */
.wb-article-tag {
display: inline-block;
font-family: var(--wb-font-body);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #0369a1;
background: #e0f2fe;
padding: 0.35rem 0.85rem;
border-radius: 999px;
margin-bottom: 0.7rem;
}
/* ============================================================
PDP slab specs — grade chip, cert number, Beckett verify link,
one-of-one scarcity line (snippets/wb-slab-specs.liquid)
============================================================ */
.wb-slab-specs {
margin: 1.2rem 0 0.4rem;
padding: 1.2rem 1.4rem;
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
border-radius: var(--wb-radius);
font-family: var(--wb-font-body);
}
.wb-slab-specs__row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.8rem;
}
.wb-slab-specs__badge {
font-size: 1.3rem;
font-weight: 700;
line-height: 1;
color: #ffffff;
background: #c2410c; /* matches .wb-card-badge--grade, AA with white */
padding: 0.5rem 1rem;
border-radius: 999px;
white-space: nowrap;
}
.wb-slab-specs__cert {
font-size: 1.3rem;
font-weight: 700;
color: var(--wb-text-muted);
letter-spacing: 0.02em;
}
.wb-slab-specs__verify {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.8rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--wb-ocean) !important;
text-decoration: underline !important;
}
.wb-slab-specs__scarcity {
margin: 0.9rem 0 0;
font-size: 1.25rem;
font-weight: 700;
color: var(--wb-ocean-deep);
}
.wb-slab-specs__row + .wb-slab-specs__scarcity,
.wb-slab-specs__verify + .wb-slab-specs__scarcity {
border-top: 1px dashed var(--wb-border);
padding-top: 0.9rem;
}
/* ============================================================
Scroll-reveal accents (works with Dawn's animations_reveal_on_scroll)
— the orange heading underline draws in as its section reveals
============================================================ */
.title::after,
.wb-why__title::after {
transition: width 0.6s ease 0.25s;
}
.scroll-trigger--offscreen .title::after,
.wb-why__title.scroll-trigger--offscreen::after {
width: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
.title::after,
.wb-why__title::after { transition: none; }
}
/* SEO essay below the collection grid (intro paragraph lives in the hero) */
.wb-collection-seo {
margin: 4rem auto 2rem;
max-width: 88rem;
font-family: var(--wb-font-body);
}
.wb-collection-seo h2 {
font-size: 1.9rem !important;
margin: 2.2rem 0 0.6rem;
}
.wb-collection-seo p {
font-size: 1.42rem;
line-height: 1.7;
color: var(--wb-text-muted);
}
/* Card badge variants: estimated raw grade, 1st print, obi + grid footnote */
.wb-card-badge--est {
background: #0c4a6e;
color: #ffffff;
}
.wb-card-badge--first {
background: #e0f2fe;
color: #0c4a6e;
}
.wb-card-badge--obi {
background: #c8b49a;
color: #3d2f1a;
}
.wb-grade-note {
font-family: var(--wb-font-body);
font-size: 1.15rem;
color: var(--wb-text-dim);
margin: 1.6rem auto 0;
}
.wb-slab-specs__badge--est { background: #0c4a6e; }
/* "Series" on line 1, "#N" on line 2 — cards and PDP */
.wb-title-vol {
display: block;
font-size: 0.85em;
color: var(--wb-ocean);
font-weight: 700;
margin-top: 0.1em;
}
.wb-title-vol--pdp { font-size: 0.9em; }
/* Collector filter chips (native tag filtering) — fixed two-row layout:
all tag/series filters on top, Price always on its own bottom row */
.wb-filter-bar {
margin: 1.8rem auto 0.6rem;
font-family: var(--wb-font-body);
}
.wb-filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem 1.8rem;
}
.wb-filter-row--grade { margin-top: 0.9rem; }
.wb-filter-row--bottom {
margin-top: 0.9rem;
padding-top: 0.9rem;
border-top: 1px solid var(--wb-border);
}
.wb-filter-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wb-filter-label {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wb-text-dim);
margin-right: 0.2rem;
}
.wb-filter-chip {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.2rem;
border-radius: 999px;
border: 1.5px solid var(--wb-border);
background: #ffffff;
color: var(--wb-text-muted) !important;
font-size: 1.25rem;
font-weight: 700;
text-decoration: none !important;
transition: all var(--wb-ease);
min-height: 44px;
}
.wb-filter-chip:hover { border-color: var(--wb-accent); color: var(--wb-accent-dark) !important; }
.wb-filter-chip--on {
background: var(--wb-ocean);
border-color: var(--wb-ocean);
color: #ffffff !important;
}
.wb-filter-chip--clear { border-style: dashed; margin-left: auto; }
@media screen and (max-width: 749px) {
.wb-filter-bar { margin-top: 1.2rem; }
.wb-filter-row { gap: 0.8rem 1.2rem; }
}
.wb-filter-select {
font-family: var(--wb-font-body);
font-size: 1.25rem;
font-weight: 700;
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1.5px solid var(--wb-border);
background: #ffffff;
color: var(--wb-text-muted);
min-height: 44px;
}
/* PDP language line under the volume number */
.wb-pdp-lang {
font-family: var(--wb-font-body);
font-size: 1.5rem;
font-weight: 700;
color: var(--wb-text-muted);
margin: 0.2rem 0 0.4rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
/* Card title row: title on the left, language pill aligned to its first line */
.wb-card-titlerow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.8rem;
}
.wb-card-titlerow .card__heading { flex: 1; min-width: 0; margin-top: 0; }
.wb-card-lang {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--wb-font-body);
font-size: 1.3rem;
font-weight: 700;
color: #ffffff;
background: var(--wb-ocean);
border: 1.5px solid var(--wb-ocean-deep);
border-radius: 999px;
padding: 0.3rem 0.7rem;
letter-spacing: 0.03em;
white-space: nowrap;
line-height: 1;
}
.wb-card-lang__flag { font-size: 1.7rem; line-height: 1; }
/* Raw estimate filter hint */
.wb-filter-hint {
font-family: var(--wb-font-body);
font-size: 1.1rem;
color: var(--wb-text-dim);
font-style: italic;
}
/* Footer newsletter signup (inline, no popup) */
.wb-footer__newsletter {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.6rem 3rem;
padding: 2.4rem 0;
margin-bottom: 1.6rem;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wb-footer__newsletter-title {
font-family: var(--wb-font-heading) !important;
font-size: 2rem !important;
color: #ffffff !important;
margin: 0 0 0.4rem;
}
.wb-footer__newsletter-sub {
font-family: var(--wb-font-body);
font-size: 1.35rem;
color: rgba(255,255,255,0.85);
margin: 0;
max-width: 42rem;
}
.wb-newsletter-form { flex: 1 1 32rem; max-width: 44rem; }
.wb-newsletter-field {
display: flex;
gap: 0.8rem;
}
.wb-newsletter-field input[type="email"] {
flex: 1;
min-width: 0;
font-family: var(--wb-font-body);
font-size: 1.4rem;
padding: 0 1.4rem;
height: 4.6rem;
border: 1.5px solid rgba(255,255,255,0.25);
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: #ffffff;
}
.wb-newsletter-field input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
/* Focus used to be a border-colour change only, invisible against the blue footer
(2026-09-02 audit, UX section 3). */
.wb-newsletter-field input[type="email"]:focus,
.wb-newsletter-field input[type="email"]:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
border-color: #ffffff;
background: rgba(255,255,255,0.14);
}
.wb-newsletter-btn {
flex: none;
font-family: var(--wb-font-body);
font-weight: 700;
font-size: 1.35rem;
padding: 0 2rem;
height: 4.6rem;
border: none;
border-radius: 999px;
background: var(--wb-accent-strong);
color: #ffffff;
cursor: pointer;
transition: background var(--wb-ease);
}
.wb-newsletter-btn:hover { background: #075985; }
.wb-newsletter-btn:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.wb-newsletter-success { font-family: var(--wb-font-body); font-size: 1.4rem; font-weight: 700; color: #ffffff; margin: 0; }
.wb-newsletter-error { font-family: var(--wb-font-body); font-size: 1.25rem; color: #fecaca; margin: 0.6rem 0 0; }
@media screen and (max-width: 749px) {
.wb-footer__newsletter { flex-direction: column; align-items: stretch; }
.wb-newsletter-form { max-width: none; }
}
/* Collection layout: sticky left filter rail + grid on the right */
.wb-collection-layout {
display: flex;
align-items: flex-start;
gap: 2.6rem;
}
.wb-collection-sidebar {
flex: 0 0 234px;
position: sticky;
top: 84px;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.wb-collection-sidebar .wb-filter-bar { max-width: none; margin: 0; padding: 0; }
/* Vertical rail: rows stack with dividers between every group */
.wb-collection-sidebar .wb-filter-row {
padding: 1.2rem 0;
gap: 0.7rem;
}
.wb-collection-sidebar .wb-filter-row--grade,
.wb-collection-sidebar .wb-filter-row--bottom { margin-top: 0; }
.wb-collection-sidebar .wb-filter-row + .wb-filter-row { border-top: 1px solid var(--wb-border); }
.wb-collection-sidebar .wb-filter-group { flex-direction: column; align-items: flex-start; gap: 0.6rem; width: 100%; }
.wb-collection-sidebar .wb-filter-chip--clear { margin-left: 0; }
.wb-collection-sidebar .wb-filter-select { width: 100%; }
.wb-collection-main { flex: 1 1 auto; min-width: 0; }
.wb-collection-main > .page-width,
.wb-collection-main .facets-vertical.page-width,
.wb-collection-main .collection.page-width {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
@media screen and (max-width: 989px) {
.wb-collection-layout { display: block; }
.wb-collection-sidebar {
position: static;
max-height: none;
overflow: visible;
flex-basis: auto;
margin-bottom: 1.6rem;
}
/* Back to a horizontal bar on mobile */
.wb-collection-sidebar .wb-filter-group { flex-direction: row; align-items: center; width: auto; }
.wb-collection-sidebar .wb-filter-select { width: auto; }
}
/* Collection essay rendered as the FAQ section intro (one block) */
.wb-coll-faq__essay {
max-width: 88rem;
margin: 0 auto 2.4rem;
font-family: var(--wb-font-body);
}
.wb-coll-faq__essay h2 {
font-family: var(--wb-font-heading) !important;
font-size: 1.9rem !important;
color: var(--wb-ocean, #0c4a6e) !important;
margin: 2rem 0 0.6rem;
}
.wb-coll-faq__essay p {
font-size: 1.42rem;
line-height: 1.7;
color: var(--wb-text-muted);
margin: 0 0 1rem;
}
.wb-coll-faq__essay a { color: var(--wb-sky, #0369a1); text-decoration: underline; }
/* ============================================================
2026-09-02 audit pass -- readability, tap targets, new components
============================================================ */
/* --- Minimum readable size: nothing under 12px (root font-size is 10px, so
1.2rem = 12px). Audit UX M5 counted 83 sub-12px elements on a collection
page alone. Each rule below replaces a value between 1.0rem and 1.15rem. --- */
.wb-card-badge,
.wb-filter-label,
.wb-filter-hint,
.wb-mobile-nav__sublabel,
.wb-hero__eyebrow,
.wb-footer__col-title,
.wb-article-tag,
.wb-grade-note,
.badge {
font-size: 1.2rem !important;
}
/* Volume badge is sized in em off the card title; keep the ratio but floor it. */
.wb-title-vol {
font-size: max(1.2rem, 0.85em);
}
.wb-title-vol--pdp {
font-size: max(1.2rem, 0.9em);
}
/* Dawn's uppercase micro-caption: the cart table headers and the article date
both use it at 1rem. */
.caption-with-letter-spacing {
font-size: 1.2rem;
}
@media screen and (max-width: 749px) {
.product-card-wrapper .card__heading {
font-size: 1.4rem !important;
}
}
/* --- Tap targets (audit UX M4). Header icons and the hamburger were 3.4rem
(34px) under 750px with only an invisible ::after halo; make the real control
44px. Nav links were 39px tall. --- */
.wb-nav__link {
min-height: 4.4rem;
}
@media screen and (max-width: 749px) {
.wb-header__actions .wb-icon-btn,
.wb-hamburger {
width: 4.4rem;
height: 4.4rem;
}
}
/* Dawn's collection sort select was 141x21px. */
.facets__form select,
.facet-filters__field select,
.facets .select__select {
min-height: 4.4rem;
}
/* --- Sold-out cards: dim the artwork so the state reads at a glance. The badge
stays. Liquid cannot reorder the grid, so they keep their position
(audit item 24). --- */
.card__inner .card__media .media img.wb-card-img--soldout,
.wb-card--soldout .card__media img {
opacity: 0.7;
transition: opacity var(--wb-ease);
}
.wb-card--soldout:hover .card__media img {
opacity: 0.85;
}
/* --- Header predictive search (snippets/wb-search-form.liquid) --- */
.wb-search__predictive {
display: block;
position: relative;
width: 100%;
}
/* The form clips its own corners, so the results panel hangs off the
.wb-search / box instead. */
.wb-search__results {
position: absolute;
top: calc(100% + 0.6rem);
right: 0;
left: auto;
width: 36rem;
max-width: calc(100vw - 3.2rem);
max-height: min(60vh, 48rem);
/* The header is dark; the dropdown is a light surface, so restate the Dawn
colour variables it draws from rather than inheriting the header's. */
--color-foreground: 12, 26, 38;
--color-background: 255, 255, 255;
--color-shadow: 3, 105, 161;
background: #ffffff;
color: var(--wb-text);
border: 1px solid var(--wb-border);
border-radius: var(--wb-radius-sm);
box-shadow: var(--wb-shadow);
text-align: left;
}
.wb-search__results--drawer {
right: auto;
left: 0;
width: 100%;
}
.wb-search__results a,
.wb-search__results .predictive-search__item {
color: var(--wb-text) !important;
}
.wb-search__reset {
width: 3.2rem;
height: 4rem;
flex-shrink: 0;
color: rgba(255, 255, 255, 0.85);
}
.wb-search__reset.hidden {
display: none;
}
@media screen and (max-width: 749px) {
.wb-search__results {
width: 100%;
right: 0;
left: 0;
}
}
/* --- Language switcher: compact icon button pinned to the far right of the header
actions (owner ask 2026-09-03), full-name list in the mobile drawer. Dawn's
component-localization-form.css styles .localization-form__select as a boxed input;
everything below un-boxes it so it reads as one more header icon. --- */
.wb-lang-switch { order: 99; margin-left: 0.2rem; position: relative; }
.wb-hamburger { order: 100; }
.wb-lang-switch .localization-form,
.wb-mobile-nav__lang .localization-form { margin: 0; }
.wb-lang-switch .disclosure { position: static; }
.wb-header .wb-lang-switch .wb-lang-btn.localization-form__select {
display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
width: auto; min-width: 4rem; height: 4rem; min-height: 4rem;
margin: 0; padding: 0 0.7rem;
background: none !important; border: none !important; box-shadow: none !important;
border-radius: var(--wb-radius-xs);
color: rgba(255, 255, 255, 0.85) !important;
font-family: var(--wb-font-body); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em;
line-height: 1; text-align: center;
}
.wb-header .wb-lang-switch .wb-lang-btn.localization-form__select:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.15) !important; }
.wb-lang-switch .wb-lang-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.wb-lang-switch .wb-lang-btn:before,
.wb-lang-switch .wb-lang-btn:after { display: none; }
.wb-lang-switch .wb-lang-btn svg { width: 1.8rem; height: 1.8rem; display: block; position: static; }
.wb-lang-switch .wb-lang-panel {
/* Dawn's component-localization-form.css opens this panel UPWARD (bottom:100% +
translateY(-1rem), for its footer picker). Both top and bottom set = zero-height
white strip, so bottom/transform are reset here to drop it below the button. */
position: absolute; top: calc(100% + 0.4rem); bottom: auto; right: 0; left: auto;
transform: none; overflow: visible; border: 0;
min-width: 16rem; padding: 0.6rem 0; z-index: 30;
background: var(--wb-surface); color: var(--wb-text);
border-radius: var(--wb-radius-xs);
box-shadow: 0 0.8rem 2.4rem rgba(12, 26, 38, 0.22);
}
.wb-lang-switch .disclosure__list { padding: 0; margin: 0; max-height: none; min-width: 0; width: auto; }
.wb-lang-switch .disclosure__link {
display: flex; align-items: center; gap: 0.8rem;
padding: 0.9rem 1.4rem; min-height: 4.4rem;
color: var(--wb-text); font-size: 1.4rem; text-decoration: none;
}
.wb-lang-switch .disclosure__link:hover { background: var(--wb-surface-2); }
.wb-lang-switch .disclosure__link .icon-checkmark { width: 1.2rem; height: 1.2rem; }
.wb-mobile-nav__lang { padding: 0 1.6rem; }
.wb-mobile-nav__lang .localization-form__select { color: #ffffff; min-height: 4.4rem; font-size: 1.4rem; }
/* --- Cart drawer: express checkout stack. Dawn's .cart__ctas is a flex row; the wallet
buttons live outside it (like main-cart-footer) and stack full-width below Check out. --- */
.cart-drawer .cart__ctas { display: block; }
.cart-drawer .cart__checkout-button { width: 100%; max-width: none; min-height: 4.5rem; }
.cart-drawer .wb-drawer-express { margin-top: 1rem; max-width: none; }
.cart-drawer .wb-drawer-express [data-shopify-buttoncontainer] { justify-content: stretch; }
.cart-drawer .wb-drawer-express [data-shopify-buttoncontainer] > * { flex: 1 1 100%; }
.cart-drawer .wb-drawer-express .shopify-cleanslate,
.cart-drawer .wb-drawer-express .shopify-cleanslate > div,
.cart-drawer .wb-drawer-express .shopify-cleanslate ul,
.cart-drawer .wb-drawer-express .shopify-cleanslate li { width: 100% !important; max-width: none !important; }
.cart-drawer .wb-cart-shipbar { padding-top: 1.2rem; }
/* --- Cart drawer: free-shipping progress + discount code --- */
.wb-cart-shipbar {
padding: 0 0 1.2rem;
}
.wb-cart-shipbar__text {
margin: 0 0 0.6rem;
font-family: var(--wb-font-body);
font-size: 1.3rem;
color: var(--wb-text-muted);
}
.wb-cart-shipbar__text--done {
color: var(--wb-accent-strong);
font-weight: 700;
}
.wb-cart-shipbar__track {
height: 0.6rem;
border-radius: 999px;
background: var(--wb-surface-3);
overflow: hidden;
}
.wb-cart-shipbar__fill {
display: block;
height: 100%;
border-radius: 999px;
background: var(--wb-accent-strong);
transition: width var(--wb-ease);
}
.wb-cart-discount {
margin-bottom: 1.2rem;
}
.wb-cart-discount .summary__title {
font-family: var(--wb-font-body);
font-size: 1.3rem;
}
.wb-cart-discount__row {
display: flex;
gap: 0.8rem;
margin-top: 0.8rem;
}
.wb-cart-discount__input {
flex: 1;
min-width: 0;
min-height: 4.4rem;
text-transform: uppercase;
}
.wb-cart-discount__apply {
flex: none;
min-height: 4.4rem;
}
/* --- Product page trust row + sticky add to cart --- */
.wb-trust-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.4rem;
margin: 1.2rem 0 0;
padding: 1.2rem 1.4rem;
border: 1px solid var(--wb-border);
border-radius: var(--wb-radius-sm);
background: var(--wb-surface-2);
font-family: var(--wb-font-body);
font-size: 1.3rem;
line-height: 1.5;
color: var(--wb-text-muted);
}
.wb-trust-row__item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.wb-trust-row__item svg {
flex-shrink: 0;
width: 1.6rem;
height: 1.6rem;
margin-top: 0.1rem;
color: var(--wb-accent-strong);
}
.wb-sticky-atc {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 90;
display: flex;
align-items: center;
gap: 1.6rem;
padding: 1rem 2rem calc(1rem + env(safe-area-inset-bottom));
background: #ffffff;
border-top: 1px solid var(--wb-border);
box-shadow: 0 -2px 16px rgba(3, 105, 161, 0.14);
transform: translateY(110%);
transition: transform 0.22s ease;
visibility: hidden;
}
.wb-sticky-atc.is-visible {
transform: translateY(0);
visibility: visible;
}
.wb-sticky-atc__info {
display: flex;
align-items: center;
gap: 1.2rem;
min-width: 0;
flex: 1;
}
.wb-sticky-atc__thumb {
width: 4.4rem;
height: 4.4rem;
object-fit: cover;
border-radius: var(--wb-radius-xs);
flex-shrink: 0;
}
.wb-sticky-atc__text {
min-width: 0;
}
.wb-sticky-atc__title {
display: block;
font-family: var(--wb-font-body);
font-size: 1.3rem;
font-weight: 700;
color: var(--wb-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wb-sticky-atc__price {
display: block;
font-family: var(--wb-font-body);
font-size: 1.4rem;
color: var(--wb-accent-strong);
font-weight: 700;
}
.wb-sticky-atc__button {
flex: none;
min-height: 4.4rem;
min-width: 16rem;
}
@media screen and (max-width: 749px) {
.wb-sticky-atc {
padding: 0.8rem 1.4rem calc(0.8rem + env(safe-area-inset-bottom));
gap: 1rem;
}
.wb-sticky-atc__button {
min-width: 12rem;
}
.wb-sticky-atc__thumb {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.wb-sticky-atc {
transition: none;
}
}
/* --- Blog article (audit H4 / items 30-33) --- */
.article-template__hero-container img,
.article-template__hero-container .article-template__hero {
max-height: 52rem;
object-fit: cover;
}
.wb-article-byline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 1rem;
margin: 0 0 2rem;
font-family: var(--wb-font-body);
font-size: 1.4rem;
color: var(--wb-text-muted);
}
.wb-article-byline__author {
font-weight: 700;
color: var(--wb-text);
}
.wb-article-end {
max-width: 72rem;
margin: 4rem auto 0;
padding: 0 1.5rem;
}
.wb-article-end__heading {
font-family: var(--wb-font-heading);
font-size: 2rem;
margin: 0 0 1.6rem;
}
.wb-related-guides {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: 1.6rem;
list-style: none;
margin: 0 0 3.2rem;
padding: 0;
}
.wb-related-guides__link {
display: block;
height: 100%;
padding: 1.6rem;
border: 1px solid var(--wb-border);
border-radius: var(--wb-radius-sm);
background: #ffffff;
text-decoration: none;
color: var(--wb-text) !important;
transition: border-color var(--wb-ease), box-shadow var(--wb-ease);
}
.wb-related-guides__link:hover {
border-color: var(--wb-accent-strong);
box-shadow: var(--wb-shadow-sm);
}
.wb-related-guides__title {
display: block;
font-family: var(--wb-font-body);
font-weight: 700;
font-size: 1.5rem;
line-height: 1.35;
}
.wb-related-guides__date {
display: block;
margin-top: 0.6rem;
font-size: 1.2rem;
color: var(--wb-text-muted);
}
.wb-article-shop {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.6rem;
padding: 2rem;
margin-bottom: 3.2rem;
border-radius: var(--wb-radius);
background: var(--wb-surface-2);
border: 1px solid var(--wb-border);
}
.wb-article-shop__text {
flex: 1 1 24rem;
min-width: 0;
}
.wb-article-shop__title {
font-family: var(--wb-font-heading);
font-size: 2rem;
margin: 0 0 0.4rem;
}
.wb-article-shop__sub {
margin: 0;
font-size: 1.4rem;
}
/* --- 404 (audit UX L7 / item 44) --- */
.wb-404-help {
max-width: 60rem;
margin: 3.2rem auto 0;
text-align: left;
}
.wb-404-help__heading {
font-family: var(--wb-font-heading);
font-size: 1.8rem;
margin: 0 0 1.2rem;
}
.wb-404-search {
display: flex;
gap: 0.8rem;
margin-bottom: 3.2rem;
}
.wb-404-search .field__input {
flex: 1;
min-width: 0;
min-height: 4.4rem;
}
.wb-404-search .button {
flex: none;
min-height: 4.4rem;
}
.wb-404-links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: 0.8rem 2rem;
}
.wb-404-links a {
display: block;
padding: 0.8rem 0;
min-height: 4.4rem;
font-weight: 700;
}
/* Title parts on the PDP H1: the volume keeps its badge look, the rest of the
product title follows on its own line at a calmer weight. */
.wb-title-series { display: block; }
.wb-title-rest {
display: block;
font-family: var(--wb-font-body);
font-size: max(1.4rem, 0.5em);
font-weight: 700;
line-height: 1.35;
color: var(--wb-text-muted);
margin-top: 0.3em;
}
/* Add-to-cart "Added" flash (assets/wb-sticky-atc.js). */
.wb-atc--added,
.wb-atc--added:hover {
background-color: #047857 !important;
border-color: #047857 !important;
color: #ffffff !important;
}