. Above the phone breakpoint it renders
as a normal table (no visual change). At or below --bp-phone each
row becomes a stacked card, the hides, and labels are
pulled from each
's data-label attribute.
Per-cell opt-outs (add as class on
):
.card-title - render as the card title (large, bold, full
width). If no cell has this class, the first
is auto-promoted to title.
.card-actions - bottom action row (right-aligned buttons).
.card-hide - hide this cell in card mode entirely.
The parent .table-wrap's horizontal scroll is disabled when it
contains a responsive-cards table so cards flow naturally without
a phantom scroll container.
============================================================= */
@media (max-width: 600px) {
.table-wrap:has(.data-table.responsive-cards) {
overflow-x: visible;
overflow-y: visible;
}
.table-wrap:has(.data-table.responsive-cards) + .table-scroll-arrow,
.data-table.responsive-cards ~ .table-scroll-arrow {
display: none !important;
}
.data-table.responsive-cards,
.data-table.responsive-cards tbody {
display: block;
width: 100%;
min-width: 0;
background: transparent;
box-shadow: none;
border: 0;
}
.data-table.responsive-cards thead { display: none; }
.data-table.responsive-cards tr {
display: block;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: 10px;
box-shadow: var(--shadow);
}
.data-table.responsive-cards td {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
padding: 5px 0;
border: 0;
font-size: 14px;
color: var(--color-text);
/* Override inline `white-space: nowrap` often set for
desktop single-line cells — on phone we want long values
(product names, addresses) to wrap instead of truncate. */
white-space: normal !important;
min-height: 0;
text-align: right;
}
/* The value side of each card row should wrap / break freely
rather than be truncated when long. */
.data-table.responsive-cards td:not(.card-title):not(.card-actions):not(.card-hide) {
word-break: break-word;
}
.data-table.responsive-cards td::before {
content: attr(data-label);
flex: 0 0 auto;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--color-muted);
}
.data-table.responsive-cards td:not([data-label])::before {
display: none;
}
/* Card title — either explicitly marked or auto-promoted from
the first cell. Renders full-width above a thin divider so
the row has a clear visual hierarchy on the card. */
.data-table.responsive-cards td.card-title,
.data-table.responsive-cards tr > td:first-child:not(.card-actions):not(.card-hide) {
display: block;
font-size: 16px;
font-weight: 600;
padding: 2px 0 10px;
margin-bottom: 8px;
border-bottom: 1px solid var(--color-border);
text-align: left;
white-space: normal !important;
}
.data-table.responsive-cards td.card-title::before,
.data-table.responsive-cards tr > td:first-child::before {
display: none;
}
/* Action row — right-aligned buttons, full-width divider above. */
.data-table.responsive-cards td.card-actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
padding: 10px 0 2px;
margin-top: 6px;
border-top: 1px solid var(--color-border);
}
.data-table.responsive-cards td.card-actions::before { display: none; }
/* Hide specific cells in card mode (e.g. noisy ids, redundant
columns that only matter in table context). */
.data-table.responsive-cards td.card-hide { display: none; }
/* Loading / empty rows span full width and stay centered. */
.data-table.responsive-cards td.loading-cell,
.data-table.responsive-cards td[colspan] {
display: block;
text-align: center;
padding: 20px 0;
color: var(--color-muted);
}
.data-table.responsive-cards td.loading-cell::before,
.data-table.responsive-cards td[colspan]::before { display: none; }
/* Clickable rows get a subtle tap affordance. */
.data-table.responsive-cards tr[data-id] { cursor: pointer; }
.data-table.responsive-cards tr[data-id]:active {
background: color-mix(in srgb, var(--color-primary), transparent 94%);
}
}
/* =============================================================
Modal-sheet — bottom sheet on phone (Phase 1A Day 3)
=============================================================
Opt-in modifier for an existing `.modal-box`. Above --bp-phone
the modal stays as a centered dialog (unchanged). At or below
the breakpoint it pins to the bottom of the screen, takes the
full width, rounds only the top corners, and shows a small
drag-handle indicator at top.
Usage: add `.modal-sheet` to the `.modal-box` element:
...
============================================================= */
@media (max-width: 600px) {
/* Dock the sheet to the bottom edge, respecting safe area. */
.modal:has(> .modal-sheet),
.modal:has(> * > .modal-sheet) {
align-items: flex-end;
}
.modal-box.modal-sheet {
width: 100%;
max-width: 100vw !important;
max-height: 92vh;
border-radius: 16px 16px 0 0;
padding: 24px 20px calc(20px + var(--safe-bottom));
margin: 0;
animation: modal-sheet-slide-up 220ms ease-out;
}
/* Drag-handle indicator so the sheet reads as dismissible. */
.modal-box.modal-sheet::before {
content: '';
display: block;
width: 40px;
height: 4px;
border-radius: 2px;
background: var(--color-border);
margin: -8px auto 16px;
}
/* Action rows in a sheet get a sticky footer so primary actions
stay reachable on short viewports with long scrollable content. */
.modal-box.modal-sheet .modal-actions,
.modal-box.modal-sheet .modal-btn-row--bottom {
position: sticky;
bottom: 0;
background: var(--color-card);
padding-top: 12px;
margin-top: 16px;
border-top: 1px solid var(--color-border);
}
}
@keyframes modal-sheet-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* =============================================================
Filters-drawer — collapsible filter row (Phase 1A Day 3)
=============================================================
Opt-in utility for pages with many filter inputs. Wrap the
existing `.header-filter-row` in a native element.
Above --bp-phone the hides and filters are always
visible (desktop behavior unchanged). At or below the breakpoint
the filters collapse behind a "Filters" summary button that
expands in place.
Usage:
Filters
...inputs...
Keep `open` on desktop so the user never has to click to reveal
filters there; the summary auto-hides above breakpoint.
============================================================= */
.filters-drawer > summary.filters-toggle {
display: none;
}
.filters-drawer > summary::-webkit-details-marker { display: none; }
.filters-drawer > summary::marker { content: ''; }
/* Above --bp-phone the filters row is always visible regardless of
the open state. Forcing display: flex here overrides the
UA stylesheet that would otherwise hide the row when
lacks the `open` attribute. This lets the markup omit `open` and
still render correctly on desktop.
IMPORTANT: this is desktop-only. On mobile (<=768px) we DO want
the native show/hide behavior so removing the `open`
attribute via JS actually collapses the drawer. Gating with
min-width: 769px below means: phone -> open attribute controls
visibility, desktop -> always visible regardless of attribute. */
@media (min-width: 769px) {
.filters-drawer > .header-filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
}
/* On mobile, a closed drawer has no open attribute - hide its
contents and let users tap the header-buttons "Filters" toggle
to expand. Open drawers show normally via the UA stylesheet. */
@media (max-width: 768px) {
.filters-drawer:not([open]) > .header-filter-row {
display: none;
}
.filters-drawer[open] > .header-filter-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
}
@media (max-width: 600px) {
/* Flatten .header-title-row and .filters-drawer into .page-header
via display:contents so the Filters toggle shares a row with
.header-buttons instead of dropping to its own line. The title
h1 claims row 1 via flex:1 1 100%; the action buttons + the
summary share row 2; the expanded .header-filter-row takes row
3 when the drawer is open. Gated by :has(.filters-drawer) so
pages without a drawer (e.g. Color Converter) keep their
existing layout. */
.page-header:has(.filters-drawer) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.page-header:has(.filters-drawer) > .header-title-row,
.page-header:has(.filters-drawer) > .filters-drawer {
display: contents;
}
.page-header:has(.filters-drawer) > .header-title-row > h1 {
flex: 1 1 100%;
}
.page-header:has(.filters-drawer) > .header-title-row > .header-buttons {
/* Override the mobile default width:100% so header-buttons
can share row 2 with the Filters summary instead of
claiming the whole line by itself. !important needed to
beat the earlier .header-buttons { width:100% } rule
inside the same breakpoint. */
width: auto !important;
flex: 0 1 auto !important;
min-width: 0;
justify-content: flex-end !important;
}
.page-header:has(.filters-drawer) > .filters-drawer > .header-filter-row {
flex: 1 1 100%;
}
/* Native filter toggle is replaced on mobile by the
JS-injected .btn-filters-toggle that lives in .header-buttons
(with the active-filter count badge). Hiding the summary here
prevents the duplicate "Filters [v]" caret button that was
rendering alongside the new toggle. */
.filters-drawer > summary.filters-toggle {
display: none;
}
/* Chevron that rotates when the drawer is open. */
.filters-drawer > summary.filters-toggle::after {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 4px;
transition: transform 180ms ease;
}
.filters-drawer[open] > summary.filters-toggle::after {
transform: rotate(-135deg);
}
/* Phone: filters hidden when closed, revealed when open. Markup
omits the native `open` attribute so the drawer starts
collapsed on first visit, giving users immediate content. */
.filters-drawer:not([open]) > .header-filter-row { display: none; }
.filters-drawer[open] > .header-filter-row { margin-top: 10px; }
}
/* =============================================================
Form-grid — responsive form layouts (Phase 1A Day 3)
=============================================================
Drop-in CSS grid utilities for form rows. Columns stay side by
side above --bp-phone and collapse to single column below. The
-pair variant preserves the explicit rule from feedback memory:
shipping and billing address blocks are always side by side on
desktop, stacked on phone.
Usage:
...field...
...field...
...three children...
============================================================= */
.form-grid,
.form-grid-3,
.form-grid-pair {
display: grid;
gap: 14px;
align-items: start;
}
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid-pair { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
.form-grid,
.form-grid-3,
.form-grid-pair {
grid-template-columns: 1fr;
}
}
/* Full-width opt-out for a single child that should span all
columns above the breakpoint (common for notes / headings). */
.form-grid > .form-full,
.form-grid-3 > .form-full,
.form-grid-pair > .form-full {
grid-column: 1 / -1;
}
/* =============================================================
Mobile topbar icons (Phase 1A Day 4)
=============================================================
Replaces the cryptic C / T / N single-letter labels with proper
icons. Sized to stay within the 56px topbar footprint and pairs
cleanly with the existing .notif-counter overlay. */
.mobile-topbar-icon {
width: 22px;
height: 22px;
color: #e2e8f0;
flex: 0 0 22px;
}
/* =============================================================
Mobile bottom tab bar (Phase 1A Day 4)
=============================================================
Phone-only primary nav. Sticks to the bottom of the viewport,
safe-area-aware so it sits above the iOS home indicator when
installed as a PWA. Active state auto-syncs via the existing
showView() .nav-link active-class toggle.
Hidden above --bp-phone by default — nothing to remove on
desktop. On phone, the main content area reserves space at the
bottom equal to the tab bar height so content never hides
underneath it.
============================================================= */
.mobile-tab-bar {
display: none;
}
@media (max-width: 600px) {
.mobile-tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 150;
display: flex;
background: var(--color-sidebar);
border-top: 1px solid rgba(255,255,255,0.08);
padding-left: var(--safe-left);
padding-right: var(--safe-right);
padding-bottom: var(--safe-bottom);
box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}
.mobile-tab {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 4px 10px;
min-height: 56px;
color: #94a3b8;
text-decoration: none;
font-size: 11px;
font-weight: 600;
transition: color 140ms ease, background 140ms ease;
}
.mobile-tab:active {
background: rgba(255,255,255,0.08);
}
.mobile-tab.active {
color: var(--color-primary-hover, #a5b4fc);
}
.mobile-tab-icon {
width: 22px;
height: 22px;
}
.mobile-tab-label {
line-height: 1;
letter-spacing: 0.2px;
}
/* Reserve space at the bottom of scrollable content so nothing
hides behind the tab bar. The bar is 56px tall plus whatever
the home-indicator inset adds. */
body,
.main-content,
.content {
padding-bottom: calc(60px + var(--safe-bottom));
}
/* Dashboard stat cards: default auto-fit lays them out one-per-row
on narrow phones, which wastes vertical space (each 18px-padded
card takes ~130px tall). Pack them 2-per-row on phone with
tighter padding so the user can glance at all their numbers
without excessive scrolling. */
.stat-cards,
.admin-stat-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.stat-card,
.admin-stat-card {
padding: 12px 14px;
}
.stat-card .stat-label,
.admin-stat-label {
font-size: 10px;
letter-spacing: 0.4px;
}
.stat-card .stat-value,
.admin-stat-value {
font-size: 22px;
}
#perfStatCards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* =============================================================
PWA banners (install prompt, iOS hint, update toast)
=============================================================
Shared bottom-anchored card used by public/js/pwa.js. One
stacking context so multiple banners never show at once in
practice (iOS hint + update toast are mutually exclusive by
gating logic in the JS). Positioned above mobile tab bar via
bottom offset that accounts for --safe-bottom.
============================================================= */
.pwa-banner {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(16px + var(--safe-bottom, 0px));
max-width: 480px;
margin-left: auto;
margin-right: auto;
padding: 14px 16px;
background: #1e293b;
color: #e2e8f0;
border: 1px solid #334155;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
z-index: 9800;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(16px);
transition: opacity 200ms ease, transform 200ms ease;
pointer-events: none;
}
.pwa-banner-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.pwa-banner-body {
display: flex;
align-items: center;
gap: 12px;
flex: 1 1 240px;
min-width: 0;
}
.pwa-banner-icon {
width: 36px;
height: 36px;
border-radius: 8px;
flex: 0 0 auto;
}
.pwa-banner-text { min-width: 0; }
.pwa-banner-title {
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.2;
}
.pwa-banner-sub {
font-size: 12px;
color: #94a3b8;
line-height: 1.4;
margin-top: 2px;
}
.pwa-banner-inline-icon {
width: 14px;
height: 14px;
vertical-align: -3px;
margin: 0 2px;
}
.pwa-banner-actions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.pwa-banner-btn-primary,
.pwa-banner-btn-ghost {
padding: 8px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: none;
transition: filter 120ms, background 120ms;
}
.pwa-banner-btn-primary {
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #fff;
box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}
.pwa-banner-btn-primary:hover { filter: brightness(1.08); }
.pwa-banner-btn-ghost {
background: transparent;
color: #cbd5e1;
border: 1px solid #475569;
}
.pwa-banner-btn-ghost:hover { background: rgba(148, 163, 184, 0.1); }
/* =============================================================
Behavioral polish for touch / PWA installs
=============================================================
Applied always (they're safe) to harden the mobile web
experience. The display-mode: standalone block layers extra
restrictions that only make sense when running as an installed
app (no pull-to-refresh, no text selection on chrome, etc).
============================================================= */
button,
.btn,
.mobile-tab,
.mobile-topbar-btn,
.top-nav-notif,
.top-nav-user-btn,
.nav-link,
.open-project-btn,
a.mobile-topbar-btn,
a.mobile-tab {
/* Eliminates the 300ms double-tap zoom delay and the gray
iOS tap highlight flash, both of which make buttons feel
sluggish/webby on touch. */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
@media (display-mode: standalone) {
html, body {
/* Prevent the entire page from bouncing when the user
pulls past the top or bottom edge. Individual scroll
containers can still overscroll internally. */
overscroll-behavior-y: contain;
}
/* No accidental text selection on chrome elements - behaves
more like a native app. Content areas (tables, cards,
text blocks) remain selectable via the override below. */
.top-nav,
.mobile-topbar,
.mobile-tab-bar,
.sidebar,
.sidebar-logo,
.mobile-brand,
.nav-link,
.btn,
button,
.open-project-btn,
.mobile-topbar-btn,
.mobile-tab,
.top-nav-notif,
.top-nav-user-btn {
-webkit-user-select: none;
user-select: none;
}
/* Keep content selectable so users can still copy order
numbers, customer details, notes, etc. */
.main-content,
.op-panel-row,
.op-panel-row-title,
.modal-body,
p, span, td, th, li, h1, h2, h3, h4 {
-webkit-user-select: auto;
user-select: auto;
}
}
/* =============================================================
Public storefront views (Phase 5).
Loaded by every authed page too - selectors are scoped to
#view-shop-home / #view-shop-quote / #view-shop-signup so
they never bleed into the authed UI.
============================================================= */
.shop-hero {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
padding: 48px 36px; margin-bottom: 32px;
background: linear-gradient(135deg, var(--color-sidebar) 0%, #2d3561 100%);
color: #fff; border-radius: 14px; position: relative; overflow: hidden;
}
.shop-hero h1 { color: #fff; font-size: 38px; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: 12px 0 16px; }
.shop-hero-eyebrow { color: #fbbf24; }
.shop-hero-sub { color: #dbe3f5; font-size: 16px; margin-bottom: 22px; max-width: 520px; }
.shop-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.shop-hero-ctas .btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.45); }
.shop-hero-ctas .btn-ghost:hover { background: #fff; color: var(--color-sidebar); }
.shop-hero-carousel {
position: relative; aspect-ratio: 4/3; max-height: 380px;
border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.06);
box-shadow: 0 18px 40px -18px rgba(0,0,0,0.45);
}
.shop-hero-slide {
position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease;
pointer-events: none; background: #fff; text-decoration: none;
display: flex; align-items: center; justify-content: center;
}
.shop-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.shop-hero-slide img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.shop-hero-slide-overlay {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 28px 22px 36px;
background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.92) 100%);
color: #fff; display: flex; flex-direction: column; gap: 4px;
}
.shop-hero-slide-overlay strong {
font-size: 16px; font-weight: 800; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-hero-slide-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #fbbf24; font-weight: 800; }
.shop-hero-slide-price { font-size: 12px; color: #cbd5f5; }
.shop-hero-carousel-empty { padding: 32px; text-align: center; color: #cbd5f5; font-size: 14px; }
.shop-hero-carousel-dots {
position: absolute; bottom: 10px; left: 0; right: 0;
display: flex; justify-content: center; gap: 6px; z-index: 4;
}
.shop-hero-carousel-dot {
width: 8px; height: 8px; border: 0; border-radius: 50%;
background: rgba(255,255,255,0.55); cursor: pointer; padding: 0;
transition: background 0.15s, transform 0.15s;
}
.shop-hero-carousel-dot.is-active { background: #fff; transform: scale(1.25); }
/* Prev/next arrow controls for the hero carousel. Sit half-overlay on
the side edges; visible at all times but get a subtle hover lift. */
.shop-hero-carousel-arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
border: 0; border-radius: 999px;
background: rgba(15, 23, 42, 0.55);
color: #fff;
font-size: 22px; font-weight: 700; line-height: 1;
cursor: pointer; padding: 0;
z-index: 5;
backdrop-filter: blur(4px);
transition: background 0.12s, transform 0.12s;
}
.shop-hero-carousel-arrow:hover {
background: var(--color-primary);
transform: translateY(-50%) scale(1.08);
}
.shop-hero-carousel-arrow-prev { left: 10px; }
.shop-hero-carousel-arrow-next { right: 10px; }
#view-shop-home .shop-coupon-banner {
display: flex; align-items: center; gap: 14px;
padding: 12px 18px; margin-bottom: 24px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #f59e0b; border-radius: 10px;
color: #7c2d12; font-size: 13px; text-decoration: none;
transition: transform 0.12s, box-shadow 0.12s;
}
#view-shop-home .shop-coupon-banner:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(124,45,18,0.4); }
#view-shop-home .shop-coupon-banner-icon { font-size: 20px; }
#view-shop-home .shop-coupon-banner-copy { flex: 1; }
#view-shop-home .shop-coupon-banner-cta { font-weight: 800; white-space: nowrap; }
/* Shared shop layout primitives. Originally scoped to #view-shop-home;
broadened so /shop/categories, /shop/faq, /shop/about, /shop/contact
all consume the same components (DRY). The leading selector list is
the intentional source-of-truth list of shop views that share these. */
#view-shop-home .shop-section,
#view-shop-categories .shop-section,
#view-shop-faq .shop-section,
#view-shop-about .shop-section,
#view-shop-contact .shop-section { margin: 36px 0; }
.shop-cat-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
}
.shop-cat-tile {
display: flex; flex-direction: column; gap: 0;
border: 1px solid var(--color-border); border-radius: 12px;
background: var(--color-card); color: var(--color-text); text-decoration: none;
transition: border-color 0.12s, transform 0.12s, box-shadow 0.18s;
overflow: hidden; min-height: 180px;
}
.shop-cat-tile:hover {
border-color: var(--color-primary);
transform: translateY(-3px);
box-shadow: 0 10px 24px -10px rgba(67, 56, 202, 0.35);
}
.shop-cat-tile-img {
aspect-ratio: 4/3; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.shop-cat-tile-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.4s ease;
}
.shop-cat-tile:hover .shop-cat-tile-img img { transform: scale(1.06); }
.shop-cat-tile-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
color: rgba(67, 56, 202, 0.55); font-weight: 800; font-size: 28px;
letter-spacing: 0.06em;
background: linear-gradient(135deg, rgba(67, 56, 202, 0.08), rgba(99, 102, 241, 0.14));
}
.shop-cat-tile-body {
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px;
}
.shop-cat-tile strong {
font-size: 14px; font-weight: 700; line-height: 1.25;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.shop-cat-tile span {
font-size: 11px; color: var(--color-muted);
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
/* Text-only variant - used on About-page "Who we work with" /
"Decoration capabilities" tiles where no representative product
image makes sense. Drops the empty image area and reverts to the
compact text-only tile. */
.shop-cat-tile.shop-cat-tile-text {
min-height: 0;
padding: 18px;
border-radius: 10px;
}
.shop-cat-tile.shop-cat-tile-text .shop-cat-tile-img,
.shop-cat-tile.shop-cat-tile-text .shop-cat-tile-img-placeholder { display: none; }
.shop-cat-tile.shop-cat-tile-text .shop-cat-tile-body { padding: 0; }
/* Live filter input above category / theme grids. Reuses native
styling + a search-icon background so visitors can type
to narrow the grid. */
.shop-cat-filter {
display: flex; align-items: center; gap: 12px;
margin: 0 0 16px;
flex-wrap: wrap;
}
.shop-cat-filter-input {
flex: 1 1 320px;
padding: 10px 14px 10px 38px;
border: 1px solid var(--color-border); border-radius: 10px;
background: var(--color-card) url("data:image/svg+xml;utf8,") no-repeat 12px center;
font-size: 14px; color: var(--color-text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.shop-cat-filter-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.15);
}
.shop-cat-filter-count {
font-size: 12px; color: var(--color-muted); white-space: nowrap;
}
/* Letter-index header within the grid. Spans all columns and
anchors the alphabetical run that follows it. scroll-margin-top
leaves room for the sticky top nav so the jump-bar anchor lands
below the header instead of behind it. */
.shop-cat-letter {
grid-column: 1 / -1;
font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
color: var(--color-muted); text-transform: uppercase;
padding: 14px 0 4px;
border-bottom: 1px solid var(--color-border);
scroll-margin-top: 90px;
}
/* A-Z quick-jump bar - sits above the category/theme grid (below
the live-filter input) and lets visitors hop to a letter with
one click. Letters with no items render dimmed and inert. */
.shop-cat-jumpbar {
display: flex;
flex-wrap: wrap;
gap: 2px;
margin: 0 0 16px;
padding: 8px 10px;
background: var(--color-card);
border: 1px solid var(--color-border);
border-radius: 10px;
}
.shop-cat-jumpbar-letter {
flex: 1 1 28px;
min-width: 28px;
text-align: center;
padding: 6px 4px;
border-radius: 6px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--color-text);
text-decoration: none;
transition: background 0.12s, color 0.12s;
}
.shop-cat-jumpbar-letter:hover {
background: var(--color-primary);
color: #fff;
}
.shop-cat-jumpbar-letter.is-empty {
color: var(--color-muted);
opacity: 0.35;
cursor: default;
pointer-events: none;
}
@media (max-width: 600px) {
.shop-cat-jumpbar-letter { flex: 1 1 22px; min-width: 22px; font-size: 11px; padding: 5px 2px; }
}
/* Hide tiles + their preceding letter header when filtered out
client-side by the live search. */
.shop-cat-tile.is-hidden,
.shop-cat-letter.is-hidden { display: none; }
.shop-cta-strip {
margin: 40px 0; padding: 36px 28px; text-align: center;
background: linear-gradient(135deg, var(--color-sidebar) 0%, #2d3561 100%);
color: #fff; border-radius: 14px;
}
.shop-cta-strip h2 { color: #fff; font-size: 22px; }
.shop-cta-strip p { color: #dbe3f5; max-width: 520px; margin: 8px auto 18px; }
/* Ghost buttons inside the dark CTA strip need the same light-on-dark
treatment the hero CTAs already get - the default .btn-ghost is dark
text on a near-transparent bg, which renders nearly invisible on
the navy gradient background. */
.shop-cta-strip .btn-ghost {
background: transparent;
color: #fff;
border: 2px solid rgba(255, 255, 255, 0.45);
}
.shop-cta-strip .btn-ghost:hover {
background: #fff;
color: var(--color-sidebar);
}
/* How-it-works step strip. Reuses .shop-cat-grid for the responsive
3-column wrapper + .card for each step (both pre-existing). The
only specific styling: a numeric badge in the top-left of each card. */
.shop-howitworks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.shop-howitworks-step { padding: 22px 22px 18px; position: relative; }
.shop-howitworks-step h3 { margin: 8px 0 4px; font-size: 16px; }
.shop-howitworks-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-secondary); }
.shop-howitworks-num {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 999px;
background: linear-gradient(135deg, #4338ca, #6366f1);
color: #fff; font-weight: 800; font-size: 14px;
}
/* Trust strip beneath the hero. Reuses .stat-cards (the dashboard
KPI grid) so styling is shared. The .shop-home-trust modifier
just lets us set tighter margins specific to this placement. */
.shop-home-trust { margin: 8px 0 28px; }
/* =================================================================
PPD-staff Preview Mode (body.shop-preview-mode)
When an authed PPD user visits /shop/*, they're previewing the
storefront. The sticky banner labels the surface so they know
they're seeing customer-facing content, and gives a one-click
exit back to the dashboard. Customer-only CTAs (Request a Quote,
Create Free Account, signup nudges) are hidden via the
.preview-mode-hide utility - apply it in markup or via runtime
class toggling on shop views.
================================================================= */
.shop-preview-banner {
position: sticky;
top: 0;
z-index: 95;
display: flex;
align-items: center;
gap: 14px;
padding: 8px 18px;
background: linear-gradient(90deg, #4338ca 0%, #6366f1 100%);
color: #fff;
font-size: 13px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.shop-preview-banner-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
background: rgba(255,255,255,0.18);
padding: 3px 8px;
border-radius: 4px;
}
.shop-preview-banner-text {
flex: 1;
color: rgba(255,255,255,0.92);
}
.shop-preview-banner-exit {
color: #fff;
text-decoration: none;
font-weight: 700;
padding: 4px 12px;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 6px;
transition: background 0.15s;
}
.shop-preview-banner-exit:hover {
background: rgba(255,255,255,0.18);
}
@media (max-width: 700px) {
.shop-preview-banner { font-size: 11px; gap: 8px; padding: 6px 12px; }
.shop-preview-banner-text { display: none; }
}
/* Hide every customer-only CTA in preview mode. Marked .preview-mode-hide
in markup OR added at runtime when the staff branch initializes. */
body.shop-preview-mode .preview-mode-hide,
body.shop-preview-mode [data-preview-hide],
body.shop-preview-mode .shop-cta-strip,
body.shop-preview-mode [data-shop-coupon-cta],
body.shop-preview-mode #shopHomeBrandEyebrow + h1 + p + .shop-hero-ctas {
/* Last selector is intentionally narrow: hide the hero's signup/quote
CTA cluster on shop-home since the PPD doesn't need either. The
hero copy + image still render (preview value). */
}
body.shop-preview-mode .shop-cta-strip,
body.shop-preview-mode [data-preview-hide],
body.shop-preview-mode .preview-mode-hide {
display: none !important;
}
@media (max-width: 900px) {
.shop-hero { grid-template-columns: 1fr; padding: 32px 22px; }
.shop-hero h1 { font-size: 28px; }
}
/* =================================================================
Shop About page - distinct visual layouts per section so the page
doesn't read as a wall of identical 3-card grids. Each section
has its own component class. Five layouts, five different cadences.
================================================================= */
/* 1. Spotlight - oversize pull-quote on the left, body copy + outcomes
on the right. Magazine-style opener. */
.shop-spotlight {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
align-items: center;
padding: 40px 32px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(99,102,241,0.02));
border: 1px solid var(--color-border);
}
.shop-spotlight-quote {
position: relative;
padding-left: 28px;
border-left: 4px solid var(--color-primary);
}
.shop-spotlight-quote p {
font-size: 26px;
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.015em;
color: var(--color-text);
margin: 0;
}
.shop-spotlight-mark {
position: absolute;
top: -22px; left: 14px;
font-size: 88px;
line-height: 1;
color: var(--color-primary);
opacity: 0.18;
font-family: Georgia, serif;
pointer-events: none;
}
.shop-spotlight-eyebrow {
color: var(--color-primary);
font-size: 11px;
letter-spacing: 0.12em;
font-weight: 800;
text-transform: uppercase;
}
.shop-spotlight-body p {
margin: 12px 0 16px;
font-size: 15px;
line-height: 1.6;
color: var(--color-text-secondary);
}
.shop-spotlight-outcomes {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.shop-spotlight-outcomes li {
position: relative;
padding-left: 26px;
font-size: 14px;
color: var(--color-text);
font-weight: 600;
}
.shop-spotlight-outcomes li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 16px; height: 16px;
border-radius: 999px;
background: var(--color-primary);
box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
}
.shop-spotlight-outcomes li::after {
content: "✓";
position: absolute;
left: 3px; top: 4px;
color: #fff; font-size: 11px; font-weight: 900;
}
@media (max-width: 900px) {
.shop-spotlight { grid-template-columns: 1fr; padding: 28px 22px; gap: 22px; }
.shop-spotlight-quote p { font-size: 20px; }
}
/* 2. Compare - side-by-side "Them vs Us" columns. Red/green tinted
headers, contrasting list styles. */
.shop-compare-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 14px;
}
.shop-compare-col {
border-radius: 14px;
padding: 24px 22px;
border: 1px solid var(--color-border);
background: var(--color-card);
position: relative;
overflow: hidden;
}
.shop-compare-col::before {
content: "";
position: absolute; left: 0; top: 0; right: 0;
height: 4px;
}
.shop-compare-them { background: linear-gradient(180deg, rgba(239,68,68,0.04), transparent 60%); }
.shop-compare-them::before { background: #ef4444; }
.shop-compare-us { background: linear-gradient(180deg, rgba(16,185,129,0.05), transparent 60%); }
.shop-compare-us::before { background: #10b981; }
.shop-compare-head { margin-bottom: 14px; }
.shop-compare-head h3 { margin: 6px 0 0; font-size: 18px; font-weight: 800; }
.shop-compare-tag {
display: inline-block;
font-size: 10px; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em;
padding: 3px 9px;
border-radius: 999px;
}
.shop-compare-them .shop-compare-tag { background: rgba(239,68,68,0.12); color: #b91c1c; }
.shop-compare-us .shop-compare-tag { background: rgba(16,185,129,0.14); color: #047857; }
.shop-compare-col ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.shop-compare-col li {
position: relative;
padding: 8px 8px 8px 34px;
border-radius: 8px;
font-size: 13.5px;
line-height: 1.5;
color: var(--color-text);
}
.shop-compare-col li::before {
position: absolute;
left: 8px; top: 8px;
width: 18px; height: 18px;
border-radius: 999px;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900;
color: #fff;
}
.shop-compare-them li::before { content: "✕"; background: #ef4444; }
.shop-compare-us li::before { content: "✓"; background: #10b981; }
.shop-compare-them li { color: var(--color-text-secondary); }
@media (max-width: 768px) {
.shop-compare-grid { grid-template-columns: 1fr; }
}
/* 3. Timeline - horizontal numbered process flow with connector
arrows between steps. Stacks vertically on mobile with the
connector becoming a continuous left rail. */
.shop-timeline-track {
list-style: none;
counter-reset: tl;
margin: 14px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
position: relative;
}
.shop-timeline-step {
position: relative;
padding: 24px 18px 18px;
border-radius: 14px;
background: var(--color-card);
border: 1px solid var(--color-border);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.shop-timeline-step + .shop-timeline-step::before {
content: "";
position: absolute;
top: 50%;
left: -18px;
width: 18px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-primary) 40%, var(--color-primary));
transform: translateY(-50%);
}
.shop-timeline-step + .shop-timeline-step::after {
content: "";
position: absolute;
top: 50%;
left: -8px;
width: 0; height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 7px solid var(--color-primary);
transform: translateY(-50%);
}
.shop-timeline-num {
display: inline-flex;
align-items: center; justify-content: center;
width: 36px; height: 36px;
border-radius: 999px;
background: linear-gradient(135deg, #4338ca, #6366f1);
color: #fff;
font-weight: 900; font-size: 16px;
box-shadow: 0 4px 10px rgba(99,102,241,0.35);
margin-bottom: 12px;
}
.shop-timeline-body h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.shop-timeline-body p {
margin: 0 0 10px;
font-size: 13px; line-height: 1.55;
color: var(--color-text-secondary);
}
.shop-timeline-meta {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px; font-weight: 800;
letter-spacing: 0.05em; text-transform: uppercase;
background: rgba(99,102,241,0.1);
color: var(--color-primary);
}
@media (max-width: 900px) {
.shop-timeline-track { grid-template-columns: 1fr; gap: 14px; padding-left: 22px; }
.shop-timeline-track::before {
content: "";
position: absolute;
left: 17px; top: 18px; bottom: 18px;
width: 2px;
background: linear-gradient(180deg, transparent, var(--color-primary) 8%, var(--color-primary) 92%, transparent);
}
.shop-timeline-step + .shop-timeline-step::before,
.shop-timeline-step + .shop-timeline-step::after { display: none; }
.shop-timeline-step::after {
content: "";
position: absolute;
left: -22px; top: 30px;
width: 12px; height: 12px;
border-radius: 999px;
background: var(--color-primary);
border: 3px solid var(--color-bg);
}
}
/* 4. Personas - bento-style asymmetric grid. The first persona
("hero") spans 2 columns and 2 rows on desktop, the rest fill
a tighter 3x2 grid. Tinted backgrounds via data-tone for
editorial color variety. */
.shop-personas-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 14px;
margin-top: 14px;
}
.shop-persona {
position: relative;
display: flex; flex-direction: column;
padding: 22px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: var(--color-card);
text-decoration: none;
color: inherit;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
overflow: hidden;
}
.shop-persona:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(15,23,42,0.10);
border-color: rgba(99,102,241,0.4);
}
.shop-persona-emoji { font-size: 28px; line-height: 1; margin-bottom: 12px; display: block; }
.shop-persona h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; }
.shop-persona p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.shop-persona-cta {
margin-top: auto;
font-size: 12px; font-weight: 800;
color: var(--color-primary);
letter-spacing: 0.04em;
}
.shop-persona-hero {
grid-column: span 2;
grid-row: span 2;
padding: 32px;
background: linear-gradient(135deg, #1e1b4b, #312e81);
color: #fff;
border-color: transparent;
}
.shop-persona-hero .shop-persona-emoji { font-size: 48px; margin-bottom: 18px; }
.shop-persona-hero h3 { font-size: 26px; letter-spacing: -0.01em; }
.shop-persona-hero p { color: #cbd5f5; font-size: 14px; max-width: 380px; }
.shop-persona-hero .shop-persona-cta { color: #fbbf24; font-size: 13px; }
.shop-persona-tag {
display: inline-block;
margin-bottom: 10px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(251,191,36,0.18);
color: #fbbf24;
font-size: 10px; font-weight: 800;
letter-spacing: 0.12em; text-transform: uppercase;
}
/* Tinted backgrounds for non-hero personas - keeps the "editorial"
feel without going overboard. Each tone is a soft pastel + matching
accent for the emoji block. */
.shop-persona[data-tone="marketing"] { background: linear-gradient(135deg, rgba(236,72,153,0.10), rgba(236,72,153,0.02)); }
.shop-persona[data-tone="ops"] { background: linear-gradient(135deg, rgba(14,165,233,0.10), rgba(14,165,233,0.02)); }
.shop-persona[data-tone="founders"] { background: linear-gradient(135deg, rgba(249,115,22,0.10), rgba(249,115,22,0.02)); }
.shop-persona[data-tone="schools"] { background: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(16,185,129,0.02)); }
.shop-persona[data-tone="agencies"] { background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(139,92,246,0.02)); }
@media (max-width: 1100px) {
.shop-personas-grid { grid-template-columns: repeat(3, 1fr); }
.shop-persona-hero { grid-column: span 3; grid-row: auto; }
}
@media (max-width: 700px) {
.shop-personas-grid { grid-template-columns: 1fr 1fr; }
.shop-persona-hero { grid-column: span 2; padding: 24px; }
.shop-persona-hero h3 { font-size: 22px; }
}
/* 5. Methods - dense list-style block. Two-column index of
decoration methods, each with a colored accent bar (driven by
--method-accent inline custom prop), inline icon, one-line
copy, and a chevron. Different cadence from the persona grid. */
.shop-methods-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 14px;
}
.shop-method {
position: relative;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px 14px 22px;
border-radius: 10px;
background: var(--color-card);
border: 1px solid var(--color-border);
text-decoration: none;
color: inherit;
transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
overflow: hidden;
}
.shop-method::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 5px;
background: var(--method-accent, var(--color-primary));
}
.shop-method:hover {
transform: translateX(2px);
border-color: var(--method-accent, var(--color-primary));
box-shadow: 0 6px 16px rgba(15,23,42,0.08);
}
.shop-method-icon {
flex: 0 0 auto;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--method-accent) 12%, transparent);
border-radius: 10px;
font-size: 20px;
}
.shop-method-body { flex: 1 1 auto; min-width: 0; }
.shop-method-body h3 { margin: 0 0 2px; font-size: 14px; font-weight: 800; }
.shop-method-body p { margin: 0; font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.4; }
.shop-method-chev {
flex: 0 0 auto;
font-size: 22px;
color: var(--color-muted);
font-weight: 600;
transition: transform 0.12s, color 0.12s;
}
.shop-method:hover .shop-method-chev {
color: var(--method-accent, var(--color-primary));
transform: translateX(3px);
}
@media (max-width: 700px) {
.shop-methods-list { grid-template-columns: 1fr; }
}
/* Contact page channel strip — sits at the bottom of the
.auth-marketing column on /shop/contact. Compact list of
email / phone / address / hours, styled to read on the
indigo gradient panel. */
.shop-contact-channel-strip {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,0.18);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
}
.shop-contact-channel {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
color: #fff;
}
.shop-contact-channel a {
color: #fff;
text-decoration: none;
font-weight: 600;
border-bottom: 1px dashed rgba(255,255,255,0.4);
align-self: flex-start;
}
.shop-contact-channel a:hover { border-bottom-color: #fbbf24; color: #fbbf24; }
.shop-contact-channel-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fbbf24;
}
.shop-contact-social {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.18);
}
.shop-contact-social-links {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.shop-contact-social-links .btn-ghost {
background: rgba(255,255,255,0.08);
color: #fff;
border: 1px solid rgba(255,255,255,0.25);
}
.shop-contact-social-links .btn-ghost:hover {
background: #fff;
color: var(--color-sidebar);
}
@media (max-width: 600px) {
.shop-contact-channel-strip { grid-template-columns: 1fr; }
}
/* hCaptcha wrapper - the raw widget looks dropped-in on a polished
form, so we add a labeled container with a small icon + helper
line to integrate it into the form's visual rhythm. The widget
itself is iframe-rendered by hCaptcha - we can't restyle that,
but we can frame it. */
.shop-captcha-wrap {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px;
border-radius: 10px;
background: var(--color-bg);
border: 1px solid var(--color-border);
}
.shop-captcha-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
.shop-captcha-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 6px;
background: rgba(99,102,241,0.12);
font-size: 12px;
}
.shop-captcha-wrap .h-captcha {
display: flex;
justify-content: center;
}
.shop-captcha-hint {
margin: 0;
font-size: 11px;
color: var(--color-muted);
text-align: center;
}
/* Personal sales rep section on the shop home. The single biggest
differentiator from a generic online promo storefront: this is a
relationship, not a self-checkout. Sized like a major content
block so it pulls attention away from the product grid above. */
.shop-rep-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 28px;
align-items: start;
padding: 36px 32px;
border-radius: 18px;
background:
radial-gradient(circle at 0% 0%, rgba(99,102,241,0.18), transparent 50%),
radial-gradient(circle at 100% 100%, rgba(251,191,36,0.10), transparent 55%),
linear-gradient(135deg, var(--color-sidebar) 0%, #2d3561 100%);
color: #fff;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 14px 40px -16px rgba(15, 23, 42, 0.6);
overflow: hidden;
}
.shop-rep-card-mark {
width: 64px; height: 64px;
display: flex; align-items: center; justify-content: center;
border-radius: 16px;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #1e1b4b;
font-size: 30px;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(251,191,36,0.35);
}
.shop-rep-eyebrow {
color: #fbbf24 !important;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.shop-rep-card h2 {
color: #fff;
font-size: 28px;
font-weight: 900;
line-height: 1.15;
letter-spacing: -0.015em;
margin: 8px 0 14px;
}
.shop-rep-card > .shop-rep-card-body > p {
color: #dbe3f5;
font-size: 15px;
line-height: 1.6;
margin: 0 0 18px;
max-width: 620px;
}
.shop-rep-list {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 24px;
}
.shop-rep-list li {
display: flex;
flex-direction: column;
gap: 2px;
position: relative;
padding-left: 26px;
}
.shop-rep-list li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 16px; height: 16px;
border-radius: 999px;
background: #fbbf24;
box-shadow: 0 0 0 4px rgba(251,191,36,0.22);
}
.shop-rep-list li::after {
content: "✓";
position: absolute;
left: 3px; top: 4px;
color: #1e1b4b;
font-size: 11px;
font-weight: 900;
}
.shop-rep-list strong {
color: #fff;
font-size: 14px;
font-weight: 800;
}
.shop-rep-list span {
color: #cbd5f5;
font-size: 13px;
line-height: 1.5;
}
.shop-rep-ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.shop-rep-ctas .btn-ghost {
background: transparent;
color: #fff;
border: 2px solid rgba(255,255,255,0.45);
}
.shop-rep-ctas .btn-ghost:hover {
background: #fff;
color: var(--color-sidebar);
}
@media (max-width: 720px) {
.shop-rep-card { grid-template-columns: 1fr; padding: 28px 22px; gap: 18px; }
.shop-rep-card h2 { font-size: 22px; }
.shop-rep-list { grid-template-columns: 1fr; }
}
/* Swatch-style color picker - drop-in replacement for a