/* ==========================================================================
PC Butlers Store — public storefront
Mobile-first: base rules target small screens, media queries scale up.
========================================================================== */
:root {
color-scheme: light;
--primary: #667eea;
--primary-dark: #5563c1;
--secondary: #764ba2;
--accent: #f5a623;
--ink: #1c1e2b;
--ink-soft: #4b4f63;
/* Pinned copies of the light-mode --ink/--ink-soft values — for the
handful of components below that pair ink/ink-soft with a background
that's ALSO fixed regardless of theme (a literal white/cream chip,
not var(--paper)). --ink itself becomes a light color in dark mode
(see [data-theme="dark"] below), which would make those specific pairs
unreadable if they kept using var(--ink) directly. */
--ink-fixed: #1c1e2b;
--ink-soft-fixed: #4b4f63;
--paper: #ffffff;
--paper-soft: #f6f6fb;
--border: #e3e4ef;
--success: #27ae60;
--danger: #d9534f;
--radius: 12px;
--shadow: 0 4px 16px rgba(28, 30, 43, 0.08);
--shadow-lg: 0 12px 32px rgba(28, 30, 43, 0.16);
--header-h: 72px;
}
/* ---------- dark mode ----------
Manual toggle (switch in the header, see .theme-toggle-btn) backed by
localStorage. The inline script at the top of store/includes/header.php
resolves the effective theme (saved choice, else light) and
stamps data-theme on synchronously, before this stylesheet is
requested — so every dark rule only has to key off [data-theme="dark"],
and there's no flash of the wrong theme on first load either. */
:root[data-theme="dark"] {
color-scheme: dark;
--primary: #7d8bf0;
--primary-dark: #9aa8f7;
--secondary: #9c7ecf;
--ink: #eef0fa;
--ink-soft: #b7bad2;
--paper: #23253a;
--paper-soft: #16171f;
--border: #34364a;
--shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--ink);
background: var(--paper-soft);
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
.section {
padding: 40px 0;
}
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.section-head h2 {
font-size: 1.4rem;
margin: 0;
}
.section-head p {
margin: 4px 0 0;
color: var(--ink-soft);
font-size: 0.92rem;
}
.section-link {
font-weight: 600;
color: var(--primary);
white-space: nowrap;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
font-weight: 700;
color: var(--primary);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
border: none;
border-radius: 999px;
padding: 11px 22px;
font-weight: 600;
font-size: 0.92rem;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: #fff;
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.45); }
/* Same flat brand color as .messenger-btn-icon's floating "Chat with Us"
bubble (footer.php) — used specifically for buttons that launch Messenger,
so they read as "this one opens Messenger" rather than blending into every
other primary CTA's gradient. */
.btn-messenger {
background: var(--primary);
color: #fff;
box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}
.btn-messenger:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(102, 126, 234, 0.45); }
.btn:disabled {
background: #c7cad1;
color: #6b7280;
box-shadow: none;
cursor: not-allowed;
opacity: 0.75;
}
.btn:disabled:hover { transform: none; box-shadow: none; }
.btn-ghost {
background: rgba(255, 255, 255, 0.14);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.55);
}
.btn-outline {
background: transparent;
border: 1px solid var(--border);
color: var(--ink);
}
.btn-block { width: 100%; }
/* ---------- skip link ---------- */
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--ink-fixed);
color: #fff;
padding: 10px 16px;
z-index: 200;
border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
/* ---------- staff "Login as Customer" banner ---------- */
/* Deliberately not gated behind the .topbar desktop-only breakpoint below —
this needs to stay visible on every screen size. */
.impersonation-banner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
background: #dc2626;
color: #fff;
font-size: 0.82rem;
font-weight: 600;
text-align: center;
padding: 8px 12px;
}
.impersonation-banner button {
background: #fff;
color: #dc2626;
border: none;
border-radius: 4px;
padding: 3px 10px;
font-size: 0.78rem;
font-weight: 700;
cursor: pointer;
}
.impersonation-banner button:hover { background: #f3f4f6; }
/* ---------- top utility bar ---------- */
.topbar {
display: none;
background: var(--ink-fixed);
color: #d9dbf0;
font-size: 0.78rem;
text-align: center;
padding: 4px 12px;
}
.topbar strong { color: var(--accent); }
/* ---------- header / nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--paper);
border-bottom: 1px solid var(--border);
}
.nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 10px 16px;
min-height: var(--header-h);
}
.nav-brand {
display: flex;
align-items: center;
gap: 8px;
font-weight: 800;
font-size: 1.05rem;
min-width: 0;
}
.nav-brand img { height: 42px; width: auto; flex-shrink: 0; }
/* Logo never shrinks; the text block does. The name stays on one line
(it's short and always fits), while the slogan shrinks its font first
and, on the narrowest phones, wraps to a second line rather than ever
cutting off text with an ellipsis. */
.nav-brand-text {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.15;
min-width: 0;
max-width: 108px;
}
.nav-brand-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.92rem;
line-height: 1;
}
.nav-brand-subtitle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.7rem;
font-weight: 700;
color: var(--ink-soft);
line-height: 1;
margin-top: -1px;
}
.nav-brand-slogan {
font-size: 0.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--primary);
margin-top: 3px;
}
@media (min-width: 400px) {
.nav-brand-slogan { font-size: 0.56rem; letter-spacing: 0.04em; }
}
@media (min-width: 480px) {
.nav-brand { gap: 10px; }
.nav-brand-text { max-width: none; }
.nav-brand img { height: 54px; }
.nav-brand-name { font-size: 1.3rem; }
.nav-brand-subtitle { font-size: 0.95rem; }
.nav-brand-slogan { font-size: 0.7rem; white-space: nowrap; margin-top: 4px; }
}
.nav-toggle {
background: none;
border: none;
border-radius: 8px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 4px;
order: 3;
flex-shrink: 0;
}
.nav-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.nav-toggle span {
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-search {
order: 4;
flex-basis: 100%;
display: block;
margin-top: 10px;
position: relative;
}
.nav-search form {
display: flex;
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
background: var(--paper-soft);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-search form:focus-within {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.nav-search input {
flex: 1;
border: none;
background: transparent;
padding: 14px 20px;
font-size: 1.02rem;
outline: none;
min-width: 0;
}
.nav-search button {
border: none;
background: var(--primary);
color: #fff;
padding: 0 20px;
display: flex;
align-items: center;
}
.nav-search-suggestions {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
max-height: 420px;
overflow-y: auto;
z-index: 20;
}
.nav-search-empty { padding: 16px; text-align: center; color: var(--ink-soft); font-size: 0.88rem; }
.nav-search-group + .nav-search-group { border-top: 1px solid var(--border); }
.nav-search-group-label {
padding: 8px 12px 4px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink-soft);
}
.nav-search-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
color: inherit;
text-decoration: none;
}
.nav-search-item:hover,
.nav-search-item.is-active { background: var(--paper-soft); }
.nav-search-item-thumb { width: 34px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--paper-soft); flex-shrink: 0; }
.nav-search-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nav-search-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-search-item-name { font-weight: 700; font-size: 0.88rem; }
.nav-search-item-sub { font-size: 0.76rem; color: var(--ink-soft); }
.nav-search-item-price { margin-left: auto; padding-left: 8px; font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.nav-icon-btn {
background: none;
border: none;
padding: 7px;
display: flex;
color: var(--ink);
}
@media (min-width: 480px) {
.nav-icon-btn { padding: 9px; }
}
/* Lightweight hover/focus tooltip for icon-only buttons (e.g. sell/cart). */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(2px);
background: var(--ink-fixed);
color: #fff;
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
padding: 5px 9px;
border-radius: 6px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 20;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(8px);
}
.nav-actions {
display: flex;
align-items: center;
gap: 2px;
order: 2;
flex-shrink: 0;
}
.nav-icon-group {
display: flex;
align-items: center;
gap: 2px;
order: 2;
flex-shrink: 0;
}
.nav-links {
order: 5;
flex-basis: 100%;
display: none;
flex-direction: column;
gap: 2px;
border-top: 1px solid var(--border);
margin-top: 10px;
padding-top: 10px;
}
.nav-links.is-open { display: flex; }
.nav-links a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
font-weight: 600;
color: var(--ink);
border-radius: 10px;
transition: background 0.15s ease, color 0.15s ease;
}
.nav-links a svg { flex-shrink: 0; color: var(--ink-soft); transition: color 0.15s ease; }
.nav-links a:hover { background: var(--paper-soft); }
.nav-links a.active { background: rgba(102, 126, 234, 0.1); color: var(--primary); }
.nav-links a.active svg { color: var(--primary); }
/* Dark-mode switch, mobile copy — lives inside the hamburger menu instead of
the icon row (see .theme-toggle-btn/.nav-icon-group below and the
≥860px override further down) so it doesn't compete for space with
sell/cart on narrow screens. Styled like the .nav-links a rows above it,
with the switch pinned to the row's trailing edge. */
.nav-theme-toggle-item {
border-top: 1px solid var(--border);
margin-top: 6px;
padding-top: 6px;
}
.nav-theme-toggle {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
font-weight: 600;
color: var(--ink);
border-radius: 10px;
cursor: pointer;
transition: background 0.15s ease;
}
.nav-theme-toggle svg { flex-shrink: 0; color: var(--ink-soft); }
.nav-theme-toggle span { flex: 1; }
.nav-theme-toggle .switch { flex: 0 0 auto; }
.nav-theme-toggle:hover { background: var(--paper-soft); }
/* Desktop copy — hidden on mobile, where the .nav-theme-toggle-item above
takes over instead (see the ≥860px override further down which flips
which of the two is shown). */
.nav-icon-group .theme-toggle-btn { display: none; }
.nav-login {
display: none;
}
@media (min-width: 860px) {
.topbar { display: block; }
.nav { flex-wrap: nowrap; gap: 12px; padding: 12px 24px; justify-content: flex-start; }
.nav-toggle { display: none; }
/* nav-links + search + login share this row and can get tight around
860px, so give the slogan the same overflow:hidden safety-net
ellipsis the name already has — it's rarely reached since there's
normally plenty of room, it just avoids the slogan overlapping the
nav links at the narrowest desktop widths. */
.nav-brand-slogan {
overflow: hidden;
text-overflow: ellipsis;
}
.nav-links {
order: 2;
flex: 1 1 auto;
display: flex !important;
flex-direction: row;
justify-content: center;
flex-basis: auto;
border: none;
margin: 0;
padding: 0;
gap: 22px;
}
.nav-links a {
padding: 6px 2px;
position: relative;
gap: 0;
border-radius: 0;
}
.nav-links a svg { display: none; }
.nav-links a:hover { background: none; }
.nav-links a.active { background: none; }
.nav-links a.active::after,
.nav-links a:hover::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -14px;
height: 2px;
background: var(--primary);
}
.nav-search {
order: 3;
display: block;
flex: 0 1 420px;
min-width: 260px;
}
.nav-actions { display: none; }
.nav-icon-group { order: 4; }
/* Swap which of the two dark-mode switch copies is shown — see the base
rules for both, and the header/footer comments in header.php, for why
there are two instead of one repositioned element: .nav-links flips
between a mobile dropdown and an always-visible horizontal menu at this
same breakpoint, so a single shared element can't cleanly live in both. */
.nav-icon-group .theme-toggle-btn { display: flex; }
.nav-theme-toggle-item { display: none; }
.nav-login {
display: inline-flex;
order: 5;
}
}
/* ---------- hero carousel ---------- */
.hero {
position: relative;
overflow: hidden;
background: var(--ink-fixed);
}
.hero-track {
position: relative;
height: 62vw;
min-height: 320px;
max-height: 560px;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
}
/* .hero-slide--allow-clip is currently a no-op (background-size is already
cover by default) — store-dashboard.php's "Allow image clipping" toggle
and the allow_clipping DB column/API fields are still there, just
dormant. If a banner with text/CTAs baked into the edges comes back and
needs crop-safe handling again, flip this default to
background-size:contain and give .hero-slide--allow-clip
background-size:cover, matching how it worked before this rollback. */
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(10, 8, 20, 0.92) 0%, rgba(10, 8, 20, 0.35) 55%, rgba(10, 8, 20, 0.15) 100%);
}
.hero-copy {
position: relative;
color: #fff;
padding: 24px 16px 32px;
max-width: 620px;
}
.hero-copy .eyebrow { color: var(--accent); }
.hero-copy h1 {
font-size: 1.6rem;
line-height: 1.2;
margin: 8px 0 8px;
}
.hero-copy p {
margin: 0 0 16px;
color: #e6e6f5;
font-size: 0.95rem;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.35);
border: none;
color: #fff;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
z-index: 5;
}
.hero-nav.prev { left: 10px; }
.hero-nav.next { right: 10px; }
.hero-dots {
position: absolute;
bottom: 14px;
right: 16px;
display: flex;
gap: 6px;
z-index: 5;
}
.hero-dots button {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.45);
padding: 0;
}
.hero-dots button.is-active { background: var(--accent); width: 22px; border-radius: 5px; }
@media (min-width: 640px) {
.hero-copy h1 { font-size: 2.2rem; }
.hero-copy p { font-size: 1.05rem; }
.hero-copy { padding: 32px 40px 44px; }
}
@media (min-width: 860px) {
.hero-track { height: 42vw; }
.hero-copy h1 { font-size: 2.7rem; }
}
/* ---------- category grid ---------- */
.cat-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.cat-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 14px;
color: #fff;
background-size: cover;
background-position: center;
box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cat-card:hover {
transform: scale(1.03);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
z-index: 1;
}
.cat-card::before {
content: "";
position: absolute;
inset: 0;
/* Only shades the bottom, behind the label text, so the image itself stays bright. */
background: linear-gradient(180deg, rgba(28, 30, 43, 0) 45%, rgba(28, 30, 43, 0.7) 100%);
}
.cat-card.no-image {
background: linear-gradient(160deg, var(--secondary), var(--ink-fixed));
}
.cat-card.no-image::before { content: none; }
.cat-card span {
position: relative;
font-weight: 700;
font-size: 0.95rem;
transition: text-shadow 0.25s ease;
}
.cat-card small {
position: relative;
display: block;
font-weight: 500;
font-size: 0.72rem;
color: #d9dbf0;
margin-top: 2px;
transition: text-shadow 0.25s ease;
}
.cat-card:hover span,
.cat-card:hover small {
text-shadow: 0 0 12px rgba(255, 255, 255, 0.85);
}
@media (min-width: 640px) {
.cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
.cat-grid { grid-template-columns: repeat(6, 1fr); }
.cat-card { min-height: 160px; }
}
/* ---------- product carousel (up to 30 featured items) ---------- */
.product-carousel {
position: relative;
}
.product-track {
--cols: 2;
--gap: 14px;
display: flex;
gap: var(--gap);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px 2px 10px;
width: 100%;
}
.product-track::-webkit-scrollbar { display: none; }
/* Floating independently of the track's flex flow (position: absolute) —
the track's width must stay constant when a nav button's hidden state
toggles during scroll, otherwise the visible cards visibly resize/reflow
each time (was previously a flex sibling of the track). */
.product-carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--paper);
color: var(--ink);
box-shadow: var(--shadow);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
z-index: 2;
}
.product-carousel-nav.prev { left: 2px; }
.product-carousel-nav.next { right: 2px; }
.product-carousel-nav:disabled { opacity: 0.35; pointer-events: none; }
.carousel-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 4px;
}
.carousel-dots button {
width: 7px;
height: 7px;
border-radius: 999px;
border: none;
background: var(--border);
padding: 0;
}
.carousel-dots button.is-active { background: var(--primary); width: 20px; }
.product-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
transition: transform 0.15s ease, box-shadow 0.15s ease;
flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
scroll-snap-align: start;
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.product-media {
position: relative;
aspect-ratio: 5 / 7;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
/* Other (non-MTG) product photos aren't a fixed card ratio like MTG scans —
cropping them to fill the 5:7 box cuts off real product detail. Show the
whole photo instead, letterboxed on the tile's own background. The default
blue/purple gradient below is fine under `cover` (fully hidden behind the
image) but shows through `contain`'s letterboxing, so swap it for the same
light neutral .item-image-frame/.item-thumb already use behind OTH photos. */
.product-media.is-oth { background: var(--paper-soft); }
.product-media.is-oth img { object-fit: contain; }
/* Foil treatment — mirrors .foil-glow in assets/css/main.css (store-dashboard.php) */
.product-media.foil-glow img {
filter: brightness(1.08) saturate(1.18);
}
.product-media.foil-glow::after {
content: '';
position: absolute;
inset: 0;
background-image: url(../../../assets/foil.gif);
background-size: 100% 100%;
opacity: 0.35;
pointer-events: none;
z-index: 1;
}
.product-card:has(.foil-glow) {
border-color: #e8c766;
box-shadow: 0 0 0 1px #e8c766 inset, var(--shadow);
}
/* Loading spinner shown over card/product images while they're still
fetching (Scryfall images especially can be slow on our dev-spec server)
— the gradient background these containers already have would otherwise
look identical whether an image is loading or just missing. Applied via
JS (setupImageLoadingSpinners() in store.js): the img starts with
.is-loading (opacity: 0) and a sibling .img-loading-spinner, both
cleared once the image's load/error event fires.
Every container this is used in (.product-media, .item-image-frame,
.cart-line-media) already has position: relative. */
.img-loading-spinner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* A backdrop disc behind the ring, rather than relying on the ring's own
contrast against the page — .item-image-frame sits on a near-white
background (--paper-soft) where a plain white ring all but disappears,
while .product-media's purple gradient looks fine either way. The disc
guarantees the ring reads clearly no matter what's underneath it. */
.img-loading-spinner::before {
content: '';
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.35);
position: absolute;
}
.img-loading-spinner::after {
content: '';
width: 24px;
height: 24px;
border: 3px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: img-spinner-rotate 0.8s linear infinite;
}
@keyframes img-spinner-rotate {
to { transform: rotate(360deg); }
}
.product-media img.is-loading,
.item-image-frame img.is-loading,
.cart-line-media img.is-loading {
opacity: 0;
}
.product-media img,
.item-image-frame img,
.cart-line-media img {
transition: opacity 0.2s ease;
}
.badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--accent);
color: #241a00;
font-size: 0.65rem;
font-weight: 800;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
z-index: 2;
}
.badge.new { background: var(--success); color: #fff; }
.badge.foil {
background: linear-gradient(120deg, #fff6d8, #e8c766 45%, #fff6d8 70%, #c9a227);
color: #4a3600;
}
.badge.low { background: var(--danger); color: #fff; }
.badge.lang { left: auto; right: 8px; background: rgba(0, 0, 0, 0.65); color: #fff; }
/* Surge/Etched/Serialized sub-type — stacks directly under .badge.foil,
which is the only badge it ever appears alongside (see
renderFoilFinishBadge() in store/includes/catalog.php), same colors so
it reads as part of the same "foil" family rather than a separate status. */
.badge.foil-finish {
top: 34px;
background: linear-gradient(120deg, #fff6d8, #e8c766 45%, #fff6d8 70%, #c9a227);
color: #4a3600;
font-size: 0.6rem;
}
/* Item detail page's hero image is far bigger than a shop/related-rail tile
(see .item-image-frame vs .product-media) — the same badge sizing there
reads as too small next to it, so scale up specifically in that context. */
.item-image-frame .badge {
top: 12px;
left: 12px;
font-size: 1rem;
padding: 6px 14px;
}
.item-image-frame .badge.lang { left: auto; right: 12px; }
.item-image-frame .badge.foil-finish {
top: 52px;
font-size: 0.85rem;
}
/* Hot Buylist rail (store/index.php) — the plain "X Wanted" badge already
occupies the usual top-left slot, so Foil (and its Surge/Etched/Serialized
sub-type) stack underneath it instead of overlapping. */
#hotBuylistTrack .badge.foil { top: 34px; }
#hotBuylistTrack .badge.foil-finish { top: 60px; }
/* Pre-Order item at 0 stock (store_inventory_oth_preorder_migration.sql) —
stays browsable instead of disappearing from search, marked with this
diagonal ribbon over its image instead. Used on both the shop-grid tile
(.product-media) and the item detail hero (.item-image-frame), which are
both already position: relative (see the .img-loading-spinner comment above). */
.watermark-sold-out {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 2;
}
.watermark-sold-out span {
transform: rotate(-20deg);
background: var(--danger);
color: #fff;
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 20px;
border-radius: 4px;
border: 2px solid #000;
box-shadow: var(--shadow);
}
.item-image-frame .watermark-sold-out span { font-size: 1.15rem; padding: 8px 32px; }
.product-body {
padding: 10px 12px 12px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.product-set {
font-size: 0.68rem;
color: var(--ink-soft);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.product-name {
font-size: 0.88rem;
font-weight: 700;
line-height: 1.25;
min-height: 2.4em;
}
.product-name-real {
display: block;
font-size: 0.78em;
font-weight: 400;
color: var(--ink-soft);
margin-top: 1px;
}
.product-foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.product-price { font-weight: 800; color: var(--ink); }
.product-price .from { font-weight: 500; color: var(--ink-soft); font-size: 0.7rem; }
.add-btn {
border: none;
background: var(--paper-soft);
color: var(--primary);
width: 32px;
height: 32px;
border-radius: 50%;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
}
.add-btn:hover { background: var(--primary); color: #fff; }
@media (min-width: 640px) {
.product-track { --cols: 3; }
}
@media (min-width: 960px) {
.product-track { --cols: 5; }
}
/* "Other Editions" rail (item.php) — same carousel, cards at ~75% size of
"You may also like" from tablet up (cols * 1.33), since these are just
alternate printings of one card, not a full product browse. On phones,
matches "You may also like" exactly — 75% sizing there was too cramped. */
@media (min-width: 640px) {
#editionsTrack { --cols: 4; }
}
@media (min-width: 960px) {
#editionsTrack { --cols: 7; }
}
/* ---------- news / events ---------- */
.news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.news-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.news-media {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--secondary), var(--ink-fixed));
position: relative;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 12px;
transition: filter 0.2s ease;
}
.news-media:hover { filter: brightness(0.92); }
.news-date {
position: absolute;
top: 10px;
left: 10px;
background: #fff;
color: var(--ink);
border-radius: 8px;
padding: 6px 8px;
text-align: center;
line-height: 1.1;
box-shadow: var(--shadow);
}
.news-date b { display: block; font-size: 1.05rem; }
.news-date span { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; }
.news-tag {
align-self: flex-start;
background: rgba(255,255,255,0.18);
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
margin-bottom: 6px;
}
.news-body { padding: 12px 14px 16px; }
.news-body h3 { margin: 0 0 6px; font-size: 1rem; }
.news-body p { margin: 0; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.45; }
.news-read-more-link { color: var(--primary); font-weight: 700; font-size: 1.05rem; display: inline-block; margin-top: 10px; }
.news-read-more-link:hover { text-decoration: underline; }
@media (min-width: 700px) {
.news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.news-grid { grid-template-columns: repeat(4, 1fr); }
}
.news-modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.news-modal-overlay.is-open { display: flex; }
.news-modal {
background: var(--paper);
border-radius: var(--radius);
box-shadow: var(--shadow);
width: 100%;
max-width: 880px;
max-height: 92vh;
overflow-y: auto;
position: relative;
}
.news-modal-banner {
width: 100%;
line-height: 0;
background: var(--ink-fixed);
border-radius: var(--radius) var(--radius) 0 0;
overflow: hidden;
}
.news-modal-banner img {
display: block;
width: 100%;
height: auto;
max-height: 60vh;
object-fit: contain;
margin: 0 auto;
}
.news-modal-body { padding: 28px; }
.news-modal-banner[hidden] + .news-modal-body { padding-top: 56px; }
.news-modal-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
font-size: 0.85rem;
color: var(--ink-soft);
}
.news-modal-tag {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 4px 10px;
border-radius: 999px;
}
.news-modal h3 { margin: 0 24px 14px 0; }
.news-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(28, 30, 43, 0.55);
border: none;
border-radius: 50%;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
color: #fff;
z-index: 1;
}
.news-modal-close:hover { background: rgba(28, 30, 43, 0.75); }
#newsDetailContent { color: var(--ink-soft); line-height: 1.7; }
#newsDetailContent img { max-width: 100%; border-radius: 8px; }
/* ---------- news detail page ("page" display mode) ---------- */
.news-detail-page { max-width: 800px; margin: 0 auto; padding: 20px 0 60px; }
.news-detail-banner {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
overflow: hidden;
background: var(--ink-fixed);
margin-bottom: 20px;
}
.news-detail-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-detail-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-bottom: 10px;
font-size: 0.85rem;
color: var(--ink-soft);
}
.news-detail-page h1 {
margin: 0 0 20px;
font-size: 1.5rem;
line-height: 1.3;
word-break: break-word;
}
.news-detail-content { color: var(--ink-soft); line-height: 1.7; font-size: 0.95rem; }
.news-detail-content img { max-width: 100%; height: auto; border-radius: 8px; }
.news-detail-content iframe { max-width: 100%; }
@media (min-width: 640px) {
.news-detail-page { padding: 32px 0 70px; }
.news-detail-banner { margin-bottom: 24px; }
.news-detail-page h1 { font-size: 1.9rem; }
.news-detail-content { font-size: 1rem; }
}
.news-back-link { display: inline-block; margin-top: 30px; color: var(--primary); font-weight: 700; font-size: 0.9rem; }
/* ---------- static info pages (Shipping & Pickup, Returns, FAQ) ---------- */
.info-page { max-width: 760px; margin: 0 auto; padding: 20px 0 70px; }
.info-page h1 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.3; }
.info-page-intro { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; margin: 0 0 30px; }
.info-section { margin-bottom: 28px; }
.info-section h2 { font-size: 1.1rem; margin: 0 0 10px; }
.info-section p { color: var(--ink-soft); line-height: 1.7; font-size: 0.92rem; margin: 0 0 10px; }
.info-section p:last-child { margin-bottom: 0; }
.info-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.info-list li {
color: var(--ink-soft);
line-height: 1.6;
font-size: 0.92rem;
padding: 10px 14px;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 8px;
}
.info-list li strong { color: var(--ink); }
.info-page-footnote { color: var(--ink-soft); font-size: 0.88rem; padding-top: 20px; border-top: 1px solid var(--border); }
@media (min-width: 640px) {
.info-page { padding: 32px 0 80px; }
.info-page h1 { font-size: 1.9rem; }
}
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--paper);
padding: 4px 18px;
}
.faq-item summary {
padding: 14px 0;
font-weight: 700;
font-size: 0.95rem;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
flex-shrink: 0;
font-size: 1.3rem;
font-weight: 400;
color: var(--primary);
transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0 0 16px; color: var(--ink-soft); line-height: 1.6; font-size: 0.9rem; }
/* ---------- card condition guide ---------- */
.info-page-wide { max-width: 980px; }
.info-page-note {
font-size: 0.84rem;
color: var(--ink-soft);
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 14px;
margin: 0 0 24px;
}
/* Prose links inside the static info pages get no styling by default
(global `a { color: inherit }`) — make them read as links. */
.info-page p a,
.info-page-intro a,
.info-page-note a,
.info-page-footnote a,
.condition-row p a {
color: var(--primary);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(102, 126, 234, 0.4);
text-underline-offset: 2px;
}
.info-page p a:hover,
.info-page-intro a:hover,
.info-page-note a:hover,
.info-page-footnote a:hover,
.condition-row p a:hover { text-decoration-color: currentColor; }
.link-highlight {
color: var(--primary) !important;
font-weight: 800 !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
}
.condition-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.condition-row {
display: flex;
flex-direction: column;
gap: 14px;
border: 1px solid var(--border);
border-left: 4px solid var(--border);
border-radius: var(--radius);
background: var(--paper);
padding: 16px;
}
.condition-row-body { flex: 1; min-width: 0; }
.condition-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; }
.condition-card-head h3 { margin: 0; font-size: 1.05rem; flex: 1; }
.condition-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 26px;
padding: 0 8px;
border-radius: 6px;
font-weight: 800;
font-size: 0.76rem;
letter-spacing: 0.02em;
}
.condition-row p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft); }
.condition-row-m { border-left-color: var(--secondary); }
.condition-row-m .condition-badge { background: rgba(118, 75, 162, 0.14); color: var(--secondary); }
.condition-row-nm { border-left-color: var(--success); }
.condition-row-nm .condition-badge { background: rgba(39, 174, 96, 0.14); color: var(--success); }
.condition-row-lp { border-left-color: var(--primary); }
.condition-row-lp .condition-badge { background: rgba(102, 126, 234, 0.14); color: var(--primary); }
.condition-row-mp { border-left-color: var(--accent); }
.condition-row-mp .condition-badge { background: rgba(245, 166, 35, 0.16); color: #a15c00; }
.condition-row-hp { border-left-color: #d9822b; }
.condition-row-hp .condition-badge { background: rgba(217, 130, 43, 0.16); color: #a15c00; }
.condition-row-d { border-left-color: var(--danger); }
.condition-row-d .condition-badge { background: rgba(217, 83, 79, 0.14); color: var(--danger); }
/* Per-grade reference photos — the same physical card shot at each grade
(see store/assets/img/conditions/), cropped to its corner/border where
wear is easiest to spot. */
.condition-thumb-wide {
width: 100%;
aspect-ratio: 2 / 1;
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow);
background-color: var(--paper-soft);
}
.condition-thumb-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 640px) {
.condition-row { flex-direction: row; align-items: center; padding: 18px 22px; gap: 24px; }
.condition-thumb-wide { width: 300px; flex-shrink: 0; }
}
@media (min-width: 900px) {
.condition-thumb-wide { width: 360px; }
}
/* ---------- buylist payout guide (condition guide + sell page) ---------- */
.payout-guide { margin: 36px 0 30px; }
.payout-guide h2 { font-size: 1.15rem; margin: 0 0 6px; }
.payout-guide-intro { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin: 0 0 14px; }
.payout-table {
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
background: var(--paper);
}
.payout-table-row {
display: grid;
grid-template-columns: 1fr 90px 1fr;
gap: 8px 14px;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--border);
border-left: 3px solid var(--border);
}
.payout-table-row:last-child { border-bottom: none; }
.payout-table-head {
background: var(--paper-soft);
font-weight: 700;
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--ink-soft);
border-left-color: transparent;
}
.payout-condition { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.payout-percent { font-weight: 800; color: var(--primary); }
.payout-note { color: var(--ink-soft); font-size: 0.88rem; }
.payout-guide-footnote {
color: var(--ink-soft);
font-size: 0.84rem;
margin: 14px 0 0;
background: rgba(245, 166, 35, 0.12);
border: 1px solid rgba(245, 166, 35, 0.35);
border-left: 3px solid var(--accent);
border-radius: 8px;
padding: 10px 14px;
}
.payout-guide-footnote strong { color: var(--ink); }
@media (max-width: 560px) {
.payout-table-row { grid-template-columns: 1fr 70px; }
.payout-note { grid-column: 1 / -1; }
}
.payout-guide-toggle summary {
cursor: pointer;
font-weight: 700;
color: var(--primary);
font-size: 0.92rem;
margin: 0 0 14px;
}
.payout-guide-toggle[open] summary { margin-bottom: 14px; }
.payout-guide-toggle .payout-guide-intro,
.payout-guide-toggle .payout-guide-footnote { margin-top: 10px; }
/* ---------- promo strip ---------- */
.promo-strip {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: #fff;
border-radius: var(--radius);
padding: 22px;
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
}
.promo-strip h3 { margin: 0; font-size: 1.2rem; }
.promo-strip p { margin: 4px 0 0; color: #eceafd; font-size: 0.9rem; }
.promo-strip-dismissible { position: relative; padding-right: 46px; margin-top: 16px; }
.promo-strip-actions { display: flex; align-items: center; gap: 10px; }
.promo-strip-close {
position: absolute;
top: 10px;
right: 10px;
width: 26px;
height: 26px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: #fff;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.promo-strip-close:hover { background: rgba(255, 255, 255, 0.32); }
@media (min-width: 720px) {
.promo-strip { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* ---------- promo strip floating card visual ---------- */
/* Unlike the base .promo-strip (still column-stacked on mobile, e.g. the
dismissible decklist-import promo on shop.php), a strip with the floating
card image sits in a row even on mobile — the image is small enough now
to sit beside the text instead of stacking above it. */
.promo-strip-with-visual {
position: relative;
overflow: visible;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.promo-strip-with-visual > div { flex: 1 1 140px; min-width: 0; }
.promo-strip-img {
display: block;
width: 76px;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
/* rotate/translate as separate properties (not the combined `transform`
shorthand) so the align-right override below can change rotate alone
without a specificity fight clobbering the desktop centering below —
that clash previously left the image un-centered whenever it was on
the right. */
rotate: -10deg;
flex-shrink: 0;
}
@media (min-width: 720px) {
/* Card is bigger than the strip and overflows top/bottom; give this
section extra padding so it doesn't crowd the sections around it. */
.section-promo { padding: 64px 0; }
/* Strip height stays fixed to its text/button content; the card is pulled
out of flow and overlaid so it can spill above/below that height. */
.promo-strip-with-visual { padding-left: 210px; }
.promo-strip-with-visual .promo-strip-img {
position: absolute;
left: 24px;
top: 50%;
width: 150px;
translate: 0 -50%;
z-index: 2;
}
}
/* ---------- promo strip color schemes ---------- */
.promo-strip--brand { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; }
.promo-strip--brand p { color: #eceafd; }
.promo-strip--brand .btn { background: #fff; color: var(--primary); }
.promo-strip--gold { background: linear-gradient(120deg, #fff6d8, #e8c766 45%, #fff6d8 70%, #c9a227); color: var(--ink-fixed); }
.promo-strip--gold p { color: var(--ink-soft-fixed); }
.promo-strip--gold .btn { background: var(--ink-fixed); color: #fff6d8; }
.promo-strip--ink { background: var(--ink-fixed); color: #fff; }
.promo-strip--ink p { color: #c7c9d6; }
.promo-strip--ink .btn { background: var(--accent); color: var(--ink-fixed); }
.promo-strip--paper { background: var(--paper); color: var(--ink); border: 1px solid var(--border); box-shadow: var(--shadow); }
.promo-strip--paper p { color: var(--ink-soft); }
.promo-strip--paper .btn { background: var(--primary); color: #fff; }
/* ---------- promo strip align-right (image + button swap sides) ---------- */
.promo-strip-with-visual.promo-strip--align-right { flex-direction: row-reverse; }
.promo-strip-with-visual.promo-strip--align-right .promo-strip-img { rotate: 10deg; }
@media (min-width: 720px) {
.promo-strip--align-right { padding-left: 22px; padding-right: 210px; }
.promo-strip--align-right .promo-strip-img { left: auto; right: 24px; }
}
/* ---------- footer ---------- */
.site-footer {
background: var(--ink-fixed);
color: #c7c9e0;
margin-top: 30px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px 20px;
padding: 40px 0 24px;
}
/* Mobile: brand (logo only) and Follow Us each span the full width; Shop
and Support fall into the two columns of the same row, side by side. */
.footer-brand,
.footer-col:last-of-type {
grid-column: 1 / -1;
}
.footer-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.footer-col { text-align: center; }
.footer-social { justify-content: center; }
.footer-brand img {
height: 120px;
width: auto;
flex-shrink: 0;
margin-left: 10px;
}
.footer-brand-text { display: flex; flex-direction: column; justify-content: center; }
.footer-brand p { font-size: 0.72rem; line-height: 1.45; color: #a7aacb; max-width: 320px; margin: 0; }
.footer-brand-name {
font-size: 1.1rem;
font-weight: 800;
color: var(--accent);
line-height: 1.1;
margin: 0;
}
.footer-brand .footer-brand-subtitle {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent);
line-height: 1.1;
margin: 0 0 3px;
}
.footer-brand .footer-tagline {
font-size: 0.6rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin: 0 0 6px;
}
.footer-col h4 {
color: #fff;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0 0 12px;
}
.footer-col ul li { margin-bottom: 8px; }
.footer-col a { font-size: 0.88rem; color: #c7c9e0; }
.footer-col a:hover { color: #fff; }
.footer-social {
display: flex;
gap: 10px;
margin-top: 14px;
}
.footer-social a {
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: flex;
align-items: center;
justify-content: center;
}
.footer-social a:hover { background: var(--primary); }
.footer-social-lg a {
width: 56px;
height: 56px;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding: 20px 0 28px;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.78rem;
color: #8b8eb0;
text-align: center;
}
.footer-cookie-links { display: flex; align-items: center; justify-content: center; gap: 8px; }
.footer-cookie-links a { color: #c7c9e0; text-decoration: none; }
.footer-cookie-links a:hover { color: #fff; }
.footer-cookie-links .footer-link-btn { font-size: inherit; }
@media (min-width: 700px) {
.footer-grid {
grid-template-columns: 2.3fr 0.7fr 0.7fr 0.7fr;
column-gap: 22px;
}
.footer-brand,
.footer-col:last-of-type {
grid-column: auto;
}
.footer-brand { justify-content: flex-start; }
.footer-col { text-align: left; }
.footer-social { justify-content: flex-start; }
.footer-brand img { height: 180px; margin-left: 0; }
.footer-brand-text { display: flex; }
.footer-brand p { font-size: 0.85rem; }
.footer-brand-name { font-size: 1.5rem; margin: 0; }
.footer-brand .footer-brand-subtitle { font-size: 1.1rem; margin: 0 0 4px; }
.footer-brand .footer-tagline { font-size: 0.72rem; margin: 0 0 8px; }
}
@media (min-width: 700px) {
.footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
/* ---------- coming soon (shop/sell/login placeholders) ---------- */
.coming-soon {
padding: 70px 0 90px;
text-align: center;
}
.coming-soon .icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 1.6rem;
}
.coming-soon h1 { margin: 0 0 8px; }
.coming-soon p { color: var(--ink-soft); max-width: 460px; margin: 0 auto 20px; }
/* ============================================================
Full Catalog (shop.php) — filter sidebar + results grid
============================================================ */
.shop-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
padding: 20px 0 60px;
}
.shop-sidebar {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
align-self: start;
}
.filter-group {
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.filter-group:first-child { padding-top: 0; }
.filter-group:last-of-type { border-bottom: none; }
.filter-group h3 {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-soft);
margin: 0 0 10px;
}
.filter-group input[type="search"],
.filter-group input[type="number"],
.filter-group select {
width: 100%;
padding: 9px 11px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.88rem;
font-family: inherit;
background: var(--paper);
color: var(--ink);
}
.radio-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.88rem;
margin: 0 0 8px;
cursor: pointer;
}
.radio-row:last-child { margin-bottom: 0; }
.filter-group .checkbox-row { margin: 10px 0 0; cursor: pointer; }
.price-range-row {
display: flex;
align-items: center;
gap: 8px;
}
.price-range-row input { width: 0; flex: 1; }
.price-range-row span { color: var(--ink-soft); }
.filter-actions {
padding-top: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-clear-link {
text-align: center;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-soft);
}
.filter-clear-link:hover { color: var(--primary); }
.shop-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.shop-result-count {
font-size: 0.88rem;
color: var(--ink-soft);
margin: 0;
}
.shop-sort {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--ink-soft);
font-weight: 600;
}
.shop-sort select {
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.85rem;
font-family: inherit;
background: var(--paper);
color: var(--ink);
}
.shop-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.product-set .rarity-common,
.product-set .rarity-uncommon,
.product-set .rarity-rare,
.product-set .rarity-mythic,
.product-set .rarity-special,
.product-set .rarity-bonus {
font-weight: 700;
text-transform: capitalize;
}
.rarity-common { color: #57606f; }
.rarity-uncommon { color: #4a5568; }
.rarity-rare { color: #b78a28; }
.rarity-mythic { color: #bf4427; }
.rarity-special { color: #9433ff; }
.rarity-bonus { color: #008b8b; }
.shop-empty {
text-align: center;
padding: 60px 20px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.shop-empty .icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.shop-empty h2 { margin: 0 0 6px; font-size: 1.1rem; }
.shop-empty p { color: var(--ink-soft); margin: 0 0 18px; }
.shop-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: 28px;
}
.shop-pagination a,
.shop-pagination span {
min-width: 36px;
height: 36px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--border);
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
background: var(--paper);
}
.shop-pagination a:hover { border-color: var(--primary); color: var(--primary); }
.shop-pagination .active { background: var(--primary); border-color: var(--primary); color: #fff; }
.shop-pagination .disabled { color: var(--ink-soft); opacity: 0.5; }
@media (min-width: 640px) {
.shop-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
.shop-layout { grid-template-columns: 260px 1fr; align-items: start; }
.shop-sidebar { position: sticky; top: calc(var(--header-h) + 20px); }
}
@media (min-width: 960px) {
.shop-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1180px) {
.shop-grid { grid-template-columns: repeat(5, 1fr); }
}
/* ============================================================
Cart icon + badge
============================================================ */
.nav-cart-btn, .nav-sell-btn { position: relative; }
.cart-badge {
position: absolute;
top: -2px;
right: -2px;
background: var(--accent);
color: #241a00;
font-size: 0.66rem;
font-weight: 800;
line-height: 1;
min-width: 18px;
height: 18px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
}
/* ============================================================
Toast
============================================================ */
.pcb-toast {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0.92);
background: var(--ink-fixed);
color: #fff;
padding: 14px 24px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
max-width: 90vw;
box-shadow: var(--shadow-lg);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 300;
}
.pcb-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.pcb-toast.is-error { background: var(--danger); }
/* ============================================================
Breadcrumb + page title + empty state (shared)
============================================================ */
.breadcrumb {
padding: 16px 0 0;
font-size: 0.82rem;
color: var(--ink-soft);
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb span { margin: 0 4px; }
.page-title { margin: 14px 0 20px; font-size: 1.5rem; }
.empty-state {
text-align: center;
padding: 60px 16px 80px;
}
.empty-state .icon {
width: 60px; height: 60px; border-radius: 50%;
background: var(--paper-soft); border: 1px solid var(--border);
color: var(--ink-soft);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.empty-state h2 { margin: 0 0 8px; }
.empty-state p { color: var(--ink-soft); max-width: 400px; margin: 0 auto 20px; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); min-height: 1.2em; margin: 8px 0 0; }
.form-note.is-error { color: var(--danger); font-weight: 600; }
.stock-note { font-size: 0.82rem; font-weight: 600; margin: 4px 0; }
.stock-note.in-stock { color: var(--success); }
.stock-note.out-of-stock { color: var(--danger); }
/* Pre-Order ship-by message (store_inventory_oth.preorder_note) — sits right
under the item title, same accent-callout family as .stock-inventory-note. */
.preorder-note {
font-size: 1.05rem;
font-weight: 600;
color: #7a5200;
background: rgba(245, 166, 35, 0.14);
border: 1px solid rgba(245, 166, 35, 0.45);
border-radius: 8px;
padding: 10px 16px;
margin: 10px 0 16px;
}
/* Staff-entered inventory note (store_inventory_mtg.notes /
store_inventory_oth.notes) — informational, not a stock-level status, so
it's styled separately from .stock-note. Rendered as a callout box (not
plain text) so it doesn't get missed sitting under the Add to Cart
button. white-space:pre-line preserves multi-line notes the same way
whether they came from the server on initial render or from
store.js's variant-picker handler (plain textContent, no
s). */
.stock-inventory-note {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 0.88rem;
line-height: 1.45;
color: #7a5200;
background: rgba(245, 166, 35, 0.14);
border: 1px solid rgba(245, 166, 35, 0.45);
border-left: 4px solid var(--accent);
border-radius: 8px;
padding: 10px 14px;
margin: 14px 0 0;
}
.stock-inventory-note svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
.stock-inventory-note-text { white-space: pre-line; }
.stock-inventory-note-text strong { font-weight: 700; }
/* Diagonal ribbon shown over a card image when its localized (non-English)
scan isn't available from Scryfall and we've fallen back to the English
print — the containers this sits in (.item-image-frame, .product-media)
already have position:relative + overflow:hidden, so the rotated ribbon
clips cleanly at the image edges. */
.lang-fallback-ribbon {
position: absolute;
left: 50%;
top: 70%;
transform: translate(-50%, -50%);
width: max-content;
max-width: 70%;
/* Matches Scryfall's own "localized image not available" notice (sampled
from their placeholder art: a warm charcoal band, not a stark
near-black one) — less likely to read as an out-of-stock/alert banner
when it sits next to a red "Low Stock" badge on a listing tile. Sized
to its content rather than spanning edge-to-edge, so it reads as a
label rather than a blocking message. */
background: rgba(40, 38, 32, 0.82);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 18px;
border-radius: 6px;
z-index: 3;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.lang-fallback-ribbon-text {
font-weight: 600;
font-size: 0.95rem;
line-height: 1.25;
text-align: center;
}
.lang-fallback-ribbon-badge {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgb(96, 96, 96);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
}
/* Compact variant for small product-card tiles (shop grid, featured rail,
"you may also like" rail) — same ribbon, scaled down. */
.lang-fallback-ribbon--sm { padding: 4px 8px; gap: 6px; }
.lang-fallback-ribbon--sm .lang-fallback-ribbon-text { font-size: 0.6rem; line-height: 1.15; }
.lang-fallback-ribbon--sm .lang-fallback-ribbon-badge { width: 20px; height: 20px; font-size: 0.52rem; }
.qty-picker {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-soft);
margin-bottom: 10px;
}
.qty-picker input {
width: 80px;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.95rem;
text-align: center;
}
/* ============================================================
Item detail page
============================================================ */
.item-detail {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
padding: 20px 0 50px;
}
.item-media { max-width: 340px; margin: 0 auto; width: 100%; }
.item-image-frame {
position: relative;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
background: var(--paper-soft);
aspect-ratio: 5 / 7;
perspective: 1000px;
}
.item-image-frame img { width: 100%; height: 100%; object-fit: cover; }
/* Other (non-MTG) product photos aren't a fixed card ratio — show the whole
photo letterboxed on the frame's background instead of cropping it. */
.item-image-frame.is-oth img { object-fit: contain; }
/* Double-faced card flip — same mechanism/icon as store-dashboard.php's
setupFlipButton()/.flip-card-inner (assets/css/main.css). */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
}
.flip-card-inner.flipped { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-back { transform: rotateY(180deg); }
.flip-btn-overlay {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
background: #ffffff;
border: 1px solid var(--border);
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow);
color: var(--ink);
transition: transform 0.2s ease-in-out, background 0.2s ease-in-out;
z-index: 5;
}
.flip-btn-overlay:hover { transform: translateX(-50%) scale(1.1) rotate(180deg); background: var(--paper-soft); }
.flip-btn-overlay svg { width: 24px; height: 24px; fill: currentColor; }
.item-image-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 3rem;
background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.item-image-frame.foil-glow img { filter: brightness(1.08) saturate(1.18); }
.item-image-frame.foil-glow::after {
content: '';
position: absolute;
inset: 0;
background-image: url(../../../assets/foil.gif);
background-size: 100% 100%;
opacity: 0.35;
pointer-events: none;
}
/* Other-inventory photo gallery (item.php) — eBay-style thumbnail rail
under the main image; store.js swaps #itemMainImage's src on click. */
.item-thumb-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 12px;
}
.item-thumb {
width: 56px;
height: 56px;
padding: 0;
border: 2px solid var(--border);
border-radius: 8px;
overflow: hidden;
background: var(--paper-soft);
cursor: pointer;
flex-shrink: 0;
}
.item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-thumb.is-oth img { object-fit: contain; }
.item-thumb.is-active { border-color: var(--primary); }
.item-thumb:hover { border-color: var(--primary); }
/* Click-to-zoom lightbox for the item detail hero — store.js's
openItemImageZoom(), mirrors the backoffice's #card-image-modal
(assets/css/main.css) so the "click for a bigger look" convention
looks/feels the same on both sides of the app. */
.item-image-frame.is-zoomable img { cursor: zoom-in; }
.item-zoom-overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
padding: 24px;
}
.item-zoom-overlay img {
max-width: min(90vw, 900px);
max-height: 90vh;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
object-fit: contain;
}
/* Carries the foil shimmer (.foil-glow on the small thumbnail) into the
zoomed view too — without this wrapper the overlay was lost on zoom.
The wrap's cap accounts for the overlay's 24px padding on each side
(calc(...) - 48px) since the overlay is a flex row that centers this
wrap and will shrink it to fit that padded space on narrow phone
screens. The img's own limits are relative (100%) to the wrap rather
than a second independent vw/vh cap — with two separate viewport-based
caps, the wrap could get flex-shrunk below the img's cap (a plain
90vw is wider than the phone viewport once 48px of padding is taken
out) and overflow: hidden would crop the image against the smaller,
already-shrunk wrap. */
.item-zoom-overlay .zoom-img-wrap {
position: relative;
display: inline-block;
max-width: min(calc(100vw - 48px), 900px);
max-height: calc(100vh - 48px);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.item-zoom-overlay .zoom-img-wrap img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 0;
box-shadow: none;
object-fit: contain;
}
.item-zoom-overlay .zoom-img-wrap.foil-glow img { filter: brightness(1.08) saturate(1.18); }
.item-zoom-overlay .zoom-img-wrap.foil-glow::after {
content: '';
position: absolute;
inset: 0;
background-image: url(../../../assets/foil.gif);
background-size: 100% 100%;
opacity: 0.35;
pointer-events: none;
}
/* Prev/next paging for OTH items with more than one photo — only rendered
when openItemImageZoom() is passed a multi-image gallery. Laid out as
flex siblings of .zoom-img-wrap (overlay is already a centering flex
row) with `order` fixing prev/next on either side regardless of DOM
insertion order, and a small margin holding each button just off the
image edge. */
.zoom-nav {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 1.8rem;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s ease;
}
.zoom-nav:hover { background: rgba(0, 0, 0, 0.75); }
.zoom-nav-prev { order: -1; margin-right: 10px; }
.zoom-nav-next { order: 1; margin-left: 10px; }
@media (max-width: 600px) {
.zoom-nav { width: 40px; height: 40px; font-size: 1.5rem; }
}
.artist-credit { text-align: center; font-size: 0.8rem; color: var(--ink-soft); margin-top: 10px; }
.gatherer-link { display: block; text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--primary); text-decoration: none; margin-top: 14px; }
.gatherer-link:hover { color: var(--primary-dark); text-decoration: underline; }
.item-info { max-width: 560px; }
.item-set-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--ink-soft);
margin-bottom: 6px;
flex-wrap: wrap;
}
.item-set-line .set-icon { width: 18px; height: 18px; filter: grayscale(1) brightness(0.4); }
.item-set-line .collector-no { color: #b6b8cc; }
.item-info h1 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.25; }
.item-real-name { display: block; font-size: 0.55em; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
/* Pairs the set/category line with the Share button on one row, button
pinned to the far right — keeps it out of the vertical title/price flow
below instead of sitting inline and pushing everything else down. */
.item-top-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.item-top-row .item-set-line { margin-bottom: 0; }
/* The real fb-share-button iframe (once the SDK parses it) sizes itself —
this just stops the wrapper div from collapsing to 0 height and causing
a layout jump between first paint and the SDK swapping in the iframe. */
.fb-share-button { flex-shrink: 0; min-height: 28px; }
/* Styles the Share on Facebook fallback link via its data attribute, not a
class — Facebook's XFBML parser silently refuses to upgrade the parent
.fb-share-button div into the real widget if this carries any class
beyond the required "fb-xfbml-parse-ignore" (verified empirically; see
the comment in store/item.php's renderShareToFacebookButton()). */
[data-share-fallback] {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid #1877f2;
background: #1877f2;
color: #fff;
font-size: 0.82rem;
font-weight: 600;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
[data-share-fallback] svg { flex-shrink: 0; }
[data-share-fallback]:hover { background: #145dc4; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35); }
.mana-line { margin-bottom: 8px; line-height: 1; }
.mana-symbol { display: inline-block; width: 18px; height: 18px; vertical-align: text-top; margin: 0 1px; }
.mana-sep { color: #c6c8de; font-size: 0.8em; margin: 0 2px; }
.type-line { font-weight: 600; color: var(--ink-soft); margin: 0 0 16px; font-size: 0.92rem; }
.item-details-block { margin-bottom: 20px; }
.oracle-text { white-space: pre-line; line-height: 1.55; font-size: 0.92rem; }
.power-toughness { font-weight: 800; margin-top: 8px; }
.flavor-text { font-style: italic; color: var(--ink-soft); font-size: 0.88rem; margin-top: 10px; }
.item-purchase-box {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
}
.variant-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }
.variant-select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.9rem;
margin-bottom: 14px;
background: var(--paper);
}
.item-purchase-box .item-price { font-size: 1.6rem; font-weight: 800; margin-bottom: 14px; }
@media (min-width: 780px) {
.item-detail { grid-template-columns: 340px 1fr; align-items: start; }
.item-media { position: sticky; top: calc(var(--header-h) + 20px); }
}
/* ============================================================
Cart page
============================================================ */
.cart-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
padding-bottom: 60px;
}
.cart-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cart-page-head .page-title { margin-bottom: 0; }
.cart-clear-btn, .sell-clear-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--danger);
color: #fff;
border: none;
border-radius: 999px;
padding: 9px 18px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(217, 83, 79, 0.35);
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.cart-clear-btn:hover, .sell-clear-btn:hover {
background: #c9302c;
box-shadow: 0 6px 16px rgba(217, 83, 79, 0.45);
transform: translateY(-1px);
}
.cart-lines, .sell-list { display: flex; flex-direction: column; gap: 12px; }
.cart-line {
display: grid;
grid-template-columns: 72px 1fr;
gap: 12px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
}
.cart-line-media {
position: relative;
width: 72px;
aspect-ratio: 5 / 7;
border-radius: 8px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex; align-items: center; justify-content: center;
}
.cart-line-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-media.is-oth { background: var(--paper-soft); }
.cart-line-media.is-oth img { object-fit: contain; }
.cart-line-media.foil-glow img { filter: brightness(1.08) saturate(1.18); }
.cart-line-media.foil-glow::after {
content: ''; position: absolute; inset: 0;
background-image: url(../../../assets/foil.gif);
background-size: 100% 100%; opacity: 0.35;
}
.cart-line-info { display: flex; flex-direction: column; gap: 2px; grid-column: 2; }
.cart-line-name { font-weight: 700; font-size: 0.95rem; }
.cart-line-real-name { display: block; font-weight: 400; font-size: 0.78em; color: var(--ink-soft); margin-top: 1px; }
.cart-line-variant { font-size: 0.8rem; color: var(--ink-soft); }
.cart-line-note { font-size: 0.8rem; color: var(--ink-soft); }
.cart-line-remove {
align-self: flex-start;
background: none; border: none; color: var(--danger);
font-size: 0.8rem; font-weight: 600; padding: 6px 0 0; cursor: pointer;
}
.cart-line-qty { grid-column: 2; }
.cart-line-qty label { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); }
.cart-line-qty input { width: 64px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; text-align: center; }
.cart-line-price { grid-column: 2; display: flex; justify-content: space-between; font-size: 0.9rem; }
.cart-line-price .line-total { font-weight: 800; }
.cart-summary {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
align-self: start;
}
.cart-summary h2 { margin: 0 0 14px; font-size: 1.1rem; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 6px 0; }
.summary-row.summary-total { font-weight: 800; font-size: 1.05rem; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.summary-row.discount-row { color: var(--success); font-weight: 600; }
.summary-note { font-size: 0.78rem; color: var(--ink-soft); margin: 4px 0 14px; }
.cart-summary .btn { margin-top: 10px; }
.voucher-box { margin: 10px 0 4px; }
.voucher-form {
display: flex;
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
}
.voucher-form input {
flex: 1;
min-width: 0;
border: none;
background: var(--paper-soft);
padding: 10px 14px;
font-size: 0.85rem;
font-family: inherit;
outline: none;
}
.voucher-form button {
border: none;
background: var(--primary);
color: #fff;
font-weight: 700;
font-size: 0.82rem;
padding: 0 18px;
}
.voucher-applied {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: #eef8f1;
border: 1px solid #bfe6cc;
border-radius: 8px;
padding: 8px 12px;
font-size: 0.82rem;
color: #1c7a45;
}
.voucher-remove {
background: none;
border: none;
color: var(--danger);
font-weight: 700;
font-size: 0.78rem;
padding: 0;
}
@media (min-width: 860px) {
.cart-layout { grid-template-columns: 1fr 320px; align-items: start; }
.cart-line { grid-template-columns: 90px 1fr auto auto; align-items: center; }
.cart-line-media { width: 90px; }
.cart-line-info { grid-column: auto; }
.cart-line-qty { grid-column: auto; }
.cart-line-price { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 4px; }
}
/* ============================================================
Sell page (online buylist)
============================================================ */
.sell-intro { color: var(--ink-soft); margin: 0 0 24px; line-height: 1.5; }
.sell-intro a {
color: var(--primary);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(102, 126, 234, 0.4);
text-underline-offset: 2px;
}
.sell-intro a:hover { text-decoration-color: currentColor; }
.sell-search-panel { margin-bottom: 28px; }
.sell-search-panel h2 { margin: 0 0 10px; font-size: 1.05rem; }
.sell-search-box { position: relative; max-width: 480px; }
.sell-search-box input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 0.95rem;
font-family: inherit;
}
.sell-search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15); }
.sell-search-results {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
max-height: 360px;
overflow-y: auto;
z-index: 20;
}
.sell-search-empty { padding: 16px; text-align: center; color: var(--ink-soft); font-size: 0.88rem; }
.sell-search-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid var(--border);
}
.sell-search-item:last-child { border-bottom: none; }
.sell-search-item:hover { background: var(--paper-soft); }
.sell-search-item-thumb { width: 34px; height: 48px; border-radius: 4px; overflow: hidden; background: var(--paper-soft); flex-shrink: 0; }
.sell-search-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sell-search-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sell-search-item-name { font-weight: 700; font-size: 0.9rem; }
.sell-search-item-real-name { display: block; font-weight: 400; font-size: 0.78em; color: var(--ink-soft); }
.sell-search-item-set { font-size: 0.76rem; color: var(--ink-soft); }
.sell-add-overlay {
position: fixed;
inset: 0;
background: rgba(28, 30, 43, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 200;
}
.sell-add-panel {
position: relative;
background: var(--paper);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 0;
width: 100%;
max-width: 760px;
min-height: 600px;
max-height: 95vh;
overflow-y: auto;
overflow-x: hidden;
}
.sell-add-close {
position: absolute;
top: 14px; right: 14px;
width: 32px; height: 32px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
line-height: 1;
color: var(--ink);
box-shadow: var(--shadow);
cursor: pointer;
z-index: 2;
}
.sell-add-title {
margin: 0 0 4px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-soft);
font-weight: 700;
}
.sell-add-layout { display: flex; flex-direction: column; }
.sell-add-media-col { background: var(--paper-soft); flex-shrink: 0; padding: 20px 20px 16px 20px; }
.sell-add-media-col img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; display: block; border-radius: 10px; box-shadow: var(--shadow); }
.sell-add-image-wrap { position: relative; }
/* Same badge scale as .item-image-frame — the sell popup's card image
(.sell-add-media-col img, ~335px at desktop) is nearly the same width as
the item detail hero (.item-media, 340px max), so the small product-tile
badge size reads too small here. */
.sell-add-image-wrap .badge {
top: 12px;
left: 12px;
font-size: 1rem;
padding: 6px 14px;
}
.sell-add-image-wrap .badge.lang { left: auto; right: 12px; }
.sell-add-image-wrap .badge.foil-finish { top: 52px; font-size: 0.85rem; }
.sell-add-image-wrap.foil-glow img { filter: brightness(1.08) saturate(1.18); }
.sell-add-image-wrap.foil-glow::after {
content: '';
position: absolute;
inset: 0;
border-radius: 10px;
background-image: url(../../../assets/foil.gif);
background-size: 100% 100%;
opacity: 0.35;
pointer-events: none;
}
.sell-add-info-col { padding: 26px 28px; display: flex; flex-direction: column; gap: 16px; }
.sell-add-info-col h3 { margin: 0; font-size: 1.3rem; }
.sell-add-info-col .product-set { margin: -8px 0 0; }
@media (min-width: 640px) {
.sell-add-layout { flex-direction: row; align-items: stretch; }
.sell-add-media-col { flex: 0 0 44%; padding: 24px 0 24px 24px; display: flex; flex-direction: column; }
.sell-add-media-col img { width: 100%; aspect-ratio: 5 / 7; }
.sell-add-info-col { flex: 1; justify-content: center; }
}
.sell-add-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sell-add-fields label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.8rem;
font-weight: 700;
color: var(--ink);
}
.sell-add-fields select,
.sell-add-fields input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.92rem;
font-family: inherit;
}
/* Same pill-toggle pattern as .foil-finish-row/.foil-finish-btn in the
backoffice's assets/css/main.css — clicking a pill toggles it on/off
(native radios can't be deselected this way), a hidden input tracks the
real value. Lives inside .sell-add-fields' grid, between Language and
Quantity — grid-column spans the full row so it renders as its own strip
above Quantity rather than squeezing into one grid cell. */
.foil-finish-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: -6px 0 4px; }
.foil-finish-btn {
font-family: inherit;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--ink-soft);
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 12px;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.foil-finish-btn:hover { background: var(--border); }
.foil-finish-btn.is-active {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.foil-serial-input {
width: 100px;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 4px;
font-size: 0.8rem;
font-family: inherit;
}
.sell-add-price {
display: flex;
justify-content: space-between;
align-items: center;
background: #eef1ff;
border-radius: 8px;
padding: 14px 16px;
font-size: 0.92rem;
font-weight: 700;
color: var(--ink);
}
.sell-add-price strong { font-size: 1.3rem; color: var(--success); }
.sell-add-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.sell-add-actions .btn { padding: 10px 24px; }
.sell-list-section { margin: 32px 0; }
.sell-list-section h2 { margin: 0; font-size: 1.05rem; }
.sell-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sell-summary {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
box-shadow: var(--shadow);
margin-top: 16px;
max-width: 340px;
margin-left: auto;
}
/* ============================================================
Checkout page
============================================================ */
.checkout-layout {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
padding-bottom: 60px;
}
.checkout-section {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px;
margin-bottom: 16px;
box-shadow: var(--shadow);
}
.checkout-section h2 { margin: 0 0 14px; font-size: 1.05rem; }
.logged-in-as { font-size: 0.9rem; color: var(--ink-soft); }
.form-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.form-grid label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.82rem;
font-weight: 600;
color: var(--ink-soft);
}
.form-grid label.span-2 { grid-column: 1 / -1; }
.form-grid input,
.form-grid textarea {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.92rem;
font-family: inherit;
}
.form-grid textarea { resize: vertical; min-height: 80px; }
.field-error {
font-size: 0.78rem;
font-weight: 600;
color: var(--danger);
min-height: 1.1em;
}
.field-error.is-info { color: var(--primary); }
.input-locked {
background: var(--paper-soft);
color: var(--ink-soft);
cursor: not-allowed;
}
.field-hint {
font-size: 0.75rem;
font-weight: 500;
color: var(--ink-soft);
}
.password-field { position: relative; }
.password-field input { width: 100%; padding-right: 40px; }
.password-toggle-btn {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink-soft);
}
.password-toggle-btn svg {
width: 18px;
height: 18px;
display: block;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.checkbox-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.85rem;
color: var(--ink-soft);
margin: 12px 0 4px;
}
.acknowledgment-row {
align-items: flex-start;
margin: 0 0 14px;
cursor: pointer;
}
.acknowledgment-row:last-child { margin-bottom: 0; }
.acknowledgment-row input { margin-top: 3px; flex-shrink: 0; }
.acknowledgment-row span { line-height: 1.5; }
.account-toggle-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.account-toggle-row .checkbox-row { margin: 12px 0; }
.btn-sm { padding: 7px 14px; font-size: 0.8rem; }
.payment-note {
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
font-size: 0.84rem;
line-height: 1.5;
color: var(--ink-soft);
margin: 0 0 16px;
}
.payment-warning {
background: #fdecea;
border-color: #f5c6c2;
color: var(--danger);
font-weight: 600;
}
.payment-info {
display: flex;
align-items: flex-start;
gap: 8px;
background: rgba(102, 126, 234, 0.08);
border-color: rgba(102, 126, 234, 0.3);
color: var(--ink);
}
.payment-info svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.payment-subhead { font-size: 0.95rem; margin: 0 0 10px; }
.store-credit-balance-note {
margin: 0 0 10px;
font-size: 0.9rem;
color: var(--ink-soft);
}
.store-credit-balance-note strong { color: var(--primary); }
#storeCreditAmountRow {
align-items: end;
margin-top: 12px;
}
#storeCreditAmountRow label { flex: 1; }
#useMaxCreditBtn { white-space: nowrap; }
/* Sections that stack multiple .payment-options/.form-grid blocks under one
heading (e.g. sell.php's Payment Preference) need space between them —
checkout.php never hits this since each block gets its own .checkout-section. */
.checkout-section .payment-options,
.checkout-section .form-grid {
margin-bottom: 18px;
}
.payment-options { display: flex; flex-direction: column; gap: 8px; }
.payment-option {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.9rem;
cursor: pointer;
}
.payment-option:has(input:checked) { border-color: var(--primary); background: rgba(102,126,234,0.06); }
.pickup-location-option { align-items: flex-start; }
.pickup-location-option input { margin-top: 3px; }
.pickup-location-option span { display: flex; flex-direction: column; gap: 2px; }
.pickup-location-address { font-size: 0.85em; color: var(--ink-soft); font-weight: 400; }
.checkout-summary .summary-lines { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.checkout-summary .summary-lines li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; }
.summary-line-name { color: var(--ink-soft); }
@media (min-width: 860px) {
.checkout-layout { grid-template-columns: 1fr 340px; align-items: start; }
.form-grid { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
Order confirmation
============================================================ */
.order-confirmation { max-width: 640px; margin: 0 auto; padding: 40px 0 70px; text-align: center; }
.success-icon {
width: 60px; height: 60px; border-radius: 50%;
background: var(--success); color: #fff;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.order-confirmation h1 { margin: 0 0 8px; }
.order-confirmation > p { color: var(--ink-soft); margin: 0 0 20px; }
.order-no-box {
display: inline-flex;
flex-direction: column;
gap: 2px;
background: var(--paper-soft);
border: 1px dashed var(--primary);
border-radius: var(--radius);
padding: 12px 26px;
margin-bottom: 28px;
}
.order-no-box span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.order-no-box strong { font-size: 1.6rem; letter-spacing: 0.1em; color: var(--primary); }
.pay-now-box { max-width: 460px; margin: 0 auto 24px; }
.pay-now-box .payment-note { text-align: left; }
.pay-now-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.pay-now-row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 24px;
margin: 0 auto 24px;
}
.pay-now-row .pay-now-box { margin-bottom: 0; }
/* Stretch the note box to match the Payment Channels box's height (see
.payment-qr-box) and pin the buttons to the bottom of it, so the two
sections line up along the same baseline instead of the buttons trailing
right after the text at whatever height that happens to end. */
.pay-now-row.has-payment-qr { align-items: stretch; }
.pay-now-row.has-payment-qr .pay-now-box { display: flex; flex-direction: column; }
.pay-now-row.has-payment-qr .pay-now-buttons { margin: auto 0; padding: 10px 0; }
.payment-qr-box {
flex-shrink: 0;
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px;
}
.payment-qr-label {
display: block;
text-align: center;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-soft);
margin-bottom: 10px;
}
.payment-qr-wrap { display: block; cursor: zoom-in; }
.payment-qr-image { display: block; width: 260px; max-width: 100%; border-radius: 6px; }
@media (max-width: 640px) {
.pay-now-row.has-payment-qr { flex-direction: column; align-items: center; }
.payment-qr-image { width: 220px; }
}
/* account-row's box stretches to match the account-panel's height (see
.account-row.has-payment-qr) — a wider image better fills that height
(its 631:909 aspect ratio puts ~280px wide close to the panel's natural
height) instead of leaving empty space under a small fixed image. */
.account-row .payment-qr-image { width: 280px; }
.messenger-btn {
position: fixed;
right: 20px;
bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
z-index: 600;
text-decoration: none;
}
.messenger-btn-label {
background: var(--paper);
color: var(--ink);
font-size: 0.85rem;
font-weight: 600;
padding: 8px 14px;
border-radius: 20px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
white-space: nowrap;
}
.messenger-btn-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary);
color: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
transition: transform 0.15s ease;
}
.messenger-btn:hover .messenger-btn-icon { transform: scale(1.06); }
@media (max-width: 480px) {
.messenger-btn-label { display: none; }
}
.track-order-note {
font-size: 0.85rem;
color: var(--ink-soft);
max-width: 460px;
margin: 0 auto 24px;
}
.track-order-note a { color: var(--primary); font-weight: 700; }
.order-details-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
text-align: left;
margin-bottom: 20px;
}
.order-details-card, .order-items-card {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
text-align: left;
}
.order-details-card h3, .order-items-card h3 { margin: 0 0 10px; font-size: 0.95rem; }
.order-details-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 0.85rem; }
.order-details-card dt { color: var(--ink-soft); }
.order-details-card dd { margin: 0; font-weight: 600; }
.status-pill {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
background: #fdf1d6;
color: #8a5a00;
}
.status-pill.status-completed, .status-pill.status-paid { background: #e1f6ea; color: #1c7a45; }
.status-pill.status-cancelled, .status-pill.status-void, .status-pill.status-awaiting-payment { background: #fbe4e3; color: #a4322d; }
.status-pill.status-awaiting-cards, .status-pill.status-shipped { background: #e0f2fe; color: #0369a1; }
/* Matches the backoffice Sales table's amber "Pending" status badge (js/modules/sales.js buildStatusBadge()). */
.status-pill.status-pending { background: #fef3c7; color: #b45309; }
.order-item-list { display: flex; flex-direction: column; }
.order-item-row {
display: grid;
grid-template-columns: 40px 1fr 40px 90px;
align-items: center;
gap: 10px;
font-size: 0.88rem;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.order-item-row:last-of-type { border-bottom: none; }
.order-item-thumb-wrap { position: relative; display: block; width: 40px; height: 56px; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.15); flex-shrink: 0; }
.order-item-thumb-wrap.is-zoomable { cursor: zoom-in; }
.order-item-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-item-thumb-wrap.foil-glow .order-item-thumb { filter: brightness(1.08) saturate(1.18); }
.order-item-thumb-wrap.foil-glow::after {
content: '';
position: absolute;
inset: 0;
background-image: url(../../../assets/foil.gif);
background-size: 100% 100%;
opacity: 0.35;
pointer-events: none;
}
.order-item-thumb-blank { display: block; width: 40px; height: 56px; border-radius: 4px; background: var(--paper-soft); border: 1px solid var(--border); flex-shrink: 0; }
.order-item-name { min-width: 0; }
.order-item-name small { display: block; color: var(--ink-soft); font-size: 0.75rem; }
.order-item-name .product-set { display: block; margin-bottom: 2px; }
.order-item-note { color: var(--ink-soft); font-size: 0.75rem; margin-top: 2px; }
.order-item-qty { text-align: center; color: var(--ink-soft); white-space: nowrap; }
.order-item-total { text-align: right; font-weight: 700; white-space: nowrap; }
.order-confirmation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.order-confirmation-actions .btn { margin-top: 0; }
@media (min-width: 640px) {
.order-details-grid { grid-template-columns: 1fr 1fr; }
}
/* ============================================================
Login / register / account
============================================================ */
.auth-panel, .account-panel {
max-width: 420px;
margin: 40px auto 80px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
}
.account-row {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 24px;
}
.account-row.has-payment-qr { align-items: stretch; }
.account-row.has-payment-qr .account-panel { margin: 40px 0 80px; }
.account-row .payment-qr-box {
margin: 40px 0 80px;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 640px) {
.account-row.has-payment-qr { flex-direction: column; align-items: center; }
.account-row .payment-qr-box { margin-top: 0; }
}
.account-panel { text-align: center; }
.account-panel .icon {
width: 56px; height: 56px; border-radius: 50%;
background: var(--paper-soft); color: var(--primary);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 14px;
}
.account-panel h1 { font-size: 1.3rem; margin: 0 0 4px; }
.account-panel p { color: var(--ink-soft); margin: 0 0 18px; }
.account-panel .account-store-credit {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--success);
font-weight: 700;
font-size: 0.95rem;
margin: -8px 0 18px;
}
.account-panel .account-store-credit svg { flex-shrink: 0; }
.account-panel .btn-block + .btn-block { margin-top: 10px; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.auth-tab-btn {
flex: 1;
background: none;
border: none;
padding: 10px 4px;
font-weight: 700;
font-size: 0.9rem;
color: var(--ink-soft);
border-bottom: 2px solid transparent;
}
.auth-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.auth-form input {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.92rem;
font-family: inherit;
}
.auth-link {
display: block;
text-align: center;
color: var(--primary);
font-weight: 700;
font-size: 0.88rem;
text-decoration: underline;
padding: 4px 0;
}
.auth-link:hover { color: var(--primary-dark); }
/* ============================================================
Confirmation modal (checkout)
============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(18, 16, 30, 0.55);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 400;
}
.modal-box {
background: var(--paper);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 420px;
padding: 22px;
max-height: 90vh;
overflow-y: auto;
}
.modal-box h3 { margin: 0 0 6px; font-size: 1.15rem; }
.modal-box > p { margin: 0 0 16px; font-size: 0.86rem; color: var(--ink-soft); }
.modal-summary {
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: 8px;
padding: 4px 14px;
margin-bottom: 18px;
}
.modal-summary .summary-row span:last-child { font-weight: 600; text-align: right; }
.modal-actions {
display: flex;
flex-direction: column-reverse;
gap: 8px;
}
.modal-actions .btn { width: 100%; }
@media (min-width: 480px) {
.modal-actions { flex-direction: row; justify-content: flex-end; }
.modal-actions .btn { width: auto; }
}
.auth-form .btn { margin-top: 6px; }
/* ============================================================
My Orders (customer order history)
============================================================ */
.orders-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 60px; }
.order-card {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 14px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.order-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.order-card-main { display: flex; flex-direction: column; gap: 2px; }
.order-card-no { font-weight: 800; letter-spacing: 0.05em; font-size: 1rem; }
.order-card-invoice { font-size: 0.78rem; color: var(--ink-soft); }
.order-card-date { font-size: 0.78rem; color: var(--ink-soft); }
.order-card-meta { display: flex; align-items: center; gap: 6px; grid-column: 2; grid-row: 1; flex-wrap: wrap; justify-content: flex-end; }
.order-card-total { grid-column: 1 / -1; font-weight: 800; font-size: 1.05rem; text-align: right; }
.account-panel .btn-outline { margin-top: 4px; }
/* ============================================================
Store credit balance (My Profile)
============================================================ */
.store-credit-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: #fff;
border-radius: var(--radius);
padding: 18px 22px;
margin-bottom: 24px;
box-shadow: var(--shadow);
}
.store-credit-label {
margin: 0 0 4px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.85);
}
.store-credit-amount { margin: 0; font-size: 1.6rem; font-weight: 800; }
.store-credit-note { margin: 4px 0 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); }
.store-credit-history-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.16);
color: #fff;
cursor: pointer;
transition: background 0.15s ease;
}
.store-credit-history-btn:hover { background: rgba(255, 255, 255, 0.28); }
.credit-history-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.credit-history-table th {
text-align: left;
padding: 8px 6px;
border-bottom: 1px solid var(--border);
color: var(--ink-soft);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.credit-history-table td { padding: 10px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.credit-history-table .credit-amount-positive { color: #059669; font-weight: 700; white-space: nowrap; }
.credit-history-table .credit-amount-negative { color: #dc2626; font-weight: 700; white-space: nowrap; }
.credit-history-table .credit-type-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.03em;
margin-right: 6px;
}
.credit-type-badge.type-buy { background: #fee2e2; color: #b91c1c; }
.credit-type-badge.type-sell { background: #d1fae5; color: #047857; }
.credit-history-table .credit-desc-link { color: var(--primary); text-decoration: none; }
.credit-history-table .credit-desc-link:hover { text-decoration: underline; }
/* ============================================================
Contact Us page
============================================================ */
.contact-page {
display: flex;
flex-direction: column;
gap: 32px;
padding: 20px 0 70px;
}
.contact-info h1 { margin: 0 0 8px; font-size: 1.5rem; }
.contact-info > p { color: var(--ink-soft); margin: 0 0 20px; }
.contact-address-card {
background: var(--paper-soft);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
margin-bottom: 18px;
}
.contact-address-card h4 { margin: 0 0 6px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.contact-address-card p { margin: 0; font-weight: 600; }
.contact-map {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
}
.contact-form-panel {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
box-shadow: var(--shadow);
}
.auth-form textarea {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 0.92rem;
font-family: inherit;
resize: vertical;
}
/* ============================================================
Cookie consent banner + preference center
============================================================ */
.footer-link-btn {
background: none;
border: none;
padding: 0;
font-size: 0.88rem;
font-family: inherit;
color: #c7c9e0;
}
.footer-link-btn:hover { color: #fff; }
.cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 500;
background: var(--ink-fixed);
color: #fff;
box-shadow: 0 -8px 24px rgba(28, 30, 43, 0.25);
}
.cookie-banner-inner {
max-width: 1200px;
margin: 0 auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.cookie-banner-inner p {
margin: 0;
font-size: 0.86rem;
color: #d7d8e8;
}
.cookie-banner-inner a { color: #fff; text-decoration: underline; }
.cookie-banner-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cookie-banner .btn-outline {
background: transparent;
border-color: rgba(255, 255, 255, 0.35);
color: #fff;
}
@media (min-width: 720px) {
.cookie-banner-inner { flex-direction: row; align-items: center; justify-content: space-between; }
.cookie-banner-inner p { flex: 1; }
}
.cookie-modal { display: none; }
.cookie-modal.is-open { display: flex; }
.cookie-modal .modal-box { max-width: 480px; }
.cookie-modal .modal-box > p { margin-bottom: 18px; }
.consent-option {
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 10px;
}
.consent-option-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.consent-option-label { font-weight: 600; font-size: 0.92rem; }
.consent-option-desc { margin: 6px 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.switch {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
flex-shrink: 0;
}
.switch input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.switch-track {
position: absolute;
inset: 0;
background: var(--border);
border-radius: 999px;
transition: background 0.15s ease;
pointer-events: none;
}
.switch-track::before {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(28, 30, 43, 0.3);
transition: transform 0.15s ease;
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.switch input:disabled { cursor: not-allowed; }
.switch-locked .switch-track { background: var(--primary); opacity: 0.6; }
.switch-locked .switch-track::before { transform: translateX(18px); }
.cookie-modal-actions {
flex-direction: column;
}
.cookie-modal-actions .btn { width: 100%; }
@media (min-width: 480px) {
.cookie-modal-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.cookie-modal-actions .btn { width: auto; }
}
/* ============================================================
Decklist Import
============================================================ */
.decklist-import-panel {
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 24px;
}
.decklist-import-input textarea {
width: 100%;
min-height: 200px;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 0.88rem;
resize: vertical;
margin-top: 8px;
}
.decklist-import-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 14px;
}
.decklist-results { margin-top: 8px; }
.decklist-results-summary {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.decklist-summary-item {
padding: 6px 14px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
background: var(--paper-soft);
border: 1px solid var(--border);
}
.decklist-summary-item.is-matched { color: var(--success); border-color: var(--success); }
.decklist-summary-item.is-warning { color: var(--accent); border-color: var(--accent); }
.decklist-summary-item.is-danger { color: var(--danger); border-color: var(--danger); }
.decklist-results-actions { margin-bottom: 16px; }
.decklist-results-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.decklist-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 14px;
align-items: center;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px;
}
.decklist-row-thumb-wrap {
position: relative;
display: block;
width: 56px;
height: 78px;
border-radius: 6px;
overflow: hidden;
background: var(--paper-soft);
}
.decklist-row-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.decklist-row-thumb-wrap.is-zoomable { cursor: zoom-in; }
.decklist-row-thumb-wrap.foil-glow .decklist-row-img { filter: brightness(1.08) saturate(1.18); }
.decklist-row-thumb-wrap.foil-glow::after {
content: '';
position: absolute;
inset: 0;
background-image: url(../../../assets/foil.gif);
background-size: 100% 100%;
opacity: 0.35;
pointer-events: none;
}
.decklist-row-body { min-width: 0; }
.decklist-row-name {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.decklist-row-qty { font-weight: 500; color: var(--ink-soft); font-size: 0.85rem; }
.decklist-row-real-name { display: block; font-weight: 400; font-size: 0.78em; color: var(--ink-soft); }
.decklist-row-option,
.decklist-row-option-label {
margin-top: 6px;
font-size: 0.85rem;
color: var(--ink-soft);
}
.decklist-row-option {
width: 100%;
max-width: 340px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--paper);
}
.decklist-row-add {
display: flex;
align-items: center;
gap: 8px;
}
.decklist-row-qty-input {
width: 56px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 6px;
text-align: center;
}
.decklist-row-unavailable {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
background: var(--paper-soft);
border: 1px dashed var(--border);
border-radius: var(--radius);
padding: 12px 14px;
}
.decklist-row-unavailable .decklist-row-name { white-space: normal; }
.decklist-row-status {
font-size: 0.85rem;
color: var(--ink-soft);
white-space: nowrap;
}
@media (max-width: 560px) {
.decklist-row { grid-template-columns: 48px 1fr; }
.decklist-row-add { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (min-width: 860px) {
.contact-page { flex-direction: row; align-items: flex-start; padding: 32px 0 80px; }
.contact-info { flex: 1.1; }
.contact-form-panel { flex: 1; }
}
/* ============================================================
Dark mode: component-specific fixes
Everything using var(--paper)/var(--ink)/var(--border) etc. already
adapts via the token overrides up top. These are the exceptions — spots
that pair ink/ink-soft text with a background that stays fixed regardless
of theme (a literal white/cream circle or chip, not var(--paper)), plus a
few hardcoded grays/ambers that were only ever tuned for a light page.
============================================================ */
[data-theme="dark"] .news-date,
[data-theme="dark"] .sell-add-close,
[data-theme="dark"] .flip-btn-overlay,
[data-theme="dark"] .sell-add-price,
[data-theme="dark"] .promo-strip--gold {
color: var(--ink-fixed);
}
[data-theme="dark"] .promo-strip--gold p { color: var(--ink-soft-fixed); }
/* .flip-btn-overlay's hover state swaps its background to var(--paper-soft),
which IS theme-adaptive (dark in dark mode) — so its icon needs to flip
back to the adaptive --ink there instead of staying pinned dark. */
[data-theme="dark"] .flip-btn-overlay:hover { color: var(--ink); }
[data-theme="dark"] .rarity-common { color: #9aa0b4; }
[data-theme="dark"] .rarity-uncommon { color: #b7bcd6; }
[data-theme="dark"] .condition-row-mp .condition-badge,
[data-theme="dark"] .condition-row-hp .condition-badge {
color: #ffb454;
}
[data-theme="dark"] .preorder-note,
[data-theme="dark"] .stock-inventory-note {
color: #ffc973;
}
/* Header logo swap — logo_pcbutlers.png has a baked-in opaque background
(it isn't a transparent PNG despite the extension), which only blends
into .site-header because that background is currently white. In dark
mode the header goes dark, so swap to the white/transparent mark
already used on the (always-dark) footer instead. See the two ![]()
tags in .nav-brand in store/includes/header.php. */
.nav-brand .logo-dark { display: none; }
[data-theme="dark"] .nav-brand .logo-light { display: none; }
[data-theme="dark"] .nav-brand .logo-dark { display: block; }
/* Header dark-mode toggle — reuses the same .switch/.switch-track control as
the cookie-preferences switches (see store/includes/footer.php), flanked
by static sun/moon icons so the switch's meaning is clear at a glance; the
active side is tinted to reflect the current theme (set purely by CSS off
[data-theme], so it can never drift out of sync with the actual state). */
.theme-toggle-btn { align-items: center; gap: 6px; cursor: pointer; }
.theme-toggle-btn svg { color: var(--ink-soft); flex-shrink: 0; }
.theme-toggle-btn .theme-icon-sun { color: var(--accent); }
[data-theme="dark"] .theme-toggle-btn .theme-icon-sun { color: var(--ink-soft); }
[data-theme="dark"] .theme-toggle-btn .theme-icon-moon { color: var(--primary); }