/* ==========================================================================
Rush Wristband - Global Stylesheet
Modern, clean, responsive design inspired by tablecoversnow.com
========================================================================== */
/* ----- 0. i18n cloak — hide body until either the inline boot
script (600 ms timeout) or main.js's applyTranslations() removes
the .i18n-cloak class. The 800 ms CSS fallback is just a final
safety net in case both fail (e.g. JS blocked). ----- */
html.i18n-cloak body { visibility: hidden; }
@keyframes i18n-cloak-safety {
to { visibility: visible !important; }
}
html.i18n-cloak body { animation: i18n-cloak-safety 0s linear 0.8s forwards; }
/* ----- 1. Design tokens ----- */
:root {
/* ---------- Colour: primary palette ---------- */
--color-primary: #1e3a8a;
--color-primary-dark: #0f172a;
--color-primary-light: #3b82f6;
--color-primary-soft: #eff4ff;
--color-accent: #ea580c;
--color-accent-dark: #c2410c;
--color-accent-light: #fb923c;
--color-accent-soft: #fff1e6;
/* Teal — Step tabs, secondary toggles, customize-card buttons */
--color-teal: #4ea4ad;
--color-teal-dark: #3b8a93;
--color-teal-soft: #e6f3f5;
--color-teal-line: #c7e3e7;
/* Status colours */
--color-success: #059669;
--color-success-soft: #d1fae5;
--color-danger: #dc2626;
--color-danger-soft: #fee2e2;
--color-warning: #d97706;
--color-warning-soft: #fef3c7;
--color-info: #2563eb;
--color-info-soft: #dbeafe;
/* Step header strip (matches reference site) */
--color-step-strip-top: #e2edf5;
--color-step-strip-bot: #d6e4f0;
/* ---------- Colour: text / surface ---------- */
--color-text: #0f172a;
--color-text-muted: #475569;
--color-text-light: #94a3b8;
--color-border: #e6e7eb;
--color-border-strong: #d1d5db;
--color-border-focus: #93c5fd;
--color-bg: #ffffff;
--color-surface: #ffffff;
--color-surface-alt: #f8fafc;
--color-bg-alt: #fafaf7;
--color-bg-warm: #fdf8f3;
--color-bg-dark: #0f172a;
--color-bg-darker: #0b1120;
--color-overlay: rgba(15, 23, 42, 0.55);
/* ---------- Shadow scale (5 stops + 1 inset, 1 brand glow) ---------- */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.05);
--shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
--shadow-2xl: 0 40px 80px -20px rgba(15, 23, 42, 0.25);
--shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-glow-accent: 0 8px 24px -8px rgba(234, 88, 12, 0.45);
--shadow-glow-teal: 0 8px 24px -8px rgba(78, 164, 173, 0.4);
/* ---------- Border radius scale ---------- */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-2xl: 28px;
--radius-pill: 999px;
/* ---------- Spacing scale (4-px base, 8 stops) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
/* ---------- Font ---------- */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', '微软雅黑', sans-serif;
--font-display: 'Inter', 'Noto Sans SC', 'PingFang SC',
'Microsoft YaHei', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
'Liberation Mono', monospace;
--letter-tight: -0.02em;
--letter-snug: -0.01em;
--letter-wide: 0.06em;
/* ---------- Layout ---------- */
--container-max: 1280px;
--container-pad: clamp(16px, 4vw, 32px);
--header-height: 72px;
/* ---------- Transitions / easing ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 0.12s var(--ease-soft);
--transition: all 0.2s var(--ease-soft);
--transition-slow: 0.35s var(--ease-out);
--transition-pop: 0.4s var(--ease-pop);
}
/* CJK languages typically need slightly looser line-height + a different
font preference; is set by applyTranslations(). */
html[data-lang="zh"] body { line-height: 1.7; }
/* ----- 2. Reset & base ----- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a {
color: var(--color-primary);
text-decoration: none;
transition: var(--transition);
}
a:hover { color: var(--color-primary-light); }
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
font-weight: 700;
line-height: 1.2;
color: var(--color-text);
letter-spacing: var(--letter-snug);
font-family: var(--font-display);
}
h1 {
font-size: clamp(2.25rem, 4.6vw, 3.5rem);
font-weight: 800;
letter-spacing: var(--letter-tight);
line-height: 1.1;
}
h2 {
font-size: clamp(1.75rem, 3.2vw, 2.5rem);
font-weight: 700;
letter-spacing: var(--letter-tight);
line-height: 1.15;
}
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
::selection { background: var(--color-accent-soft); color: var(--color-accent-dark); }
:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
border-radius: 4px;
}
p { margin: 0 0 1em; }
ul { padding-left: 1.5em; margin: 0 0 1em; }
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
/* ----- 3. Buttons ----- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 24px;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.95rem;
text-align: center;
transition: var(--transition);
white-space: nowrap;
cursor: pointer;
}
.btn-primary {
background: var(--color-accent);
color: #1c1917;
box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
background: var(--color-accent-dark);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-secondary {
background: var(--color-primary);
color: #fff;
}
.btn-secondary:hover {
background: var(--color-primary-dark);
color: #fff;
}
.btn-outline {
background: transparent;
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
}
.btn-outline:hover {
background: var(--color-primary);
color: #fff;
}
.btn-ghost {
background: transparent;
color: var(--color-text);
padding: 8px 16px;
}
.btn-ghost:hover { background: var(--color-bg-alt); }
.btn-block { display: flex; width: 100%; }
/* ----- 4a. Top utility bar (language switcher) ----- */
.topbar {
background: #0f172a;
color: #cbd5e1;
font-size: 0.78rem;
padding: 6px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
position: sticky;
top: 0;
z-index: 60;
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
min-height: 24px;
}
.topbar-info {
color: #94a3b8;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* (removed: .topbar-cs WhatsApp + chat icon group)
order-card.com does not show support icons in the topbar — chat
is exclusively the Tawk.to bubble in the bottom-right. The icon
styles previously here were dropped along with the markup
injector that produced them. */
/* =====================================================================
Language switcher — Order-Card-style dropdown.
Markup is enhanced at runtime by enhanceLangSwitchers() in main.js:
.lang-switcher
button.lang-trigger ← globe + current language name + caret
div.lang-menu ← absolutely positioned, hidden by default
button.lang-btn × 5
Pre-JS fallback (no .lang-switcher--enhanced class yet) keeps the
original inline 5-button look so the page is usable even with JS off.
===================================================================== */
.lang-switcher {
display: inline-flex;
gap: 2px;
align-items: center;
position: relative;
}
/* Pre-enhancement (fallback) sizing for the legacy label. */
.lang-switcher:not(.lang-switcher--enhanced) .lang-label {
color: #64748b;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-right: 6px;
}
.lang-switcher:not(.lang-switcher--enhanced) .lang-btn {
background: transparent;
color: #94a3b8;
font-size: 0.72rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 4px;
letter-spacing: 0.06em;
cursor: pointer;
border: none;
font-family: inherit;
}
.lang-switcher:not(.lang-switcher--enhanced) .lang-btn.active {
color: #fff;
background: var(--color-accent);
}
/* ----- Dropdown trigger (collapsed state) -----
Sits in the dark topbar so we use the accent orange as the pill
colour: globe + name + caret all share the same white text on an
accent background so it reads as a real "language picker" call-to-
action rather than blending into the topbar. Right-aligned to its
container, full-name text means widths vary (English vs Français) —
`max-content` keeps it snug. */
.lang-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: var(--color-accent);
border: 1px solid rgba(255, 255, 255, 0.25);
cursor: pointer;
color: #fff;
font-family: inherit;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.35);
transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.lang-trigger:hover {
background: var(--color-accent-dark, #c2410c);
box-shadow: 0 4px 12px rgba(234, 88, 12, 0.45);
transform: translateY(-1px);
}
.lang-trigger:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.lang-trigger-icon {
display: inline-flex;
color: #fff;
opacity: 0.95;
}
.lang-trigger-name { line-height: 1; color: #fff; }
.lang-trigger-caret {
font-size: 0.75rem;
color: #fff;
opacity: 0.9;
transition: transform 0.18s ease;
}
.lang-switcher.is-open .lang-trigger { box-shadow: 0 4px 12px rgba(234, 88, 12, 0.5); }
.lang-switcher.is-open .lang-trigger-caret { transform: rotate(180deg); }
/* ----- Dropdown menu (expanded state) -----
Right-aligned under the trigger so the menu doesn't push off the
viewport on narrow topbars. Rows show the short code on the left
(tiny, subdued) and the full native language name on the right
(bold), with the currently active row painted in the accent
colour. */
.lang-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: auto;
min-width: 180px;
padding: 6px 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08);
display: none;
z-index: 1000;
/* Was `overflow: hidden`, but the dropdown now lists 13 locales and
can comfortably exceed a phone's viewport. Cap it at 60vh and let
the list scroll inside the rounded card so the corners stay clipped
and the bottom rows never disappear under the fold. */
max-height: 60vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.lang-switcher.is-open .lang-menu { display: block; }
.lang-menu .lang-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 9px 16px;
background: transparent;
border: none;
border-left: 3px solid transparent;
font-family: inherit;
font-size: 0.92rem;
color: #1f2937;
text-align: left;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.lang-menu .lang-btn .lang-btn-code {
flex: 0 0 28px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
color: #94a3b8;
text-transform: uppercase;
}
.lang-menu .lang-btn .lang-btn-name {
flex: 1 1 auto;
font-weight: 600;
color: inherit;
}
.lang-menu .lang-btn:hover {
background: #fff7ed;
border-left-color: var(--color-accent);
}
.lang-menu .lang-btn:hover .lang-btn-code { color: var(--color-accent); }
.lang-menu .lang-btn.is-current,
.lang-menu .lang-btn.active {
background: rgba(234, 88, 12, 0.08);
border-left-color: var(--color-accent);
}
.lang-menu .lang-btn.is-current .lang-btn-code,
.lang-menu .lang-btn.active .lang-btn-code,
.lang-menu .lang-btn.is-current .lang-btn-name,
.lang-menu .lang-btn.active .lang-btn-name {
color: var(--color-accent);
font-weight: 800;
}
/* =====================================================================
Currency switcher (sits to the LEFT of the language switcher in
topbar). Visual conventions mirror .lang-switcher so the two
controls feel like siblings: same pill shape, same dropdown panel,
same hover treatments. We use a slate-blue accent instead of the
orange to visually distinguish "what language?" from "what currency?"
without screaming for attention.
===================================================================== */
.currency-switcher {
display: inline-flex;
position: relative;
align-items: center;
margin-right: 8px;
}
.currency-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.18);
cursor: pointer;
color: #fff;
font-family: inherit;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 999px;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.currency-trigger:hover {
background: #0f172a;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.45);
transform: translateY(-1px);
}
.currency-trigger:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.currency-trigger-icon {
font-weight: 800;
font-size: 0.9rem;
line-height: 1;
}
.currency-trigger-name { line-height: 1; }
.currency-trigger-caret {
font-size: 0.72rem;
opacity: 0.85;
transition: transform 0.18s ease;
}
.currency-switcher.is-open .currency-trigger { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.5); }
.currency-switcher.is-open .currency-trigger-caret { transform: rotate(180deg); }
.currency-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
padding: 6px 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 10px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 4px 10px rgba(15, 23, 42, 0.08);
display: none;
z-index: 1000;
max-height: 60vh;
overflow-y: auto;
overscroll-behavior: contain;
}
.currency-switcher.is-open .currency-menu { display: block; }
.currency-menu .currency-btn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 14px;
background: transparent;
border: none;
border-left: 3px solid transparent;
font-family: inherit;
font-size: 0.92rem;
color: #1f2937;
text-align: left;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.currency-menu .currency-btn-code {
flex: 0 0 36px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #94a3b8;
}
.currency-menu .currency-btn-name {
flex: 1 1 auto;
font-weight: 600;
}
.currency-menu .currency-btn-symbol {
flex: 0 0 auto;
font-weight: 700;
color: #64748b;
font-size: 0.95rem;
}
.currency-menu .currency-btn:hover {
background: #f1f5f9;
border-left-color: #1e293b;
}
.currency-menu .currency-btn:hover .currency-btn-code,
.currency-menu .currency-btn:hover .currency-btn-symbol {
color: #1e293b;
}
.currency-menu .currency-btn.is-current {
background: rgba(30, 41, 59, 0.06);
border-left-color: #1e293b;
}
.currency-menu .currency-btn.is-current .currency-btn-code,
.currency-menu .currency-btn.is-current .currency-btn-name,
.currency-menu .currency-btn.is-current .currency-btn-symbol {
color: #1e293b;
font-weight: 800;
}
@media (max-width: 600px) {
.currency-switcher { margin-right: 4px; }
.currency-trigger { padding: 5px 10px; font-size: 0.78rem; }
.currency-trigger-icon { font-size: 0.85rem; }
}
@media (max-width: 600px) {
.topbar-info { display: none; }
.topbar-inner { justify-content: flex-end; }
}
/* ----- 5. Header ----- */
.header {
position: sticky;
top: 36px;
z-index: 50;
background: #fff;
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: 24px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-weight: 800;
font-size: 1.35rem;
color: var(--color-primary-dark);
letter-spacing: -0.02em;
}
.logo:hover { color: var(--color-primary); }
.logo-mark {
width: 36px;
height: 36px;
border-radius: 8px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
display: grid;
place-items: center;
color: #fff;
font-weight: 800;
}
.main-nav {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
margin-left: 32px;
}
.main-nav a {
padding: 8px 14px;
border-radius: var(--radius-sm);
color: var(--color-text);
font-weight: 500;
font-size: 0.95rem;
}
.main-nav a:hover {
background: var(--color-bg-alt);
color: var(--color-primary);
}
.main-nav a.active {
color: var(--color-primary);
font-weight: 600;
}
.header-actions {
display: flex;
align-items: center;
gap: 8px;
}
.icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--color-text);
position: relative;
}
.icon-btn:hover { background: var(--color-bg-alt); }
.icon-btn .badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
background: var(--color-accent);
color: #1c1917;
font-size: 0.7rem;
font-weight: 700;
display: grid;
place-items: center;
}
.menu-toggle {
display: none;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
}
.menu-toggle:hover { background: var(--color-bg-alt); }
@media (max-width: 960px) {
.main-nav {
position: fixed;
inset: var(--header-height) 0 0 0;
background: #fff;
flex-direction: column;
align-items: stretch;
padding: 16px;
margin: 0;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.25s ease;
}
.main-nav.open { transform: translateX(0); }
.main-nav a {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
}
.menu-toggle { display: inline-flex; }
}
/* ----- 6. Hero ----- */
/* DEPRECATED: legacy homepage .hero — replaced by .category-banner--all.
Kept for now so future pages can reuse the styles if needed; the homepage
no longer renders these elements. Safe to remove in a later cleanup. */
.hero {
position: relative;
background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%);
padding: 72px 0 96px;
overflow: hidden;
border-bottom: 1px solid var(--color-border);
}
.hero::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(234, 88, 12, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.hero::after {
content: '';
position: absolute;
bottom: -160px; left: -160px;
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(30, 58, 138, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
position: relative;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: var(--color-accent-soft);
color: var(--color-accent-dark);
border: 1px solid rgba(234, 88, 12, 0.18);
border-radius: 99px;
font-size: 0.82rem;
font-weight: 600;
margin-bottom: 20px;
}
.hero h1 {
font-size: clamp(2.25rem, 5vw, 3.5rem);
margin-bottom: 16px;
font-weight: 800;
}
.hero p.lead {
font-size: 1.15rem;
color: var(--color-text-muted);
margin-bottom: 32px;
max-width: 520px;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
.hero-trust {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 0.9rem;
color: var(--color-text-muted);
}
.hero-trust span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hero-trust svg { color: var(--color-success); flex-shrink: 0; }
.hero-visual {
position: relative;
aspect-ratio: 1 / 1;
max-width: 520px;
margin-left: auto;
}
.hero-visual .visual-card {
position: absolute;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.hero-visual .vc-1 {
top: 0; left: 0;
width: 60%; height: 60%;
}
.hero-visual .vc-2 {
bottom: 0; right: 0;
width: 55%; height: 55%;
}
.hero-visual .vc-3 {
top: 30%; right: 10%;
width: 35%; height: 35%;
border-radius: 50%;
}
.hero-visual img {
width: 100%; height: 100%;
object-fit: cover;
}
@media (max-width: 800px) {
.hero { padding: 48px 0 64px; }
.hero-grid { grid-template-columns: 1fr; gap: 32px; }
.hero-visual { max-width: 360px; margin: 0 auto; }
}
/* ----- 7. Sections ----- */
.section { padding: 72px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-bg-dark); color: #e2e8f0; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 48px;
}
.section-header h2 {
font-size: clamp(1.75rem, 3vw, 2.5rem);
margin-bottom: 12px;
}
.section-header p {
color: var(--color-text-muted);
font-size: 1.05rem;
margin: 0;
}
@media (max-width: 600px) {
.section { padding: 48px 0; }
.section-header { margin-bottom: 32px; }
}
/* ----- 8. Category cards (homepage) ----- */
.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) { .category-grid { grid-template-columns: 1fr; } }
.category-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
text-decoration: none;
color: inherit;
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary-light);
}
.category-card .card-image {
aspect-ratio: 4/3;
background: var(--color-bg-alt);
overflow: hidden;
}
.category-card .card-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.category-card:hover .card-image img { transform: scale(1.05); }
.category-card .card-body {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.category-card h3 {
margin: 0 0 8px;
font-size: 1.4rem;
}
.category-card p {
color: var(--color-text-muted);
margin: 0 0 16px;
flex: 1;
}
.category-card .card-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.category-card .price-from {
color: var(--color-accent-dark);
font-weight: 700;
font-size: 1.05rem;
}
/* ----- 9. Product grid (sub-category list on product pages) ----- */
.product-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin-left: auto;
margin-right: auto;
max-width: 1280px;
}
.product-grid > .product-card {
flex: 0 0 280px;
max-width: 320px;
}
.product-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition);
}
.product-card:hover {
border-color: var(--color-primary-light);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.product-card .card-image {
aspect-ratio: 1/1;
background: var(--color-bg-alt);
overflow: hidden;
position: relative;
}
.product-card .card-image img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.product-card:hover .card-image img { transform: scale(1.04); }
.product-card .badge-sale {
position: absolute;
top: 12px;
left: 12px;
background: var(--color-danger);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.05em;
}
.product-card .card-body {
padding: 16px;
display: flex;
flex-direction: column;
flex: 1;
gap: 8px;
}
.product-card h3 {
margin: 0;
font-size: 1rem;
font-weight: 600;
min-height: 2.4em;
line-height: 1.2;
}
.product-card .meta {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.product-card .rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
color: var(--color-text-muted);
}
.product-card .rating .stars { color: var(--color-accent); letter-spacing: 1px; }
.product-card .price {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: auto;
}
.product-card .price-current {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text);
}
.product-card .price-suffix {
font-size: 0.8rem;
color: var(--color-text-muted);
}
/* ----- 10. Page header (sub-category pages) ----- */
.page-header {
background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%);
padding: 56px 0 40px;
border-bottom: 1px solid var(--color-border);
}
/* ============================================================
.category-banner — premium hero strip used at the very top of
every product-listing page (PVC Cards / Lanyards / Wristbands)
and on the homepage. The right two-thirds is a pre-composed
collage of REAL Step-1 product photos (built by
scripts/build-category-banners.py) — left ~40% is kept clean
by a cream-to-transparent gradient so the heading stays
crisp at every viewport width.
One image per surface, swapped via the modifier class:
.category-banner--wristbands -> hero/category-banner-wristbands.jpg
.category-banner--lanyards -> hero/category-banner-lanyards.jpg
.category-banner--idcards -> hero/category-banner-idcards.jpg
.category-banner--all -> hero/category-banner-all.jpg
============================================================ */
.category-banner {
position: relative;
background-color: #faf4e8;
border-bottom: 1px solid var(--color-border);
overflow: hidden;
}
.category-banner .container { position: relative; z-index: 2; }
.category-banner__inner {
padding: 60px 0 72px;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
min-height: 380px;
}
.category-banner .breadcrumb { margin-bottom: 18px; }
.category-banner__text { max-width: 540px; }
.category-banner__eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-accent, #00b3a4);
margin-bottom: 14px;
}
.category-banner__h1 {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.01em;
color: #1f2937;
margin: 0 0 14px;
}
.category-banner__tagline {
display: inline-block;
background: #1f2937;
color: #fff;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 6px;
margin-bottom: 16px;
}
.category-banner__lead {
font-size: 1.02rem;
line-height: 1.55;
color: #4b5563;
margin: 6px 0 10px;
}
.category-banner__sub {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-accent, #00b3a4);
}
/* Homepage variant — taller, with extra breathing room for CTAs +
trust badges. Used together with .category-banner--all. */
.category-banner--lg .category-banner__inner {
padding: 84px 0 96px;
min-height: 480px;
}
.category-banner--lg .category-banner__text { max-width: 600px; }
.category-banner--lg .category-banner__h1 {
font-size: clamp(2.25rem, 5vw, 3.6rem);
}
.category-banner--lg .category-banner__lead {
font-size: 1.1rem;
margin: 8px 0 22px;
max-width: 540px;
}
.category-banner--lg .hero-cta { margin: 12px 0 26px; }
.category-banner--lg .hero-trust { margin-top: 4px; }
/* --- per-category background images (desktop: products on right) ---
The banner JPGs are editorial product photography (1600x540) with
the products composed on the right two-thirds against a soft cream
paper background, with the left third left intentionally empty as
negative space for the headline. The CSS overlay gradient just adds
a SHORT cream wash over the leftmost 36% to guarantee heading
contrast on any viewport. */
.category-banner--wristbands {
background-image:
linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%,
rgba(250, 245, 233, 0.55) 18%,
rgba(250, 245, 233, 0) 36%),
url('../images/hero/category-banner-wristbands.jpg?v=hero-8');
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
}
.category-banner--lanyards {
background-image:
linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%,
rgba(250, 245, 233, 0.55) 18%,
rgba(250, 245, 233, 0) 36%),
url('../images/hero/category-banner-lanyards.jpg?v=hero-8');
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
}
.category-banner--idcards {
background-image:
linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%,
rgba(250, 245, 233, 0.55) 18%,
rgba(250, 245, 233, 0) 36%),
url('../images/hero/category-banner-idcards.jpg?v=hero-8');
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
}
.category-banner--all {
background-image:
linear-gradient(90deg, rgba(250, 245, 233, 0.94) 0%,
rgba(250, 245, 233, 0.55) 18%,
rgba(250, 245, 233, 0) 36%),
url('../images/hero/category-banner-all.jpg?v=hero-8');
background-position: center right;
background-size: cover;
background-repeat: no-repeat;
}
/* --- tablet / mobile: products fade to the bottom; text sits on top --- */
@media (max-width: 900px) {
.category-banner__inner { padding: 36px 0 280px; min-height: auto; }
.category-banner__text { max-width: 100%; }
.category-banner--wristbands {
background-image:
linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%,
rgba(250, 245, 233, 0.40) 50%,
rgba(250, 245, 233, 0) 80%),
url('../images/hero/category-banner-wristbands.jpg?v=hero-8');
background-position: center bottom;
background-size: contain;
}
.category-banner--lanyards {
background-image:
linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%,
rgba(250, 245, 233, 0.40) 50%,
rgba(250, 245, 233, 0) 80%),
url('../images/hero/category-banner-lanyards.jpg?v=hero-8');
background-position: center bottom;
background-size: contain;
}
.category-banner--idcards {
background-image:
linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%,
rgba(250, 245, 233, 0.40) 50%,
rgba(250, 245, 233, 0) 80%),
url('../images/hero/category-banner-idcards.jpg?v=hero-8');
background-position: center bottom;
background-size: contain;
}
.category-banner--all {
background-image:
linear-gradient(180deg, rgba(250, 245, 233, 0.92) 0%,
rgba(250, 245, 233, 0.40) 50%,
rgba(250, 245, 233, 0) 80%),
url('../images/hero/category-banner-all.jpg?v=hero-8');
background-position: center bottom;
background-size: contain;
}
}
@media (max-width: 520px) {
.category-banner__inner { padding: 28px 0 220px; }
.category-banner__h1 { font-size: 1.85rem; }
}
/* ============ ID Cards hero (richer hero with sample cards graphic) ============ */
.id-hero {
background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%);
padding: 40px 0 28px;
border-bottom: 1px solid var(--color-border);
}
.id-hero .breadcrumb { margin-bottom: 18px; }
.id-hero-grid {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(380px, 1.05fr);
gap: 32px;
align-items: center;
}
.id-hero-eyebrow {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--color-text-muted);
margin-bottom: 8px;
text-transform: uppercase;
}
.id-hero-h1 {
margin: 0 0 14px;
font-size: clamp(2rem, 4.5vw, 3.4rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -0.02em;
color: #0f0f0e;
}
.id-hero-tagline {
display: inline-block;
background: #111;
color: #fff;
padding: 9px 16px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 1.2px;
margin: 0 0 18px;
border-radius: 4px;
line-height: 1.3;
text-transform: uppercase;
}
.id-hero .lead {
color: var(--color-text-muted);
font-size: 1rem;
max-width: 560px;
margin: 0;
line-height: 1.55;
}
.id-hero .lead-sub {
margin: 12px 0 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-primary);
letter-spacing: 0.02em;
}
.id-hero-cards {
width: 100%;
max-width: 620px;
justify-self: end;
}
.id-hero-cards svg {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 860px) {
.id-hero-grid { grid-template-columns: 1fr; gap: 22px; }
.id-hero-cards { max-width: 540px; justify-self: center; }
.id-hero-tagline { font-size: 0.78rem; letter-spacing: 1px; padding: 8px 13px; }
}
@media (max-width: 520px) {
.id-hero { padding: 28px 0 20px; }
.id-hero-h1 { font-size: 1.85rem; }
}
/* ============ Lanyard hero (same vibe as .id-hero, but with real
product photos fanned across the right column instead of SVG
cards). The five photo tiles overlap and rotate progressively to
create the same magazine-cover spread the PVC page uses. ============ */
.lan-hero {
background: linear-gradient(135deg, #f7f6f1 0%, #efece5 100%);
padding: 40px 0 36px;
border-bottom: 1px solid var(--color-border);
overflow: hidden;
}
.lan-hero .breadcrumb { margin-bottom: 18px; }
.lan-hero-grid {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.05fr);
gap: 32px;
align-items: center;
}
.lan-hero-eyebrow {
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 2.5px;
color: var(--color-text-muted);
margin-bottom: 8px;
text-transform: uppercase;
}
.lan-hero-h1 {
margin: 0 0 14px;
font-size: clamp(2rem, 4.5vw, 3.4rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: -0.02em;
color: #0f0f0e;
}
.lan-hero-tagline {
display: inline-block;
background: #111;
color: #fff;
padding: 9px 16px;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 1.2px;
margin: 0 0 18px;
border-radius: 4px;
line-height: 1.3;
text-transform: uppercase;
}
.lan-hero .lead {
color: var(--color-text-muted);
font-size: 1rem;
max-width: 560px;
margin: 0;
line-height: 1.55;
}
.lan-hero .lead-sub {
margin: 12px 0 0;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-primary);
letter-spacing: 0.02em;
}
/* The fanned-photo strip.
Layout: relative-positioned container, each card absolutely
placed with a left%, rotation and z-index. The container height
is set proportionally so we don't need width-tied media queries. */
.lan-hero-strip {
position: relative;
width: 100%;
max-width: 620px;
justify-self: end;
aspect-ratio: 720 / 440; /* matches the PVC hero canvas */
}
.lan-hero-card {
position: absolute;
top: 8%;
width: 24%;
aspect-ratio: 156 / 246; /* same portrait shape as PVC cards */
border-radius: 14px;
overflow: hidden;
background: #fff;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 14px 28px rgba(33, 25, 60, 0.20),
0 4px 8px rgba(33, 25, 60, 0.10);
transform-origin: 50% 80%;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.lan-hero-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lan-hero-card--1 { left: 1%; z-index: 1; transform: rotate(-22deg); }
.lan-hero-card--2 { left: 19%; z-index: 2; transform: rotate(-11deg); }
.lan-hero-card--3 { left: 38%; z-index: 5; transform: rotate( 0deg) translateY(-6%); }
.lan-hero-card--4 { left: 57%; z-index: 4; transform: rotate( 11deg); }
.lan-hero-card--5 { left: 75%; z-index: 3; transform: rotate( 22deg); }
.lan-hero-card:hover {
z-index: 9;
transform: scale(1.06) rotate(0deg) translateY(-10px);
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 22px 38px rgba(33, 25, 60, 0.32),
0 6px 12px rgba(33, 25, 60, 0.14);
}
@media (max-width: 980px) {
.lan-hero-grid { grid-template-columns: 1fr; gap: 24px; }
.lan-hero-strip { max-width: 580px; justify-self: center; }
.lan-hero-tagline { font-size: 0.78rem; letter-spacing: 1px; padding: 8px 13px; }
}
@media (max-width: 560px) {
.lan-hero { padding: 28px 0 24px; }
.lan-hero-h1 { font-size: 1.85rem; }
/* Tighter fan + slightly larger cards so the 3 visible ones still
read on a phone (#1 and #5 partly clip off-canvas — that's the
intended magazine-edge feel). */
.lan-hero-card { width: 30%; }
.lan-hero-card--1 { left: -4%; transform: rotate(-22deg); }
.lan-hero-card--2 { left: 13%; transform: rotate(-11deg); }
.lan-hero-card--3 { left: 35%; transform: rotate( 0deg) translateY(-6%); }
.lan-hero-card--4 { left: 57%; transform: rotate( 11deg); }
.lan-hero-card--5 { left: 76%; transform: rotate( 22deg); }
}
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.875rem;
color: var(--color-text-muted);
margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb .sep { color: var(--color-text-light); }
.page-header h1 {
margin: 0 0 12px;
font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.page-header .lead {
color: var(--color-text-muted);
font-size: 1.05rem;
max-width: 720px;
margin: 0;
}
.page-header .lead-sub {
margin: 14px 0 0;
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
letter-spacing: 0.01em;
}
.product-section { padding: 48px 0; }
.product-section h2 {
font-size: 1.5rem;
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-border);
}
/* ----- 11. Steps (Customize in X Easy Steps) ----- */
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
counter-reset: step;
}
.step-card {
text-align: center;
padding: 24px 16px;
position: relative;
}
.step-card .step-icon {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
display: grid;
place-items: center;
margin: 0 auto 16px;
color: #fff;
font-weight: 800;
font-size: 1.25rem;
}
.step-card h4 {
font-size: 1rem;
margin-bottom: 6px;
}
.step-card p {
font-size: 0.875rem;
color: var(--color-text-muted);
margin: 0;
}
/* ----- 12. Brand strip ----- */
.brand-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 32px;
align-items: center;
opacity: 0.7;
}
.brand-strip > div {
display: grid;
place-items: center;
height: 60px;
font-weight: 700;
font-size: 1.15rem;
color: var(--color-text-muted);
letter-spacing: 0.02em;
}
/* ----- 13. Testimonials ----- */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.testimonial-card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 24px;
position: relative;
}
.testimonial-card .stars {
color: var(--color-accent);
letter-spacing: 2px;
margin-bottom: 12px;
}
.testimonial-card blockquote {
margin: 0 0 16px;
font-size: 0.95rem;
color: var(--color-text);
line-height: 1.6;
font-style: italic;
}
.testimonial-card .author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-card .avatar {
width: 40px; height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
display: grid; place-items: center;
color: #fff;
font-weight: 700;
font-size: 0.9rem;
}
.testimonial-card .author-name {
font-weight: 600;
font-size: 0.875rem;
}
.testimonial-card .author-meta {
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* ----- 14. Features (Why us) ----- */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px;
}
.feature-card {
text-align: center;
padding: 24px;
}
.feature-card .feature-icon {
width: 56px; height: 56px;
border-radius: 14px;
background: rgba(59, 130, 246, 0.1);
color: var(--color-primary);
display: grid; place-items: center;
margin: 0 auto 16px;
}
.feature-card h4 {
font-size: 1.05rem;
margin-bottom: 8px;
}
.feature-card p {
color: var(--color-text-muted);
font-size: 0.9rem;
margin: 0;
}
/* ----- 15. CTA banner ----- */
.cta-banner {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
color: #fff;
padding: 56px 0;
text-align: center;
border-radius: var(--radius-lg);
margin: 48px 0;
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
top: -50%; right: -10%;
width: 60%; height: 200%;
background: radial-gradient(circle, rgba(234, 88, 12, 0.18) 0%, transparent 60%);
pointer-events: none;
}
.cta-banner h2 {
color: #fff;
margin-bottom: 12px;
position: relative;
}
.cta-banner p {
color: rgba(255, 255, 255, 0.85);
max-width: 600px;
margin: 0 auto 24px;
position: relative;
}
/* ----- 16. Footer ----- */
.footer {
background: var(--color-bg-dark);
color: #cbd5e1;
padding: 64px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
}
@media (max-width: 800px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
.footer h4 {
color: #fff;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 18px;
}
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer li { margin-bottom: 10px; }
.footer a {
color: #94a3b8;
font-size: 0.9rem;
}
.footer a:hover { color: #fff; }
.footer-brand .logo {
color: #fff;
margin-bottom: 16px;
}
.footer-brand p {
font-size: 0.875rem;
color: #94a3b8;
margin-bottom: 16px;
line-height: 1.6;
}
.footer-contact {
font-size: 0.875rem;
line-height: 1.8;
color: #94a3b8;
}
/* WhatsApp row inside the footer-contact block — order-card.com
ships the same kind of green call-to-action right under the
support phone. Matches the topbar wa icon colour for visual
continuity. */
.footer-wa {
margin-top: 10px;
}
.footer-wa a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(34, 197, 94, 0.12);
color: #4ade80;
font-size: 0.825rem;
font-weight: 600;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.footer-wa a:hover {
background: rgba(34, 197, 94, 0.22);
color: #86efac;
}
.footer-wa a svg {
flex-shrink: 0;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding: 24px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 0.85rem;
color: #64748b;
}
.payment-methods {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.payment-methods .pm {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
color: #cbd5e1;
font-size: 0.7rem;
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
letter-spacing: 0.04em;
}
/* ----- 17. Cookie banner (GDPR) ----- */
.cookie-banner {
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
max-width: 540px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 20px;
z-index: 100;
display: none;
}
.cookie-banner.visible { display: block; }
.cookie-banner h4 {
margin: 0 0 8px;
font-size: 1rem;
}
.cookie-banner p {
font-size: 0.875rem;
color: var(--color-text-muted);
margin: 0 0 16px;
line-height: 1.5;
}
.cookie-banner p a {
color: var(--color-primary);
text-decoration: underline;
}
.cookie-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cookie-actions .btn { padding: 8px 16px; font-size: 0.875rem; }
/* ----- 18. Generic content pages (about, faq, etc.) ----- */
.content-page {
padding: 56px 0 80px;
max-width: 800px;
margin: 0 auto;
}
.content-page h1 {
margin-bottom: 8px;
}
.content-page .updated {
color: var(--color-text-muted);
font-size: 0.875rem;
margin-bottom: 32px;
}
.content-page h2 {
font-size: 1.5rem;
margin-top: 40px;
margin-bottom: 16px;
}
.content-page h3 {
font-size: 1.15rem;
margin-top: 24px;
margin-bottom: 8px;
}
.content-page p, .content-page li {
color: var(--color-text);
line-height: 1.7;
}
/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: #fff;
}
.faq-question {
width: 100%;
text-align: left;
padding: 18px 20px;
font-weight: 600;
font-size: 1rem;
color: var(--color-text);
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
transition: var(--transition);
}
.faq-question:hover { background: var(--color-bg-alt); }
.faq-question .icon {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.faq-item.open .faq-question .icon { transform: rotate(180deg); }
.faq-answer {
display: none;
padding: 0 20px 18px;
color: var(--color-text-muted);
line-height: 1.7;
}
.faq-item.open .faq-answer { display: block; }
/* Contact form */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field.full { grid-column: 1 / -1; }
.form-field label {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
}
.form-field input,
.form-field select,
.form-field textarea {
padding: 10px 14px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.95rem;
color: var(--color-text);
background: #fff;
transition: var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}
.form-field textarea { resize: vertical; min-height: 120px; }
/* Status banner shown under the contact-page submit button after
the buyer's mail client has been opened. Only two states needed
since mailto: dispatch is instant: success (mailto fired ok)
and error (validation failure). order-card.com's contact form
uses an equally lightweight inline notice. */
.contact-form-status {
margin: 12px 0 0;
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
line-height: 1.45;
border: 1px solid transparent;
}
.contact-form-status--success {
background: #ecfdf5;
border-color: #6ee7b7;
color: #065f46;
}
.contact-form-status--error {
background: #fef2f2;
border-color: #fca5a5;
color: #991b1b;
}
/* ----- 19. Utilities ----- */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ===========================================================================
20. Product card "Customize" CTA
=========================================================================== */
.product-card .card-cta {
margin-top: 8px;
}
.btn-customize {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
background: var(--color-primary-dark);
color: #fff;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.875rem;
border: none;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
}
.btn-customize:hover {
background: var(--color-accent);
color: #fff;
transform: translateY(-1px);
}
.btn-customize svg { width: 14px; height: 14px; }
/* ===========================================================================
21. Configurator modal (Step 1 → Step N wizard)
=========================================================================== */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
z-index: 200;
opacity: 0;
transition: opacity 0.2s ease;
}
.modal-backdrop.open {
display: flex;
opacity: 1;
}
.modal {
background: #fff;
border-radius: var(--radius-lg);
width: 100%;
max-width: 980px;
max-height: 92vh;
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.25);
transform: translateY(8px);
transition: transform 0.2s ease;
}
.modal-backdrop.open .modal { transform: translateY(0); }
/* Modal header */
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px;
border-bottom: 1px solid var(--color-border);
}
.modal-title {
font-size: 1rem;
font-weight: 700;
margin: 0;
color: var(--color-text);
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.modal-title .modal-product {
color: var(--color-accent-dark);
font-weight: 700;
}
.modal-close {
width: 36px;
height: 36px;
border-radius: 50%;
background: transparent;
color: var(--color-text-muted);
display: grid;
place-items: center;
cursor: pointer;
border: none;
transition: var(--transition);
}
.modal-close:hover { background: var(--color-bg-alt); color: var(--color-text); }
/* Step navigation */
.config-stepnav {
display: flex;
align-items: center;
gap: 0;
padding: 18px 24px 8px;
overflow-x: auto;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-alt);
}
.config-stepnav::-webkit-scrollbar { height: 4px; }
.config-stepnav::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; }
.config-stepnav .step {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
position: relative;
}
.config-stepnav .step + .step { padding-left: 28px; }
.config-stepnav .step + .step::before {
content: '';
position: absolute;
left: 12px; top: 50%;
width: 12px;
height: 1px;
background: var(--color-border-strong);
}
.config-stepnav .step-circle {
width: 28px; height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff;
border: 1.5px solid var(--color-border-strong);
color: var(--color-text-muted);
font-weight: 700;
font-size: 0.78rem;
flex-shrink: 0;
}
.config-stepnav .step-label {
font-size: 0.82rem;
color: var(--color-text-muted);
font-weight: 600;
white-space: nowrap;
}
.config-stepnav .step.is-active .step-circle {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: #fff;
}
.config-stepnav .step.is-active .step-label {
color: var(--color-text);
}
.config-stepnav .step.is-done .step-circle {
background: var(--color-success);
border-color: var(--color-success);
color: #fff;
}
.config-stepnav .step.is-done .step-circle::after {
content: '\2713';
font-weight: 700;
}
.config-stepnav .step.is-done .step-circle .step-num { display: none; }
/* Modal body / step panels */
.modal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
overflow: hidden;
min-height: 380px;
}
@media (max-width: 800px) {
.modal-body { grid-template-columns: 1fr; }
}
.config-main {
padding: 28px 32px 16px;
overflow-y: auto;
min-width: 0;
}
/* Disable the browser's scroll-anchoring inside the configurator. When a
style tile is clicked, applyVariantSteps() hides every step block and then
re-inserts them in order; the browser would otherwise re-anchor the viewport
onto a moved block and fling the page to a different step (most noticeable
when the clicked tile was only half visible). With anchoring off, our manual
scroll-restore (requestAnimationFrame + scrollTo) keeps the page steady. */
#configurator, #configurator * { overflow-anchor: none; }
/* Minimum-order-quantity notice under the cloth wristband Quantity input. */
.qty-moq-warn {
display: flex;
align-items: center;
gap: 6px;
margin: 6px 0 0;
color: #dc2626;
font-size: 0.82rem;
font-weight: 600;
}
.qty-moq-warn[hidden] { display: none; }
.qty-moq-warn svg { flex: 0 0 auto; }
.wb-input.qty-invalid {
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}
.config-step-panel { display: none; }
.config-step-panel.is-active { display: block; }
.config-step-panel h3 {
font-size: 1.25rem;
margin: 0 0 6px;
color: var(--color-text);
}
.config-step-panel .step-help {
margin: 0 0 22px;
color: var(--color-text-muted);
font-size: 0.92rem;
}
/* Option cards (style/material/clip selection) */
.option-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.option-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 12px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
cursor: pointer;
text-align: left;
transition: var(--transition);
font-family: inherit;
position: relative;
}
.option-card:hover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.option-card.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-soft);
box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.option-card.is-selected::after {
content: '\2713';
position: absolute;
top: 6px; right: 8px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-size: 0.7rem;
display: grid;
place-items: center;
font-weight: 700;
}
.option-card .opt-title {
font-weight: 700;
font-size: 0.92rem;
color: var(--color-text);
}
.option-card .opt-meta,
.option-card .opt-sub {
font-size: 0.78rem;
color: var(--color-text-muted);
}
/* Force-column variants for the cloth-wristband configurator so the
"Print Design" (4 cards) and "Weave Threads" (3 cards) steps line up
neatly instead of falling into the auto-fill flow. */
.option-grid--3 { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
.option-grid--4 { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
@media (max-width: 720px) {
.option-grid--3,
.option-grid--4 { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}
/* Cloth wristband colour / metallic-thread swatches.
The swatches double as picker buttons: the coloured face IS the
option, with a small label below for accessibility / clarity. */
.cloth-swatch-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cloth-swatch {
flex: 0 0 auto;
width: 96px;
min-height: 84px;
border: 2px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 8px;
font-family: inherit;
font-weight: 600;
font-size: 0.78rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.cloth-swatch:hover { transform: translateY(-1px); border-color: var(--color-accent); }
.cloth-swatch.is-selected {
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.25);
}
.cloth-swatch.is-selected::after {
content: '\2713';
position: absolute;
top: 4px; right: 4px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-size: 0.72rem;
display: grid;
place-items: center;
font-weight: 700;
text-shadow: none;
}
.cloth-swatch .cloth-swatch-label {
background: rgba(15, 23, 42, 0.55);
padding: 2px 6px;
border-radius: 4px;
color: #fff;
font-size: 0.72rem;
white-space: nowrap;
}
.cloth-swatch--none {
background: repeating-linear-gradient(135deg, #f8fafc, #f8fafc 10px, #e2e8f0 10px, #e2e8f0 20px) !important;
color: #475569 !important;
text-shadow: none;
}
.cloth-swatch--none .cloth-swatch-label {
background: rgba(255, 255, 255, 0.9);
color: #0f172a;
}
.cloth-swatch--pms .cloth-swatch-label {
background: rgba(15, 23, 42, 0.75);
}
/* Size buttons (compact pill style) */
.size-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.size-btn {
padding: 10px 16px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
font-family: inherit;
font-size: 0.88rem;
cursor: pointer;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 96px;
}
.size-btn:hover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.size-btn.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-soft);
color: var(--color-accent-dark);
font-weight: 700;
}
.size-btn .sz-name { font-weight: 700; }
.size-btn .sz-dim {
font-size: 0.72rem;
color: var(--color-text-muted);
font-weight: 500;
}
.size-btn.is-selected .sz-dim { color: var(--color-accent-dark); }
/* Color swatches */
.swatch-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px 12px;
}
.swatch-grid > .swatch { flex: 0 0 100px; }
/* "Card-style" swatch — name on TOP, colour block below (matches the
polyester-lanyard reference: each colour is a small white card with a
name label, a colour rectangle and (later) a qty input). */
.swatch {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease,
border-color 180ms ease, background 180ms ease;
padding: 10px 8px;
background: #fff;
border: 1.5px solid var(--color-border, #e5e7eb);
border-radius: 10px;
font-family: inherit;
min-height: 92px;
}
.swatch-name {
font-size: 0.78rem;
color: var(--color-text);
text-align: center;
line-height: 1.2;
word-break: break-word;
max-width: 100%;
order: 1; /* name on top */
font-weight: 500;
}
.swatch::before {
content: '';
width: 36px;
height: 22px;
border-radius: 4px;
background: var(--swatch-bg, #ccc);
border: 1px solid var(--color-border-strong, #d1d5db);
order: 2; /* colour block below */
flex: 0 0 auto;
transition: transform 180ms ease;
}
.swatch:hover {
border-color: var(--color-accent);
box-shadow: 0 4px 12px rgba(15,23,42,0.06);
transform: translateY(-1px);
}
.swatch:hover .swatch-name { color: var(--color-accent-dark); }
.swatch:hover::before { transform: scale(1.08); }
.swatch.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-soft, rgba(37,99,235,0.08));
box-shadow: 0 0 0 2px var(--color-accent);
}
.swatch.is-selected .swatch-name { color: var(--color-accent-dark, var(--color-accent)); font-weight: 700; }
.swatch.is-selected::before {
border-color: var(--color-accent-dark, var(--color-accent));
border-width: 1.5px;
}
.swatch-info {
margin-top: 12px;
font-size: 0.82rem;
color: var(--color-text-muted);
}
.swatch-info strong { color: var(--color-text); font-weight: 600; }
/* ============================================================
"With Qty" swatch variant — horizontal card with a colour
band on the left and a name + numeric Qty input on the right.
Used in lanyard Step 3 where each colour is independently
priced/orderable (matches the tablecoversnow reference layout).
============================================================ */
.swatch-grid--qty {
gap: 14px 14px;
justify-content: flex-start;
}
.swatch-grid--qty > .swatch--with-qty {
flex: 0 0 168px;
}
.swatch--with-qty {
/* Reset the column flex inherited from .swatch */
display: grid;
grid-template-columns: 56px 1fr;
align-items: stretch;
gap: 0;
padding: 0;
min-height: 70px;
overflow: hidden;
background: #fff;
border: 1.5px solid var(--color-border, #e5e7eb);
border-radius: 10px;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.swatch--with-qty::before { display: none; }
.swatch--with-qty .swatch-color {
background: var(--swatch-bg, #ccc);
display: block;
width: 100%;
height: 100%;
border-right: 1px solid var(--color-border-strong, #d1d5db);
position: relative;
overflow: hidden;
}
.swatch--with-qty.swatch-light .swatch-color {
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
/* Photo-backed swatches (lanyard popular tab). The ![]()
fills the
coloured tile and sits above the solid hex fallback. If the image
fails to load, onerror hides it and the underlying CSS background
becomes the swatch face again. */
.swatch--photo .swatch-color {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.swatch--photo .swatch-color img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.swatch--with-qty .swatch-info-col {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 7px 9px;
min-width: 0;
}
.swatch--with-qty .swatch-name {
text-align: left;
font-size: 0.78rem;
line-height: 1.15;
margin: 0;
order: 0;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-text);
}
.swatch--with-qty .swatch-qty {
width: 100%;
padding: 4px 8px;
border: 1px solid var(--color-border, #d1d5db);
border-radius: 6px;
font-size: 0.78rem;
font-family: inherit;
color: var(--color-text);
background: #fff;
text-align: left;
appearance: textfield;
-moz-appearance: textfield;
box-sizing: border-box;
}
.swatch--with-qty .swatch-qty::-webkit-outer-spin-button,
.swatch--with-qty .swatch-qty::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.swatch--with-qty .swatch-qty::placeholder {
color: var(--color-text-muted, #94a3b8);
font-weight: 400;
}
.swatch--with-qty .swatch-qty:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent-soft, rgba(37,99,235,0.18));
}
.swatch--with-qty .swatch-qty.qty-invalid,
.swatch--with-qty .swatch-qty.qty-invalid:focus {
border-color: #ef4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}
.color-qty-warn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 12px;
padding: 10px 14px;
border: 1px solid #fecaca;
background: #fef2f2;
color: #dc2626;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
}
.color-qty-warn[hidden] { display: none; }
.color-qty-warn svg { flex: 0 0 auto; }
.swatch--with-qty:hover {
border-color: var(--color-accent-soft, #cbd5e1);
box-shadow: 0 4px 12px rgba(15,23,42,0.06);
}
.swatch--with-qty.has-qty,
.swatch--with-qty.is-selected {
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent);
background: #fff; /* override .swatch.is-selected accent-soft fill */
}
.swatch--with-qty.has-qty .swatch-name,
.swatch--with-qty.is-selected .swatch-name {
color: var(--color-accent-dark, var(--color-accent));
font-weight: 700;
}
/* When the PMS pane shows ~1,800 cards, tighten the card width so more
fit per row (still keep the color band + qty layout). */
.pms-grid-inline.swatch-grid--qty > .swatch--with-qty {
flex: 0 0 150px;
min-height: 62px;
}
.pms-grid-inline.swatch-grid--qty .swatch-name { font-size: 0.72rem; }
.pms-grid-inline.swatch-grid--qty .swatch-qty { font-size: 0.72rem; padding: 3px 6px; }
/* ============================================================
ATTACH-GRID — image-card grid for Step 5 (Attachment), Step 6
(Stitch), Step 7/8/9 (Optional add-ons), Step 11/12 (Holders /
Reels). Card layout: name on TOP, image on BOTTOM (matches
polyester-lanyard reference).
============================================================ */
.attach-tabs {
display: flex;
gap: 12px;
background: var(--color-surface-alt, #f1f5f9);
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 12px;
padding: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
justify-content: center;
}
.attach-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 14px 22px;
background: #fff;
border: 2px solid transparent;
border-radius: 12px;
cursor: pointer;
min-width: 200px;
transition: var(--transition);
font-family: inherit;
}
.attach-tab .at-img {
width: 150px;
height: 150px;
background: var(--color-surface-alt, #f1f5f9);
border-radius: 8px;
display: grid;
place-items: center;
overflow: hidden;
}
.attach-tab .at-img img, .attach-tab .at-img svg { max-width: 100%; max-height: 100%; object-fit: contain; }
.attach-tab .at-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-muted);
}
.attach-tab:hover { border-color: var(--color-accent-soft, #cbd5e1); }
.attach-tab.is-active {
border-color: var(--color-accent);
background: var(--color-accent-soft, rgba(37,99,235,0.06));
}
.attach-tab.is-active .at-name { color: var(--color-accent-dark); font-weight: 600; }
.attach-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin-top: 10px;
}
.attach-grid > .attach-card { flex: 0 0 230px; }
/* Open Ended / Dual Clips — two-column side-by-side layout
(Left Attachment | Right Attachment). Use !important to win against
the global ".step-block-body .attach-grid" flex override later in
the file. Matches polyester-lanyard reference. */
.step-block-body .attach-side-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px;
margin: 12px auto 0;
align-items: start;
max-width: 100%;
}
.step-block-body .attach-side {
display: flex;
flex-direction: column;
min-width: 0;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 12px;
background: #fff;
overflow: hidden;
}
.step-block-body .attach-side .holder-section-title {
margin: 0;
padding: 12px 16px;
text-align: center;
font-size: 1rem;
font-weight: 700;
color: var(--color-text);
background: var(--color-surface-alt, #f9fafb);
border-bottom: 1px solid var(--color-border, #e5e7eb);
}
/* No max-height + no overflow-y on the inner grid: a fixed-height nested
scroll container creates a "scroll trap" — the user's wheel events get
eaten by the hook grid and the page below (Holder, Reel, etc.) becomes
unreachable. Hooks max out at ~6 colours, so the grid is short anyway
and flows naturally with the page. */
.step-block-body .attach-side .attach-grid {
margin: 0 !important;
padding: 12px;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
justify-items: stretch !important;
max-width: none !important;
}
.step-block-body .attach-side .attach-grid > .attach-card {
flex: none !important;
width: 100% !important;
max-width: none !important;
min-width: 0;
}
@media (max-width: 720px) {
.step-block-body .attach-side-grid { grid-template-columns: 1fr !important; }
.step-block-body .attach-side .attach-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
.attach-card {
display: flex;
flex-direction: column;
padding: 0;
background: #fff;
border: 1.5px solid var(--color-border, #e5e7eb);
border-radius: 10px;
cursor: pointer;
overflow: hidden;
transition: var(--transition);
font-family: inherit;
}
.attach-card-name {
font-size: 0.95rem;
font-weight: 600;
padding: 12px 14px;
color: var(--color-text);
background: var(--color-surface-alt, #f9fafb);
border-bottom: 1px solid var(--color-border, #e5e7eb);
text-align: center;
}
/* Small "i" info pill shown after a variant label. Pure CSS tooltip on
hover / focus / tap (works without JS by leveraging data-tip + ::after).
The serif + italic combo turns the plain "i" character into the
familiar circled-italic-i info glyph without needing an icon font. */
.info-bang {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 6px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--color-accent, #2563eb);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
font-style: italic;
font-family: "Times New Roman", Georgia, "DejaVu Serif", serif;
cursor: help;
line-height: 1;
vertical-align: middle;
position: relative;
transition: transform 0.12s ease, background 0.12s ease;
}
.info-bang:hover,
.info-bang:focus-visible {
background: var(--color-accent-dark, #1d4ed8);
transform: scale(1.1);
outline: none;
}
.info-bang::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #0f172a;
color: #fff;
/* The button face uses italic Times New Roman to look like the "i"
icon. Reset both here so the tooltip body reads in the normal sans
body font, not in italic serif. */
font-family: var(--font-sans);
font-style: normal;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
padding: 8px 12px;
border-radius: 8px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
z-index: 20;
}
.info-bang::before {
/* Little arrow under the bubble */
content: '';
position: absolute;
bottom: calc(100% + 2px);
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #0f172a;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 20;
}
.info-bang:hover::after,
.info-bang:hover::before,
.info-bang:focus-visible::after,
.info-bang:focus-visible::before {
opacity: 1;
}
/* Long tooltips need to wrap, not bleed off the right edge.
pre-line (not normal) so explicit "\n" characters in data-tip render
as a real line break — used by LAN_HOLDER_TOOLTIPS to put "Holder
size" and "Insert size" on separate lines. Consecutive spaces still
collapse, so existing tooltips that don't carry "\n" look unchanged. */
.attach-card .info-bang::after { max-width: 280px; white-space: pre-line; text-align: center; }
.attach-card-img {
display: grid;
place-items: center;
padding: 14px 10px;
background: #fff;
min-height: 240px;
}
.attach-card-img svg { width: 96px; height: 96px; }
/* Source photos are 230x400 portrait — cap by height, let width auto-shrink */
.attach-card-img img.ac-photo {
max-width: 100%;
max-height: 230px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.attach-card-img .ac-fallback { display: block; }
/* Photo variant: real PVC card photos (Step 2 size/orient, Step 3 finish, Step 4 hole).
Image fills the entire card-img area (no swatch overlay). */
.attach-card-img--photo {
padding: 0;
background: #fff;
min-height: 240px;
overflow: hidden;
}
.attach-card-img--photo img {
width: 100%;
height: 100%;
min-height: 240px;
object-fit: cover;
display: block;
}
/* ===== Step 2 — Orientation tabs (Vertical / Horizontal) =====
Pill-style toggle above the size grid. Mirrors the reference toast.com
card-builder. */
.idc-orient-tabs {
display: flex;
justify-content: center;
gap: 0;
margin: 0 auto 24px;
padding: 4px;
background: #f1f5f9;
border-radius: 999px;
width: max-content;
}
.idc-orient-tab {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
color: #475569;
font: 600 14px/1 Inter, system-ui, sans-serif;
padding: 10px 22px;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.idc-orient-tab:hover { color: #0f172a; }
.idc-orient-tab.is-active {
background: #ffffff;
color: #0f172a;
box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(15,23,42,0.06);
}
.idc-orient-tab .idc-orient-tab-ico { display: inline-flex; }
/* ===== Step 2 — Size cards with Qty input =====
Card is laid out vertically: image · size label · qty input. */
.idc-orient-grid > .attach-card {
flex: 0 0 220px;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
overflow: hidden;
}
.idc-orient-grid .attach-card-img--photo {
min-height: 200px;
height: 200px;
background: #fff;
}
.idc-orient-grid .attach-card-img--photo img {
min-height: 200px;
height: 200px;
object-fit: contain;
padding: 10px;
}
.idc-orient-grid .attach-card-name {
background: #f1f5f9;
padding: 10px 12px;
text-align: center;
font: 600 14px/1.2 Inter, system-ui, sans-serif;
color: #1f2937;
}
/* Two-line size label: inch dimensions on top (bold, same size as the
default name) + mm dimensions underneath (smaller, muted). Layout uses
flex column with a thin gap so vertical rhythm stays tight inside the
card. The whole block sits in the same .attach-card-name slot the
single-line version used, so we keep the inherited background, padding
and "selected-state" highlight without writing them again. */
.idc-orient-grid .attach-card-name.idc-size-name {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.25;
}
.idc-orient-grid .idc-size-in {
font-weight: 600;
color: #1f2937;
}
.idc-orient-grid .idc-size-mm {
font-weight: 500;
font-size: 12px;
color: #64748b;
}
.idc-orient-grid .attach-card.is-selected .idc-size-in { color: inherit; }
.idc-orient-grid .attach-card.is-selected .idc-size-mm { color: inherit; opacity: 0.85; }
.idc-orient-grid .ac-qty-row {
padding: 10px;
background: #ffffff;
}
.idc-orient-grid .ac-qty {
width: 100%;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 8px 10px;
font: 500 14px/1.2 Inter, system-ui, sans-serif;
color: #111827;
text-align: center;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.idc-orient-grid .ac-qty:focus {
outline: none;
border-color: var(--color-accent, #2563eb);
box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}
.idc-orient-grid .ac-qty::-webkit-outer-spin-button,
.idc-orient-grid .ac-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.idc-orient-grid .ac-qty[type=number] { -moz-appearance: textfield; }
.idc-orient-grid .attach-card.is-selected .attach-card-name {
background: var(--color-accent-soft, rgba(37,99,235,0.12));
color: var(--color-accent-dark, #1d4ed8);
}
.attach-card:hover {
border-color: var(--color-accent);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.attach-card.is-selected {
border-color: var(--color-accent);
box-shadow: 0 0 0 2px var(--color-accent) inset;
}
.attach-card.is-selected .attach-card-name {
background: var(--color-accent-soft, rgba(37,99,235,0.08));
color: var(--color-accent-dark);
font-weight: 600;
}
/* Holder / Reel rows — outer style row, inner colour-variant row.
Variant sections are kept fully collapsed until the corresponding main
card is clicked. */
.holder-section { margin-top: 18px; }
.holder-section.is-collapsed,
.holder-section[hidden] { display: none !important; }
.holder-section .holder-section-title { display: none !important; }
/* ------ Step 11 main holder grid — flex-wrap centered (7 items: 4 + 3 centered) ------ */
.step-block-body .attach-grid[data-single="holder"],
.step-block-body .attach-grid[data-single="reel"] {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 14px !important;
max-width: 960px;
margin: 0 auto !important;
padding: 18px !important;
background: #edf4fa;
border-radius: 12px;
}
.step-block-body .attach-grid[data-single="holder"] > .attach-card,
.step-block-body .attach-grid[data-single="reel"] > .attach-card {
flex: 0 0 200px !important;
width: 200px !important;
max-width: 200px !important;
background: #fff;
border: 2px solid transparent;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(15,23,42,0.04);
flex-direction: column !important;
align-items: stretch;
padding: 14px 10px 10px;
gap: 8px;
}
.step-block-body .attach-grid[data-single="holder"] > .attach-card.is-selected,
.step-block-body .attach-grid[data-single="reel"] > .attach-card.is-selected {
border-color: var(--color-accent, #2563eb);
box-shadow: 0 3px 10px rgba(37,99,235,0.12);
}
.step-block-body .attach-grid[data-single="holder"] .attach-card-name,
.step-block-body .attach-grid[data-single="reel"] .attach-card-name {
background: transparent !important;
border: 0 !important;
font-size: 0.88rem;
font-weight: 600;
padding: 4px 0 0;
color: var(--color-accent, #2563eb);
text-align: center;
line-height: 1.25;
}
.step-block-body .attach-grid[data-single="holder"] .attach-card-img,
.step-block-body .attach-grid[data-single="reel"] .attach-card-img {
padding: 0;
min-height: 130px;
display: grid;
place-items: center;
}
.step-block-body .attach-grid[data-single="holder"] .attach-card-img img.ac-photo,
.step-block-body .attach-grid[data-single="reel"] .attach-card-img img.ac-photo {
max-height: 130px;
max-width: 95%;
}
.step-block-body .attach-grid[data-single="holder"] .attach-card-img svg,
.step-block-body .attach-grid[data-single="reel"] .attach-card-img svg {
width: 80px; height: 80px;
}
@media (max-width: 760px) {
.step-block-body .attach-grid[data-single="holder"],
.step-block-body .attach-grid[data-single="reel"] {
grid-template-columns: repeat(2, 1fr) !important;
}
.step-block-body .attach-grid[data-single="holder"] .attach-card-img,
.step-block-body .attach-grid[data-single="reel"] .attach-card-img {
min-height: 100px;
}
.step-block-body .attach-grid[data-single="holder"] .attach-card-img img.ac-photo,
.step-block-body .attach-grid[data-single="reel"] .attach-card-img img.ac-photo {
max-height: 100px;
}
}
/* ------ Variant grid inside holder-section — flex-wrap centered + Qty input ------ */
.holder-section > .attach-grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: stretch !important;
gap: 16px !important;
max-width: 980px;
margin: 14px auto 0;
padding: 0 4px !important;
}
.holder-section > .attach-grid > .attach-card {
flex: 0 0 190px !important;
width: 190px !important;
max-width: 190px !important;
flex-direction: column !important;
border-radius: 10px;
/* Override the .attach-card overflow:hidden default — the holder
tooltip is wider than the 190px card, so we have to let it spill
out. Pair with the info-bang::after z-index below so the bubble
stacks on top of neighbouring cards instead of being clipped. */
overflow: visible !important;
background: #fff;
border: 1px solid #e5e7eb;
box-shadow: 0 1px 2px rgba(15,23,42,0.04);
padding: 0 0 10px;
overflow: hidden;
}
.holder-section > .attach-grid > .attach-card.is-selected {
border-color: var(--color-accent, #2563eb);
box-shadow: 0 0 0 1px var(--color-accent, #2563eb), 0 2px 8px rgba(37,99,235,0.12);
}
.holder-section .attach-card-img {
order: 1;
padding: 16px 12px 8px;
min-height: 180px;
background: transparent;
}
.holder-section .attach-card-img img.ac-photo {
max-height: 170px;
max-width: 92%;
}
.holder-section .attach-card-img svg { width: 78px; height: 78px; }
.holder-section .attach-card-name {
order: 2;
background: transparent !important;
border: 0 !important;
font-size: 0.88rem;
font-weight: 500;
padding: 6px 10px 8px;
color: var(--color-text);
text-align: center;
line-height: 1.25;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.holder-section .attach-card.is-selected .attach-card-name {
color: var(--color-accent-dark, #1d4ed8);
font-weight: 600;
}
.holder-section .info-bang {
width: 14px;
height: 14px;
font-size: 0.6rem;
margin-left: 0;
background: #14b8a6;
}
.holder-section .info-bang:hover,
.holder-section .info-bang:focus-visible { background: #0d9488; }
.holder-section .attach-card .info-bang::after {
/* The holder tooltips are 4-line blocks (label / value × 2). Give
them room: bigger padding so the bubble doesn't crush the text, a
wider max-width so the (98×82mm) values stay on one line, and a
comfier line-height + min-width so all four lines breathe.
z-index is bumped above .info-bang's default so the bubble can
overlap neighbouring cards (now that the card itself is
overflow:visible) without being painted under them. */
font-size: 0.78rem;
padding: 10px 14px;
min-width: 200px;
max-width: 280px;
line-height: 1.5;
z-index: 100;
}
.holder-section .attach-card .info-bang::before { z-index: 100; }
/* Per-variant qty input, rendered by JS as */
.variant-qty-row {
display: flex;
justify-content: center;
padding: 4px 10px 2px;
order: 3;
}
.variant-qty-input {
width: 100%;
max-width: 110px;
height: 28px;
padding: 2px 6px;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #fff;
text-align: center;
font-size: 0.78rem;
color: var(--color-text);
outline: none;
transition: border-color 0.12s ease;
}
.variant-qty-input::placeholder { color: #9ca3af; font-weight: 400; }
.variant-qty-input:focus { border-color: var(--color-accent, #2563eb); }
/* Hide native number-spinner arrows for a cleaner look */
.variant-qty-input::-webkit-outer-spin-button,
.variant-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.variant-qty-input[type=number] { -moz-appearance: textfield; }
@media (max-width: 760px) {
.holder-section > .attach-grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
gap: 8px !important;
}
.holder-section .attach-card-img img.ac-photo { max-height: 100px; }
.holder-section .attach-card-img { min-height: 108px; padding: 10px 6px 4px; }
.holder-section .attach-card-name { font-size: 0.72rem; }
.variant-qty-input { height: 24px; font-size: 0.72rem; }
}
.holder-section-title {
font-size: 0.95rem;
font-weight: 600;
margin: 14px 0 8px;
padding-bottom: 6px;
border-bottom: 1px dashed var(--color-border, #e5e7eb);
}
/* PMS picker — open-modal button */
.pms-open-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: var(--color-accent-soft, #eef2ff);
color: var(--color-accent-dark);
border: 1.5px solid var(--color-accent);
border-radius: 8px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
margin: 8px 0 14px;
transition: var(--transition);
}
.pms-open-btn:hover { background: var(--color-accent); color: #fff; }
/* Modal — full-screen search for all 1800+ PMS codes */
.pms-modal-backdrop {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.55);
display: none;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 9999;
}
.pms-modal-backdrop.is-open { display: flex; }
/* Legacy backdrop dialog. Renamed from `.pms-modal` to `.pms-dialog` so it no
longer collides with the current full-screen overlay `.pms-modal` (used by
openPmsModal). The collision leaked max-width/width/flex-direction onto the
overlay and pinned it to the top-left instead of centring it. */
.pms-dialog {
background: #fff;
border-radius: 14px;
max-width: 900px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pms-modal-head {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border, #e5e7eb);
display: flex;
align-items: center;
gap: 12px;
}
.pms-modal-title { flex: 1; font-size: 1.1rem; font-weight: 700; }
.pms-modal-close {
background: none;
border: none;
cursor: pointer;
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 1.5rem;
color: var(--color-text-muted);
}
.pms-modal-close:hover { background: var(--color-surface-alt); color: var(--color-text); }
.pms-modal-search {
padding: 12px 20px;
border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.pms-modal-search input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--color-border-strong, #d1d5db);
border-radius: 8px;
font-size: 0.95rem;
}
.pms-modal-body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.pms-modal-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 12px;
}
/* Text / message input */
.config-text-input {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.95rem;
color: var(--color-text);
background: #fff;
transition: var(--transition);
}
.config-text-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.config-text-help {
margin-top: 6px;
font-size: 0.78rem;
color: var(--color-text-muted);
}
/* Font sample picker */
.font-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 10px;
}
.font-card {
padding: 18px 14px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
cursor: pointer;
text-align: center;
transition: var(--transition);
font-family: inherit;
}
.font-card:hover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.font-card.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.font-card .font-sample {
font-size: 1.4rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: 4px;
}
.font-card .font-name {
font-size: 0.74rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Multi-select add-ons (checkbox cards) */
.addon-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.addon-card {
display: flex;
gap: 10px;
align-items: flex-start;
padding: 12px 14px;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
text-align: left;
}
.addon-card:hover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.addon-card.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.addon-card .addon-check {
width: 18px; height: 18px;
flex-shrink: 0;
margin-top: 2px;
border-radius: 4px;
border: 1.5px solid var(--color-border-strong);
background: #fff;
display: grid;
place-items: center;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
}
.addon-card.is-selected .addon-check {
background: var(--color-accent);
border-color: var(--color-accent);
}
.addon-card.is-selected .addon-check::after { content: '\2713'; }
.addon-card .addon-info {
flex: 1;
min-width: 0;
}
.addon-card .addon-title {
font-weight: 700;
font-size: 0.88rem;
color: var(--color-text);
display: flex;
justify-content: space-between;
gap: 8px;
}
.addon-card .addon-meta {
font-size: 0.76rem;
color: var(--color-text-muted);
margin-top: 2px;
}
/* Yes/No toggle group */
.toggle-group {
display: inline-flex;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.toggle-btn {
padding: 10px 22px;
background: #fff;
border: none;
font-family: inherit;
font-size: 0.88rem;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
transition: var(--transition);
}
.toggle-btn + .toggle-btn { border-left: 1.5px solid var(--color-border); }
.toggle-btn.is-selected {
background: var(--color-primary-dark);
color: #fff;
}
/* Quantity tier picker */
.qty-tier-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 8px;
margin-bottom: 16px;
}
.qty-tier {
padding: 12px 8px;
text-align: center;
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
cursor: pointer;
transition: var(--transition);
font-family: inherit;
}
.qty-tier:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.qty-tier.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.qty-tier .qty-num { font-weight: 800; font-size: 1.05rem; color: var(--color-text); }
.qty-tier .qty-price {
font-size: 0.76rem;
color: var(--color-text-muted);
margin-top: 2px;
}
.qty-tier.is-selected .qty-price { color: var(--color-accent-dark); font-weight: 600; }
.qty-custom-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.qty-custom-row label {
font-size: 0.88rem;
color: var(--color-text-muted);
font-weight: 600;
}
.qty-custom-row input {
width: 110px;
padding: 10px 12px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 0.95rem;
text-align: center;
}
.qty-custom-row input:focus {
outline: none;
border-color: var(--color-accent);
}
/* File upload field */
.file-upload {
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-md);
padding: 24px 18px;
text-align: center;
cursor: pointer;
transition: var(--transition);
background: var(--color-bg-alt);
}
.file-upload:hover {
border-color: var(--color-accent);
background: var(--color-accent-soft);
}
.file-upload .file-icon {
width: 36px; height: 36px;
margin: 0 auto 8px;
color: var(--color-text-muted);
}
.file-upload .file-text {
font-weight: 600;
font-size: 0.92rem;
color: var(--color-text);
}
.file-upload .file-help {
font-size: 0.78rem;
color: var(--color-text-muted);
margin-top: 4px;
}
.file-upload input[type="file"] { display: none; }
.file-upload.has-file {
border-color: var(--color-success);
background: rgba(5, 150, 105, 0.05);
}
.file-upload.has-file .file-icon { color: var(--color-success); }
/* Sidebar summary */
.config-summary {
background: var(--color-bg-alt);
border-left: 1px solid var(--color-border);
padding: 24px 22px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
@media (max-width: 800px) {
.config-summary {
border-left: none;
border-top: 1px solid var(--color-border);
}
}
.config-summary h4 {
margin: 0 0 14px;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
font-weight: 700;
}
.summary-list {
list-style: none;
padding: 0;
margin: 0 0 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.summary-list li {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 0.86rem;
color: var(--color-text);
padding-bottom: 8px;
border-bottom: 1px dashed var(--color-border);
}
.summary-list li .sum-key {
color: var(--color-text-muted);
font-weight: 500;
}
.summary-list li .sum-val {
font-weight: 600;
text-align: right;
max-width: 60%;
word-break: break-word;
}
.summary-list li.empty .sum-val {
color: var(--color-text-light);
font-style: italic;
font-weight: 500;
}
/* Multi-line summary value used by holder/reel rows: each selected parent
holder/reel gets a small group with the parent name on top and one
sub-line per (size × qty) underneath. */
.summary-list li .sum-val .sum-acc-group {
display: block;
margin-bottom: 6px;
}
.summary-list li .sum-val .sum-acc-group:last-child {
margin-bottom: 0;
}
.summary-list li .sum-val .sum-acc-name {
font-weight: 700;
color: var(--color-text);
}
.summary-list li .sum-val .sum-sub {
font-weight: 500;
font-size: 0.85em;
color: var(--color-text-muted);
margin-top: 1px;
}
/* `sum-row-wide` — used when the value is too rich for the default
two-column key/value layout (e.g. the wristband colour table with
band-colour / size / qty / text-colour columns). Use `display:block`
instead of flex-column so the key span and the .sum-val payload
always stack vertically with a clear gap, regardless of any other
`.summary-list li` rule downstream in the cascade.
IMPORTANT: A later block at ~L4665 uses `.config-allsteps .summary-list
li { display: grid; grid-template-columns: 110px 1fr; }`, which has
the SAME specificity as the bare `.summary-list li.sum-row-wide`
selector but wins by document order — that's why the label "颜色"
was being pinned to the 110 px left column while the table got
squeezed into the 1fr right column (same row). The fix is to MATCH
that scope (`.config-allsteps`) so our rule sits at higher
specificity (0,0,3,1) and `display: block` wins, putting the table
on the line BELOW the label as the user requested. The plain
`.summary-list li.sum-row-wide` rule remains as a fallback for any
future mount-point that isn't inside `.config-allsteps`. */
.summary-list li.sum-row-wide,
.config-allsteps .summary-list li.sum-row-wide {
display: block;
grid-template-columns: none;
padding-bottom: 10px;
}
.summary-list li.sum-row-wide .sum-key,
.config-allsteps .summary-list li.sum-row-wide .sum-key {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--color-text);
}
.summary-list li.sum-row-wide .sum-val,
.config-allsteps .summary-list li.sum-row-wide .sum-val {
display: block;
text-align: left;
max-width: 100%;
width: 100%;
font-weight: 500;
}
.sum-color-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-size: 0.78rem;
line-height: 1.25;
}
.sum-color-table th,
.sum-color-table td {
padding: 4px 5px;
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: middle;
color: var(--color-text);
font-weight: 500;
/* Don't let the panel's narrow width chop "Adult" into "Adu/lt"
vertically — keep tokens whole. Long colour names like
"Black | Gold" can still wrap (they're space-separated), but
atomic size labels stay on one line. */
word-break: keep-all;
overflow-wrap: anywhere;
}
.sum-color-table th {
font-weight: 600;
color: var(--color-text-muted);
background: rgba(0, 0, 0, 0.025);
white-space: nowrap;
font-size: 0.75rem;
}
/* Size column (2nd) — short tokens like "成人 / 青少年" should never
wrap, so keep them on one line. */
.sum-color-table th:nth-child(2),
.sum-color-table td:nth-child(2) {
white-space: nowrap;
}
/* Qty column (3rd) — right-aligned monospace digits keep totals
easy to scan vertically. */
.sum-color-table th:nth-child(3),
.sum-color-table td:nth-child(3) {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-weight: 600;
color: var(--color-text);
}
.sum-color-table tbody tr:last-child td {
border-bottom: none;
}
/* ------------------------------------------------------------------
Cart line — wristband colour / size / qty / text-colour table.
Used by both the slide-out cart drawer (cart.js → renderDrawer)
and the full cart page (products/cart.html → render). Mirrors the
summary panel's .sum-color-table so the buyer sees the same shape
across configurator → drawer → cart page → checkout review.
------------------------------------------------------------------ */
.cart-line-desc li.cart-line-desc-wide {
/* Promote a single bullet to full width so the inline table can
breathe — without this it stays inside the standard text bullet
and the table compresses to the bullet's content width. */
list-style: none;
margin-left: -1.1rem; /* compensate for the parent UL's default indent */
padding: 4px 0 6px;
}
.cart-color-label {
font-weight: 600;
font-size: 0.78rem;
margin: 0 0 4px;
color: var(--color-text);
}
.cart-color-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-size: 0.72rem;
line-height: 1.25;
margin: 0;
}
.cart-color-table th,
.cart-color-table td {
padding: 3px 5px;
border-bottom: 1px solid var(--color-border);
text-align: left;
vertical-align: middle;
color: var(--color-text);
font-weight: 500;
word-break: keep-all;
overflow-wrap: anywhere;
}
.cart-color-table th {
font-weight: 600;
color: var(--color-text-muted);
background: rgba(0, 0, 0, 0.025);
white-space: nowrap;
font-size: 0.68rem;
}
.cart-color-table th:nth-child(2),
.cart-color-table td:nth-child(2) { white-space: nowrap; }
.cart-color-table th:nth-child(3),
.cart-color-table td:nth-child(3) {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-weight: 600;
}
.cart-color-table tbody tr:last-child td { border-bottom: none; }
/* Editable variant — the qty column hosts a number input the buyer can
tweak inline. The input ALWAYS shows a visible chrome (border + light
fill) so it reads as "I am interactive" the moment the page loads,
not just on hover — buyers were assuming the cell was static text
and missing the feature entirely (user feedback). Focus deepens the
accent ring to match .cart-acc-input so the two inline editors on
the cart line stay in the same family. */
.cart-color-table--editable .cart-color-qty-cell {
padding: 2px 4px;
}
.cart-color-qty-input {
width: 72px;
padding: 4px 8px;
font: 700 0.82rem/1.2 Inter, sans-serif;
font-variant-numeric: tabular-nums;
text-align: right;
color: var(--color-text);
background: #fff;
border: 1.5px solid #94a3b8; /* slate-400 — clearly a field */
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.04);
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
-moz-appearance: textfield;
cursor: text;
}
.cart-color-qty-input::-webkit-outer-spin-button,
.cart-color-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.cart-color-qty-input:hover {
border-color: var(--color-accent, #ea580c);
background: #fff7ed; /* amber-50 hover tint */
}
.cart-color-qty-input:focus {
outline: none;
background: #fff;
border-color: var(--color-accent, #ea580c);
box-shadow: 0 0 0 3px var(--color-accent-soft, rgba(243, 123, 30, 0.22));
}
/* ------------------------------------------------------------------
Step 13 — six delivery-date slots (business-day cadence, admin-
configurable lead-time + optional holiday overrides).
------------------------------------------------------------------ */
.delivery-slots {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}
@media (max-width: 980px) {
.delivery-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.delivery-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.delivery-slot {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 14px 10px;
background: #fff;
border: 1.5px solid var(--color-border, #e3e6eb);
border-radius: 12px;
cursor: pointer;
text-align: center;
font-family: inherit;
font-size: 14px;
color: var(--color-text);
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.delivery-slot:hover {
border-color: var(--color-primary, #2b6cb0);
box-shadow: 0 4px 12px rgba(43, 108, 176, 0.10);
transform: translateY(-1px);
}
.delivery-slot .slot-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.4px;
font-weight: 600;
color: var(--color-text-light);
}
.delivery-slot .slot-date {
font-size: 15px;
font-weight: 700;
color: var(--color-text);
line-height: 1.25;
}
.delivery-slot[data-soonest="1"] .slot-label {
color: #1b5e20;
}
.delivery-slot.is-selected {
border-color: var(--color-primary, #2b6cb0);
background: linear-gradient(135deg, #ebf4ff 0%, #d6e7ff 100%);
box-shadow: 0 6px 18px rgba(43, 108, 176, 0.18);
}
.delivery-slot.is-selected .slot-date,
.delivery-slot.is-selected .slot-label {
color: var(--color-primary, #1e4a80);
}
.delivery-slot.is-selected::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-primary, #2b6cb0) url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
/* Per-slot price-delta pill: shown only when the merchant has configured a
rule for that delivery slot (e.g. "+€2.50" rush fee on slot 1 or
"−€1.00" patience discount on slot 6). Sits centred under the date so
it doesn't fight the top-right "selected" checkmark for space. */
.delivery-slot .slot-delta {
display: inline-block;
margin-top: 4px;
padding: 1px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
background: #f1f4fa;
color: var(--color-text-light, #5b6373);
}
.delivery-slot .slot-delta--up {
background: #fff3e0;
color: #b34d00;
}
.delivery-slot .slot-delta--down {
background: #e6f5ea;
color: #1b5e20;
}
/* Stronger green for the "no rush fee" standard-delivery slot —
makes it visually pop the way tablecoversnow's "FREE" badge does. */
.delivery-slot .slot-delta--free {
background: #1b5e20;
color: #fff;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.delivery-slot.is-selected .slot-delta { background: rgba(255,255,255,0.65); }
.delivery-slot.is-selected .slot-delta--up { color: #b34d00; }
.delivery-slot.is-selected .slot-delta--down { color: #1b5e20; }
.delivery-slot.is-selected .slot-delta--free {
background: #1b5e20;
color: #fff;
}
.summary-total {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--color-border-strong);
}
.summary-total .label {
font-size: 0.78rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
.summary-total .price {
font-size: 1.6rem;
font-weight: 800;
color: var(--color-text);
margin: 4px 0 0;
letter-spacing: -0.01em;
}
.summary-total .price-each {
font-size: 0.8rem;
color: var(--color-text-muted);
font-weight: 500;
margin-top: 2px;
}
/* One-time setup / plate fee row — sits below the per-each line and is
shown only when any matched delta carries a `setup` amount. */
.summary-total .price-setup {
font-size: 0.8rem;
color: var(--color-accent, #b45309);
font-weight: 600;
margin-top: 2px;
}
.summary-total .price-setup[hidden] { display: none; }
/* Modal footer (prev / next / quote) */
.modal-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid var(--color-border);
background: #fff;
}
.modal-footer .step-counter {
font-size: 0.85rem;
color: var(--color-text-muted);
font-weight: 600;
}
.modal-footer .footer-actions {
display: flex;
gap: 8px;
}
.btn-step-prev,
.btn-step-next {
padding: 10px 18px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.9rem;
border: none;
cursor: pointer;
font-family: inherit;
transition: var(--transition);
}
.btn-step-prev {
background: transparent;
color: var(--color-text-muted);
}
.btn-step-prev:hover { background: var(--color-bg-alt); color: var(--color-text); }
.btn-step-prev:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.btn-step-next {
background: var(--color-accent);
color: #fff;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-step-next:hover {
background: var(--color-accent-dark);
transform: translateY(-1px);
}
.btn-step-next svg { width: 14px; height: 14px; }
/* lock body scroll when modal open */
body.modal-open { overflow: hidden; }
/* ===========================================================================
22. Product detail page (hero, tabs, pricing chart, inline configurator)
=========================================================================== */
/* Breadcrumb on detail page */
.pd-breadcrumb {
padding: 18px 0 8px;
margin: 0;
}
/* Hero section */
.pd-hero {
background: linear-gradient(135deg, #fafaf7 0%, #f5f3ee 100%);
padding: 28px 0 56px;
border-bottom: 1px solid var(--color-border);
}
.pd-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
@media (max-width: 880px) {
.pd-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
.pd-image-wrap {
position: relative;
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.10);
border: 1px solid var(--color-border);
aspect-ratio: 1 / 1;
max-width: 540px;
margin: 0 auto;
width: 100%;
padding: 32px;
display: grid;
place-items: center;
}
.pd-image-wrap::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(234, 88, 12, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.pd-image {
width: 100%;
height: 100%;
max-width: 360px;
max-height: 360px;
object-fit: contain;
position: relative;
z-index: 1;
}
/* Hero carousel controls (e.g. Metallic Woven Gold/Silver colourways). */
.pd-carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
color: #111827;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: background .15s, transform .15s;
}
.pd-carousel-btn:hover { background: #fff; }
.pd-carousel-btn--prev { left: 12px; }
.pd-carousel-btn--next { right: 12px; }
.pd-carousel-dots {
position: absolute;
bottom: 14px;
left: 0; right: 0;
display: flex;
gap: 8px;
justify-content: center;
z-index: 3;
}
.pd-carousel-dot {
width: 9px;
height: 9px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(17, 24, 39, 0.28);
cursor: pointer;
transition: background .15s, transform .15s;
}
.pd-carousel-dot.is-active { background: var(--color-accent, #2563eb); transform: scale(1.2); }
.pd-info { min-width: 0; }
.pd-eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
color: var(--color-accent-dark);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 12px;
}
.pd-info h1 {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
margin: 0 0 14px;
line-height: 1.15;
font-weight: 800;
color: var(--color-text);
}
.pd-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-bottom: 16px;
font-size: 0.88rem;
}
.pd-rating {
color: var(--color-accent);
letter-spacing: 1px;
font-weight: 600;
}
.pd-rating span {
color: var(--color-text-muted);
margin-left: 6px;
font-weight: 500;
letter-spacing: 0;
}
.pd-meta {
background: #fff;
border: 1px solid var(--color-border);
padding: 4px 10px;
border-radius: 999px;
color: var(--color-text-muted);
font-weight: 600;
font-size: 0.78rem;
}
.pd-lead {
color: var(--color-text-muted);
margin: 0 0 22px;
line-height: 1.6;
font-size: 1rem;
}
.pd-price-block {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.pd-price-label {
font-size: 0.85rem;
color: var(--color-text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pd-price {
font-size: 2rem;
font-weight: 800;
color: var(--color-text);
letter-spacing: -0.02em;
}
.pd-price-each {
font-size: 0.85rem;
color: var(--color-text-muted);
font-weight: 500;
}
.pd-cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 26px;
}
.pd-trust-row {
display: flex;
flex-wrap: wrap;
gap: 18px;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.pd-trust-row > span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pd-trust-row svg { color: var(--color-success); flex-shrink: 0; }
/* Sticky tabs */
.pd-tabs-wrap {
position: sticky;
top: var(--header-height);
z-index: 30;
background: #fff;
border-bottom: 1px solid var(--color-border);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.pd-tabs {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: thin;
}
.pd-tabs::-webkit-scrollbar { height: 0; }
.pd-tabs a {
padding: 16px 18px;
font-size: 0.92rem;
font-weight: 600;
color: var(--color-text-muted);
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: var(--transition);
}
.pd-tabs a:hover { color: var(--color-text); }
.pd-tabs a.is-active {
color: var(--color-accent-dark);
border-bottom-color: var(--color-accent);
}
/* Inline configurator (no modal wrapper) */
.config-inline {
background: #fff;
border: 1px solid var(--color-border);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
display: grid;
grid-template-rows: auto auto 1fr auto;
}
.config-inline-header {
padding: 24px 28px 6px;
}
.config-inline-header h2 {
font-size: 1.5rem;
margin: 0 0 6px;
}
.config-inline-header p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.config-inline .config-stepnav {
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
margin-top: 18px;
}
.config-inline .modal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
min-height: 460px;
}
@media (max-width: 880px) {
.config-inline .modal-body { grid-template-columns: 1fr; }
}
.config-inline .config-summary {
background: var(--color-bg-alt);
border-left: 1px solid var(--color-border);
position: sticky;
top: calc(var(--header-height) + 56px);
align-self: start;
max-height: calc(100vh - var(--header-height) - 80px);
}
@media (max-width: 880px) {
.config-inline .config-summary { position: static; max-height: none; }
}
.config-inline .modal-footer {
border-top: 1px solid var(--color-border);
background: #fff;
}
/* Pricing table */
.pd-price-chart-size {
font: 500 16px/1.2 Inter, sans-serif;
color: var(--color-text-muted);
margin-left: 6px;
letter-spacing: 0;
}
.pd-pricing-table-wrap {
background: #fff;
border: 1px solid var(--color-border);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.pd-pricing-table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.pd-pricing-table thead th {
background: var(--color-bg-alt);
text-align: left;
padding: 14px 18px;
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
border-bottom: 1px solid var(--color-border);
}
.pd-pricing-table tbody td {
padding: 14px 18px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
}
.pd-pricing-table tbody tr:last-child td { border-bottom: none; }
.pd-pricing-table tbody tr:hover { background: var(--color-bg-warm); }
.pd-pricing-table tbody td:first-child {
font-weight: 700;
}
.pd-pricing-table tbody td:nth-child(2) {
color: var(--color-accent-dark);
font-weight: 700;
}
.pd-pricing-table tbody td:last-child {
color: var(--color-success);
font-weight: 600;
}
/* Toast utility */
.pe-toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%, 16px);
background: var(--color-text);
color: #fff;
padding: 12px 20px;
border-radius: 999px;
box-shadow: 0 12px 32px rgba(0,0,0,0.25);
font-size: 0.9rem;
font-weight: 600;
opacity: 0;
pointer-events: none;
transition: all 0.25s ease;
z-index: 300;
max-width: 90%;
text-align: center;
}
.pe-toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Section spacing on detail page (tighter) */
.section[data-pd-section] {
padding: 56px 0;
scroll-margin-top: calc(var(--header-height) + 64px);
}
/* Beautification: refined card hover, smoother category cards */
.product-card {
border-radius: 14px;
}
.product-card .card-body {
padding: 18px 18px 16px;
}
.product-card h3 {
font-size: 1.02rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.product-card .price-current {
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.product-card .badge-sale {
background: var(--color-text);
color: #fff;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.category-card {
border-radius: 18px;
}
.category-card:hover { border-color: var(--color-accent); }
/* Refined faq question styling */
.faq-question { font-size: 0.95rem; }
.faq-item { border-radius: 12px; }
.faq-item.open { border-color: var(--color-accent); }
/* Refined buttons */
.btn { border-radius: 10px; }
.btn-primary { box-shadow: 0 4px 12px rgba(234, 88, 12, 0.18); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(234, 88, 12, 0.28); }
/* ==========================================================================
Multi-step ALL-VISIBLE configurator (replaces wizard nav)
Each Step block stacks vertically; right column = sticky live summary.
========================================================================== */
.config-allsteps {
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 24px;
align-items: start;
}
/* Configurator container — main column ≈ 2/3 of viewport on typical screens.
Widened to 1600px so step bodies (especially wristband Step 3's colour
cards) have room to show full-size product photos without cropping. */
[data-pd-section="configurator"] > .container {
max-width: 1600px;
padding: 0 16px;
}
@media (max-width: 980px) {
.config-allsteps { grid-template-columns: 1fr; }
}
.config-allsteps .config-summary {
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: 22px 22px 18px;
position: sticky;
top: calc(var(--header-height) + 72px);
align-self: start;
max-height: calc(100vh - var(--header-height) - 96px);
/* Flex column so the summary list takes the flexible middle space
(scrolls internally when long), and the total + CTA stay pinned at
the bottom of the panel — always visible without inner scrolling.
Removed the panel-level overflow:auto so the CTA never gets pushed
below the viewport. */
display: flex;
flex-direction: column;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.config-allsteps .config-summary > h4 { flex: 0 0 auto; }
.config-allsteps .config-summary .summary-list {
flex: 1 1 auto;
overflow-y: auto;
min-height: 80px;
/* Subtle scroll-track so customers know there's more below */
scrollbar-width: thin;
scrollbar-gutter: stable;
}
.config-allsteps .config-summary .summary-list::-webkit-scrollbar { width: 6px; }
.config-allsteps .config-summary .summary-list::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}
.config-allsteps .config-summary .summary-total,
.config-allsteps .config-summary .summary-cta {
flex: 0 0 auto;
}
.config-allsteps .config-summary .summary-cta .btn {
width: 100%;
font-size: 1.02rem;
padding-block: 14px;
}
@media (max-width: 980px) {
.config-allsteps .config-summary { position: static; max-height: none; display: block; }
.config-allsteps .config-summary .summary-list { max-height: none; overflow-y: visible; }
}
.step-block {
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 16px;
padding: 24px 26px 26px;
margin-bottom: 18px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
scroll-margin-top: calc(var(--header-height) + 80px);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.step-block:hover { border-color: var(--color-border-strong); }
.step-block.is-touched { border-color: var(--color-accent); box-shadow: 0 8px 22px rgba(234, 88, 12, 0.10); }
/* Red glow + soft shake when the customer tries to add to cart without
making a required selection (e.g. lanyard attachment in STEP 5). Cleared
the moment they click any card in the step. */
.step-block.step-block--invalid {
border-color: #dc2626 !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
animation: stepShake 0.4s ease;
}
@keyframes stepShake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }
}
/* Red inline-error bubble injected into the offending step-block when the
customer clicks Add-to-Cart with a required field still empty. Replaces
the old native alert() popup — non-blocking, in-flow, and scoped to the
field the customer actually needs to fix. Auto-dismisses when they
interact with the step. */
.inline-error {
margin: 0 0 12px;
padding: 10px 14px 10px 38px;
position: relative;
background: #fef2f2;
border: 1px solid #f5c6c6;
border-left: 4px solid #dc2626;
color: #b91c1c;
font-size: 13px;
font-weight: 600;
line-height: 1.5;
border-radius: 6px;
animation: inlineErrorIn 0.22s ease;
}
.inline-error::before {
content: "!";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background: #dc2626;
color: #fff;
border-radius: 50%;
font-weight: 800;
font-size: 12px;
}
@keyframes inlineErrorIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.step-block-head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}
.step-num-big {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--color-accent);
color: #fff;
display: grid;
place-items: center;
font-weight: 800;
font-size: 0.95rem;
letter-spacing: 0.02em;
box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25);
}
.step-block.is-touched .step-num-big { background: var(--color-success); box-shadow: 0 4px 10px rgba(22, 163, 74, 0.25); }
.step-num-big::before {
content: 'STEP ';
font-size: 0.5rem;
letter-spacing: 0.1em;
display: block;
line-height: 1;
opacity: 0.85;
margin-bottom: 1px;
}
.step-block-title { flex: 1 1 auto; min-width: 0; }
.step-block-title h3 {
margin: 0 0 4px;
font-size: 1.18rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-text);
}
.step-block-title .step-help {
margin: 0;
font-size: 0.9rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.step-block-optional {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: var(--color-bg-alt);
color: var(--color-text-muted);
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
}
.step-block-body { margin-top: 6px; }
/* Tile grid (used for Step 1: pick a style) — flex so leftover cards on
the last row stay horizontally centred. The minimum card width was
bumped from 140px to 210px so the product photo inside each tile is
visibly larger and easier to identify (lanyard/wristband styles all
look quite similar at thumbnail size). */
.tile-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
max-width: 1200px;
margin: 0 auto;
}
.tile-grid > .tile-card { flex: 0 0 210px; }
@media (max-width: 600px) {
.tile-grid > .tile-card { flex: 0 0 160px; }
}
.tile-card {
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 12px;
padding: 12px 10px 10px;
cursor: pointer;
text-align: center;
transition: var(--transition);
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
font-family: inherit;
}
.tile-card:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.tile-card.is-selected {
border-color: var(--color-accent);
background: var(--color-accent-soft);
box-shadow: 0 6px 16px rgba(234, 88, 12, 0.12);
}
.tile-card.is-selected::after {
content: '';
position: absolute;
top: 8px;
right: 8px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-accent) url("data:image/svg+xml;utf8,") no-repeat center / 12px 12px;
}
.tile-card .tile-img {
width: 100%;
aspect-ratio: 1.2 / 1;
/* Always paint a clean white panel behind the product photo. The tubular
lanyard hero is a transparent PNG (unlike the other styles' JPGs);
if we kept the warm tint here, that single tile looked beige while
the rest looked white. */
background: #fff;
border-radius: 8px;
overflow: hidden;
display: grid;
place-items: center;
}
.tile-card .tile-img img { width: 92%; height: 92%; object-fit: contain; }
.tile-card .tile-name { font-weight: 700; font-size: 0.92rem; color: var(--color-text); line-height: 1.3; }
.tile-card .tile-meta { font-size: 0.78rem; color: var(--color-text-muted); }
/* Sub-row group (e.g. Step 2 has Type + Width + Length subgroups) */
.subrow { margin-top: 16px; }
.subrow:first-child { margin-top: 0; }
.subrow-label {
display: block;
font-weight: 700;
font-size: 0.85rem;
color: var(--color-text);
margin-bottom: 8px;
}
.subrow-help {
font-size: 0.78rem;
color: var(--color-text-muted);
margin: 0 0 8px;
}
/* Compact pill row (used for size/length) */
.pill-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pill-btn {
background: #fff;
border: 1.5px solid var(--color-border);
border-radius: 999px;
padding: 8px 16px;
font-weight: 600;
font-size: 0.86rem;
color: var(--color-text);
cursor: pointer;
transition: var(--transition);
font-family: inherit;
}
.pill-btn:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.pill-btn.is-selected {
background: var(--color-accent);
border-color: var(--color-accent);
color: #fff;
}
/* ==========================================================================
STEP 9 — "Different designs per card" variable-data table
------------------------------------------------------------
Layout mirrors the tablecoversnow ID-card configurator: a centred
pill toggle ("Enter Data" / "Upload File"), then either an editable
per-card spreadsheet OR a drag-and-drop upload zone. The spreadsheet
has a sticky header where the merchant types FIELD NAMES (Name, Title,
ID#…) and a body whose row-count is locked to the live order qty.
========================================================================== */
.subrow--center { display: flex; justify-content: center; }
.subrow--center .pill-row { justify-content: center; }
/* Restore the browser default for `hidden` on flex/grid subrows —
class selectors win the cascade against the UA `[hidden] { display:none }`
rule unless we re-state it here, which is why the Step 9 "Enter Data /
Upload File" toggle kept showing through even when designSplit was set
to "Same Design on All Cards". */
.subrow--center[hidden] { display: none !important; }
/* Stacked variant of .subrow used by the Different-design note textarea:
label sits on its own line, textarea stretches full-width below.
The default .subrow is block-flow with inline label + control, which
would crush a multi-line textarea down to one line. */
.subrow--col { display: block; }
.subrow--col[hidden] { display: none !important; }
.subrow--col .subrow-label {
display: block;
margin-bottom: 6px;
font-weight: 700;
}
.cd-diff-note-input {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #d1d5db;
border-radius: 8px;
font: 500 13.5px/1.5 Inter, sans-serif;
color: #374151;
background: #fafafa;
resize: vertical;
min-height: 76px;
}
.cd-diff-note-input:focus {
outline: none;
border-color: #2563eb;
background: #fff;
}
.cd-data-table-wrap { margin-top: 16px; }
.cd-data-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 6px;
}
.cd-add-field-btn {
background: transparent;
border: none;
color: var(--color-accent);
font-weight: 700;
font-size: 0.86rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 2px;
font-family: inherit;
}
.cd-add-field-btn:hover { color: var(--color-accent-dark); text-decoration: underline; }
.cd-add-field-plus {
display: inline-block;
width: 16px;
height: 16px;
line-height: 14px;
text-align: center;
font-size: 1.1rem;
font-weight: 700;
}
.cd-data-table-scroll {
border: 1px solid var(--color-border);
border-radius: 10px;
max-height: 380px;
overflow: auto;
background: #fff;
}
.cd-data-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.86rem;
}
.cd-data-table thead th {
position: sticky;
top: 0;
z-index: 2;
background: #f6f8fa;
border-bottom: 1px solid var(--color-border);
padding: 8px 8px;
font-weight: 700;
color: var(--color-text);
text-align: left;
vertical-align: middle;
}
.cd-data-table th.cd-card-num-col {
width: 80px;
min-width: 80px;
text-align: center;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-text-muted);
background: #f0f3f6;
}
.cd-data-table .cd-field-cell {
position: relative;
padding: 4px 6px;
min-width: 160px;
}
.cd-data-table .cd-field-name {
width: 100%;
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 6px 10px;
font: 600 0.86rem/1.2 inherit;
color: var(--color-text);
background: #fff;
box-sizing: border-box;
}
.cd-data-table .cd-field-name::placeholder {
font-weight: 400;
color: #b5bcc4;
font-style: italic;
}
.cd-data-table .cd-field-name:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 161, 178, 0.18);
}
.cd-field-remove {
position: absolute;
top: 0;
right: 4px;
border: none;
background: transparent;
color: #b5bcc4;
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
padding: 2px 4px;
border-radius: 3px;
opacity: 0;
transition: opacity 0.12s, color 0.12s, background 0.12s;
font-family: inherit;
}
.cd-data-table .cd-field-cell:hover .cd-field-remove { opacity: 1; }
.cd-field-remove:hover { color: #d9534f; background: #fff0f0; }
.cd-data-table tbody tr td {
padding: 4px 6px;
border-bottom: 1px solid #eef1f4;
background: #fff;
}
.cd-data-table tbody tr:last-child td { border-bottom: none; }
.cd-data-table tbody tr td.cd-card-num-cell {
text-align: center;
font-weight: 600;
color: var(--color-text-muted);
background: #fafbfc;
width: 80px;
min-width: 80px;
}
.cd-data-table .cd-value-input {
width: 100%;
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 6px 10px;
font: 400 0.85rem/1.2 inherit;
color: var(--color-text);
background: #fff;
box-sizing: border-box;
}
.cd-data-table .cd-value-input::placeholder { color: #c2c8cf; }
.cd-data-table .cd-value-input:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 2px rgba(0, 161, 178, 0.18);
}
.cd-table-empty {
padding: 18px;
text-align: center;
color: var(--color-text-muted);
font-size: 0.85rem;
}
.cd-row-cap-notice {
margin-top: 8px;
padding: 8px 12px;
border-radius: 8px;
background: #fff8e6;
border: 1px solid #ffe5a8;
color: #8a6d1a;
font-size: 0.82rem;
}
/* --- Upload zone --------------------------------------------------------- */
.cd-upload-wrap { margin-top: 16px; }
.cd-upload-zone {
display: block;
border: 2px dashed var(--color-border);
border-radius: 12px;
padding: 28px 20px;
text-align: center;
cursor: pointer;
background: #fafbfc;
transition: background 0.15s, border-color 0.15s;
}
.cd-upload-zone:hover,
.cd-upload-zone.is-dragover {
border-color: var(--color-accent);
background: #f0fafc;
}
.cd-upload-input { display: none; }
.cd-upload-zone-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.cd-upload-icon {
font-size: 1.6rem;
width: 44px;
height: 44px;
line-height: 44px;
border-radius: 50%;
background: var(--color-accent);
color: #fff;
font-weight: 700;
}
.cd-upload-text strong {
display: block;
font-size: 0.95rem;
color: var(--color-text);
margin-bottom: 2px;
}
.cd-upload-text small {
color: var(--color-text-muted);
font-size: 0.78rem;
}
.cd-upload-list {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.cd-upload-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
background: #f6f8fa;
border: 1px solid var(--color-border);
font-size: 0.85rem;
}
.cd-upload-item-name { flex: 1; color: var(--color-text); word-break: break-all; }
.cd-upload-item-size { color: var(--color-text-muted); font-size: 0.78rem; }
.cd-upload-item-remove {
border: none;
background: transparent;
color: #b5bcc4;
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
padding: 0 4px;
}
.cd-upload-item-remove:hover { color: #d9534f; }
@media (max-width: 700px) {
.cd-data-table .cd-field-cell { min-width: 140px; }
.cd-data-table { font-size: 0.82rem; }
}
/* Tabbed swatch list (Popular / All / PMS) */
.swatch-tabs {
display: flex;
gap: 4px;
border-bottom: 1.5px solid var(--color-border);
margin-bottom: 12px;
}
.swatch-tab {
background: transparent;
border: none;
padding: 8px 14px;
font-size: 0.82rem;
font-weight: 600;
color: var(--color-text-muted);
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1.5px;
transition: var(--transition);
font-family: inherit;
}
.swatch-tab:hover { color: var(--color-text); }
.swatch-tab.is-active { color: var(--color-accent-dark); border-bottom-color: var(--color-accent); }
.swatch-pane { display: none; }
.swatch-pane.is-active { display: block; }
/* Side block (Front Side / Back Side groups inside Step 4) — flat layout */
.side-block {
margin-top: 4px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
}
.side-block + .side-block {
margin-top: 18px;
padding-top: 18px;
border-top: 1px dashed var(--color-border);
}
.side-block-title {
display: none; /* hidden by default — flat look like reference */
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 10px;
color: var(--color-text);
}
/* When both sides are shown (back-side not hidden), reveal the titles
so users can tell Front vs Back apart. */
.swatch-pane:has([data-side-back]:not([hidden])) .side-block-title {
display: block;
}
.side-block-title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 10px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--color-border, #e5e7eb);
color: var(--color-accent-dark);
}
/* Final big CTA at end of all steps */
.config-final-cta {
margin-top: 16px;
padding: 22px 26px;
background: linear-gradient(135deg, var(--color-accent-soft), #fff);
border: 1.5px solid var(--color-accent);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.config-final-cta h4 {
margin: 0 0 4px;
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
}
.config-final-cta p {
margin: 0;
font-size: 0.88rem;
color: var(--color-text-muted);
}
.config-final-cta .btn { white-space: nowrap; }
.config-cta-actions {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.config-cta-actions .btn { min-width: 160px; }
/* Checkout form layout */
.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.form-row label { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; }
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 14px;
margin-bottom: 8px;
}
.form-row-wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.checkout-submit { display: block; width: 100%; margin-top: 16px; padding: 14px; }
.stripe-mount { padding: 12px 0 4px; }
.btn-ghost {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Sticky right summary - more compact */
.config-allsteps .summary-list { padding: 0; list-style: none; margin: 0 0 12px; }
.config-allsteps .summary-list li {
padding: 8px 0;
border-bottom: 1px dashed var(--color-border);
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px;
font-size: 0.86rem;
}
.config-allsteps .summary-list li:last-child { border-bottom: none; }
.config-allsteps .summary-list li .sum-key { color: var(--color-text-muted); font-weight: 500; }
.config-allsteps .summary-list li .sum-val { color: var(--color-text); font-weight: 600; }
.config-allsteps .summary-list li.empty .sum-val { color: var(--color-border-strong); font-weight: 400; font-style: italic; }
.config-allsteps .summary-total { padding-top: 8px; border-top: 1.5px solid var(--color-border); }
.config-allsteps .summary-total .label {
font-size: 0.78rem;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.config-allsteps .summary-total .price {
font-size: 1.7rem;
font-weight: 800;
color: var(--color-text);
letter-spacing: -0.02em;
margin: 4px 0 2px;
}
.config-allsteps .summary-total .price-each {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.config-allsteps .summary-cta {
margin-top: 14px;
display: grid;
gap: 8px;
}
/* File upload for artwork */
.upload-zone {
display: block;
background: var(--color-bg-alt);
border: 2px dashed var(--color-border-strong);
border-radius: 12px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: var(--transition);
}
.upload-zone:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.upload-zone.has-file { border-color: var(--color-success); background: rgba(22, 163, 74, 0.06); border-style: solid; }
.upload-zone input[type="file"] { display: none; }
.upload-zone .upload-main { font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.upload-zone .upload-help { font-size: 0.76rem; color: var(--color-text-muted); }
/* ============================================================
ID-card Step 7 (Customize Card) — pill-tab layout matching the
tablecoversnow.com reference. Two tabs sit on a flat (non-panel)
background and animate to a filled teal pill when active. Below
the tabs the panes use a stacked label + control layout (vs the
default subrow horizontal layout) so the Browse / radios / msg
card line up edge-to-edge with the textarea in the shared foot.
============================================================ */
.cc-tabs {
display: flex;
justify-content: center;
gap: 16px;
background: transparent;
border: 0;
padding: 4px 0 18px;
margin: 0 0 18px;
border-bottom: 1px solid var(--color-border, #e2e8f0);
flex-wrap: wrap;
}
.cc-tab {
appearance: none;
font: inherit;
cursor: pointer;
padding: 10px 26px;
min-width: 180px;
border-radius: 999px;
border: 1.5px solid var(--color-accent, #38b6c8);
background: #fff;
color: var(--color-accent, #38b6c8);
font-weight: 600;
font-size: 0.95rem;
transition: var(--transition, all .2s ease);
}
.cc-tab:hover { background: rgba(56, 182, 200, 0.08); }
.cc-tab.is-active {
background: var(--color-accent, #38b6c8);
color: #fff;
box-shadow: 0 4px 12px rgba(56, 182, 200, 0.25);
}
.cc-pane { margin: 0; }
.cc-pane:not(.is-active) { display: none; }
.cc-field {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0 0 22px;
}
/* HTML's [hidden] sets display:none, but our .cc-field rule above
defines display:flex with equal specificity and is loaded later,
so it would otherwise win. Restore [hidden] semantics explicitly. */
.cc-field[hidden] { display: none; }
.msg-card[hidden] { display: none; }
.cc-label {
font-weight: 700;
font-size: 1rem;
color: var(--color-text, #0f172a);
line-height: 1.3;
}
.cc-label--caps {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-text, #0f172a);
text-transform: uppercase;
}
.cc-select.text-field,
.cc-textarea.text-field {
width: 100%;
padding: 12px 14px;
font-size: 0.95rem;
border: 1px solid var(--color-border, #e2e8f0);
border-radius: 8px;
background: #fff;
color: var(--color-text, #0f172a);
}
.cc-select.text-field {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.cc-textarea.text-field { min-height: 110px; resize: vertical; line-height: 1.5; }
/* "Browse Files To Upload | Browse" — flat text-field look with a
teal action label on the right. Whole row is the file