/* =================================================================
APSO Smart Search — inline bar + dropdown for /demo/
Replaces Magento's element with a modern bar
sized to the original #search_mini_form wrapper.
================================================================= */
/* Inter — chat-bubble font (modern, highly legible). Must be the first
statement in the file for @import to be honoured. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* ── Pre-boot: kill the "old bar flash" ──────────────────────────────────────
On a large/slow page, smart-search.js is DEFERRED, so it swaps in our bar only
after the whole page parses — by then Magento's native #search bar has already
painted and flashed. This stylesheet, however, is render-blocking (a plain
in ), so it applies BEFORE first paint: hide the native form's
contents here and the old bar never shows. #apssBar (our bar) is excluded so
it stays visible; visibility:hidden keeps the layout box so there is no jump.
SELF-HEALING with no JS: if the widget never mounts, the animation reveals the
native bar after 5s, so search is never left permanently hidden. */
#search_mini_form > *:not(#apssBar){
visibility: hidden;
animation: apssRevealNative 0s linear 5s forwards;
}
@keyframes apssRevealNative { to { visibility: visible; } }
/* Force sharp font rendering across the entire widget (bar + dropdown + cards).
The apsoparts page font (Typekit) renders pixelated without these hints. */
.apss-bar-inline, .apss-bar-inline *, .apss-drop, .apss-drop *,
.apss-c-big, .apss-c-big *, .apss-c-small, .apss-c-small *,
.apss-mat-hero, .apss-mat-hero *, .apss-mat-cfg, .apss-mat-cfg *,
.apss-mat-c2s, .apss-mat-c2s *,
.apss-mrow, .apss-mrow * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Override default-blue link colour everywhere inside the widget. */
.apss-drop a, .apss-drop a:visited, .apss-drop a:active, .apss-drop a:focus { color: inherit; }
:root {
--apss-red: #d80901; /* matched to the shop brand red (logo rgb 216,9,1). SARCLA 2026-06-30 */
/* Deepened from the old neon #ed1b2f so gradients/borders read less "hot".
SARCLA 2026-06-12. */
--apss-red-2: #d11f29;
--apss-ink: #1c2b4a;
--apss-ink-2: #3c4043;
--apss-muted: #5f6368;
--apss-muted-2:#9aa0a6;
--apss-line: rgba(28,43,74,0.10);
--apss-line-2: rgba(28,43,74,0.06);
--apss-bg: #ffffff;
--apss-bg-2: #fafaf7;
--apss-cream: #f4efe6;
--apss-cream-2:#ebe4d8;
--apss-green: #2e7d32;
--apss-ai: #6366f1;
--apss-ai-2: #8b5cf6;
--apss-radius: 14px;
--apss-shadow: 0 24px 60px rgba(15,23,42,0.18), 0 6px 18px rgba(15,23,42,0.08);
/* Typography aligned to apsoparts.com: futura-pt (Adobe kit ccz5mxp) for
display headings, Arial for body/UI — exactly the host page's stack.
Both fall back gracefully if the Typekit hasn't loaded yet. */
--apss-font-head: "futura-pt", Arial, "Helvetica Neue", system-ui, sans-serif;
--apss-font-body: Arial, "Helvetica Neue", system-ui, sans-serif;
/* Chat bubbles + chat input use Inter (loaded above) for a modern,
friendly chat-app feel; falls back to the system stack. */
--apss-font-chat: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, var(--apss-font-body);
}
/* ---- demo ribbon at top of body ---- */
#apso-ss-ribbon {
background: linear-gradient(90deg, #d80901, #ed1b2f);
color: #fff;
font: 500 13px/1.4 var(--apss-font-body);
padding: 10px 18px;
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
position: relative; z-index: 100;
}
#apso-ss-ribbon strong { font-weight: 700; letter-spacing: 0.06em; }
#apso-ss-ribbon code {
background: rgba(0,0,0,0.18); padding: 1px 6px; border-radius: 4px;
font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 12px;
}
/* ---- the inline bar (REPLACES Magento's ) ---- */
.apss-bar-inline {
position: relative; /* anchors the dropdown */
width: 100%; /* fills the original #search_mini_form width */
background: #fff;
border-radius: 8px; /* squared, not pill */
display: grid;
grid-template-columns: 24px 1fr auto auto auto; /* magnifier · input · AI · clear · feedback */
align-items: center;
gap: 10px;
padding: 9px 14px 9px 18px;
box-shadow: 0 0 0 1px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
/* apsoparts.com body stack (Arial). Display headings inside switch to
futura-pt via --apss-font-head. Cascades to the dropdown + cards. */
font-family: var(--apss-font-body);
color: var(--apss-ink);
transition: box-shadow 200ms;
}
/* Rotating placeholder overlay — a span layered on top of the native input,
because the native ::placeholder pseudo cannot be animated. The span is
positioned absolutely against the bar (which is `position: relative`),
anchored to the left padding + magnifier column so it lines up with the
real placeholder position. */
.apss-ph {
position: absolute;
left: 52px; /* 18px padding + 24px magnifier + 10px gap */
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--apss-muted-2);
font: 500 18px/1.4 inherit;
white-space: nowrap;
opacity: 0;
z-index: 0;
}
.apss-bar-inline input[type="search"] { position: relative; z-index: 1; }
.apss-ph.in { animation: apssPhIn 420ms cubic-bezier(.34,1.56,.64,1) forwards; }
.apss-ph.out { animation: apssPhOut 320ms cubic-bezier(.55,.06,.68,.19) forwards; }
@keyframes apssPhIn {
0% { opacity: 0; transform: translate(0, calc(-50% + 14px)) scale(0.92); }
60% { opacity: 1; transform: translate(0, calc(-50% - 4px)) scale(1.04); }
100% { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes apssPhOut {
0% { opacity: 1; transform: translate(0, -50%) scale(1); }
100% { opacity: 0; transform: translate(0, calc(-50% - 14px)) scale(0.92); }
}
.apss-bar-inline:focus-within,
.apss-bar-inline.open {
border-radius: 8px;
box-shadow:
0 0 0 1px var(--apss-red),
0 0 0 4px rgba(200,40,31,0.10),
0 8px 24px rgba(15,23,42,0.10);
}
.apss-magn { width: 18px; height: 18px; color: var(--apss-red); }
.apss-bar-inline input[type="search"] {
border: 0; outline: 0; background: transparent;
font: 500 18px/1.4 inherit;
color: var(--apss-ink);
width: 100%; padding: 4px 0; margin: 0;
/* override Magento's reset */
appearance: none; -webkit-appearance: none;
box-shadow: none !important;
min-width: 0;
}
.apss-bar-inline input[type="search"]::-webkit-search-cancel-button,
.apss-bar-inline input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.apss-bar-inline input::placeholder { color: var(--apss-muted-2); font-weight: 500; }
.apss-ai {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
box-sizing: border-box; height: 28px; /* equal to .apss-clear / .apss-fb-btn */
padding: 0 12px; border-radius: 6px; /* squared, matches the bar */
font-size: 11px; font-weight: 700; line-height: 1;
color: var(--apss-muted);
background: rgba(200,40,31,0.05);
border: 1px solid rgba(200,40,31,0.18);
text-transform: uppercase; letter-spacing: 0.08em;
transition: all 220ms cubic-bezier(.4,0,.2,1);
white-space: nowrap; cursor: pointer; /* clickable → opens APSO Assistant */
/* Discreet, sober, slow red glow-ring that quietly invites a click. */
animation: apssAiIdle 3.6s ease-in-out infinite;
}
.apss-ai:hover {
color: var(--apss-red);
border-color: rgba(200,40,31,0.5);
background: rgba(200,40,31,0.09);
}
.apss-ai:focus-visible { outline: 2px solid rgba(200,40,31,0.5); outline-offset: 2px; }
/* Ring on the BORDER (not a fill), pulsing slowly. */
@keyframes apssAiIdle {
0%,100% { box-shadow: 0 0 0 1px rgba(200,40,31,0.08), 0 0 6px rgba(200,40,31,0.10); }
50% { box-shadow: 0 0 0 1px rgba(200,40,31,0.22), 0 0 12px rgba(200,40,31,0.20); }
}
.apss-ai .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.apss-ai.on {
color: #fff;
background: linear-gradient(135deg, var(--apss-ai), var(--apss-ai-2));
border-color: transparent;
box-shadow: 0 0 14px rgba(99,102,241,0.45), 0 0 32px rgba(139,92,246,0.22);
animation: apssGlow 1.9s ease-in-out infinite;
}
.apss-ai.on .dot { background: #fff; opacity: 1; animation: apssDot 1.4s ease-in-out infinite; }
/* Red "powered" state — flipped on whenever the AI chat panel is live. */
.apss-ai.chat {
color: #fff;
background: linear-gradient(135deg, var(--apss-red), #ed1b2f);
border-color: transparent;
box-shadow: 0 0 14px rgba(200,40,31,0.55), 0 0 32px rgba(237,27,47,0.30);
animation: apssGlowRed 1.6s ease-in-out infinite;
}
.apss-ai.chat .dot { background: #fff; opacity: 1; animation: apssDot 1.2s ease-in-out infinite; }
@keyframes apssGlow {
0%,100% { box-shadow: 0 0 14px rgba(99,102,241,0.45), 0 0 32px rgba(139,92,246,0.22); }
50% { box-shadow: 0 0 22px rgba(99,102,241,0.60), 0 0 50px rgba(139,92,246,0.32); }
}
@keyframes apssGlowRed {
0%,100% { box-shadow: 0 0 14px rgba(200,40,31,0.55), 0 0 32px rgba(237,27,47,0.30); }
50% { box-shadow: 0 0 26px rgba(200,40,31,0.80), 0 0 54px rgba(237,27,47,0.45); }
}
@keyframes apssDot { 0%,100%{opacity:0.45} 50%{opacity:1} }
/* Clear-all chip — sits after the AI tag, only visible when input has text */
/* Clear — a labelled text pill (icon + word), styled to match the feedback
button so the three right-side controls read as one set. */
.apss-clear {
background: var(--apss-bg-2);
border: 1px solid var(--apss-line);
color: var(--apss-muted);
box-sizing: border-box;
height: 28px; min-height: 28px; border-radius: 6px; /* equal box to AI / feedback; override host button min-height */
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 0 12px;
font-size: 11px; font-weight: 700; line-height: 1;
letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
cursor: pointer;
transition: color 160ms, border-color 160ms, background 160ms;
}
.apss-clear-ic { width: 13px; height: 13px; flex: none; }
.apss-clear:hover {
color: var(--apss-red);
border-color: rgba(200,40,31,0.35);
background: rgba(200,40,31,0.04);
}
.apss-clear[hidden] { display: none; }
/* ---- "Give us your feedback" — pure text, aligned baseline with the
.apss-vlabel kicker ("Featured today" / "À LA UNE AUJOURD'HUI" etc.)
at top-left of the dropdown. apss-body has padding 18px 22px, vlabel
has font-size 11px / weight 700 / uppercase / 0.14em tracking. We
mirror the same kicker treatment + same padding offset so the two
sit on the same horizontal line on every view. */
/* Feedback trigger — now a compact pill that lives in the BAR (right side,
next to the AI badge), not absolutely positioned inside the results
dropdown. Bar height is unchanged (matches the AI badge's 5px/11px box).
The panel below is anchored to the bar so it opens regardless of whether
results are showing. */
.apss-fb-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
box-sizing: border-box; height: 28px; min-height: 28px; /* equal box to AI / clear; override host button min-height */
padding: 0 12px; border-radius: 6px;
font-size: 11px; font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
white-space: nowrap; line-height: 1;
color: var(--apss-muted);
background: var(--apss-bg-2);
border: 1px solid var(--apss-line);
cursor: pointer;
transition: color 160ms, border-color 160ms, background 160ms;
}
.apss-fb-btn:hover {
color: var(--apss-red);
border-color: rgba(200,40,31,0.35);
background: rgba(200,40,31,0.04);
}
.apss-fb-ic { width: 13px; height: 13px; flex: none; }
@media (max-width: 560px) {
/* Tight bars: icon-only feedback + clear buttons so they never crowd the input. */
.apss-fb-lbl, .apss-clear-lbl { display: none; }
.apss-fb-btn, .apss-clear { padding: 0 8px; }
}
.apss-fb-btn:hover,
.apss-fb-btn:focus,
.apss-fb-btn:active {
color: var(--apss-muted);
background: transparent;
text-decoration: none;
outline: none;
}
/* ===== Feedback panel — "Red Rail" design (SARCLA 2026-07-06) ===== */
.apss-fb-panel {
position: absolute;
top: 46px;
right: 16px;
/* Above the results dropdown (z-index 9999). */
z-index: 10001;
width: 300px;
max-width: calc(100% - 32px);
background: #fff;
border: 1px solid var(--apss-line);
border-left: 3px solid var(--apss-red); /* the red rail */
border-radius: 9px;
box-shadow: 0 14px 38px rgba(15,27,48,0.16);
padding: 0;
overflow: hidden;
}
.apss-fb-panel[hidden] { display: none; }
.apss-fb-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 13px;
border-bottom: 1px solid var(--apss-line);
font: 800 13.5px/1 inherit;
letter-spacing: -0.2px;
color: var(--apss-text, #141c2b);
}
.apss-fb-close {
background: none !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none; appearance: none;
font-size: 18px;
line-height: 1;
color: var(--apss-muted);
cursor: pointer;
padding: 0 4px;
}
.apss-fb-close:hover,
.apss-fb-close:focus,
.apss-fb-close:active {
background: none !important;
box-shadow: none !important;
outline: none !important;
color: var(--apss-red);
}
.apss-fb-sub { padding: 9px 13px 0; font: 500 11.5px/1.4 inherit; color: var(--apss-muted); }
.apss-fb-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 13px 12px; }
.apss-fb-rlabel { display: block; font: 800 10px/1 inherit; letter-spacing: 0.4px; text-transform: uppercase; color: var(--apss-muted); margin-bottom: 3px; }
.apss-fb-stars { display: flex; gap: 2px; }
.apss-fb-star {
background: transparent; border: 0; padding: 1px; cursor: pointer;
font-size: 19px; line-height: 1; color: #d7dce6;
transition: color 0.12s, transform 0.12s;
}
.apss-fb-star.on { color: #f5b301; }
.apss-fb-star:hover { transform: scale(1.12); }
.apss-fb-form label { display: flex; flex-direction: column; gap: 3px; font: 700 11px/1.2 inherit; color: var(--apss-text, #141c2b); }
.apss-fb-form label em { font-style: normal; font-weight: 500; color: var(--apss-muted); }
.apss-fb-form input,
.apss-fb-form textarea {
border: 1px solid var(--apss-line);
border-radius: 6px;
padding: 7px 9px;
font: 400 12.5px/1.4 inherit;
color: var(--apss-text, #141c2b);
background: #f7f8fa;
outline: none;
width: 100%;
box-sizing: border-box;
}
.apss-fb-form textarea { resize: none; min-height: 52px; }
.apss-fb-form input:focus,
.apss-fb-form textarea:focus {
border-color: var(--apss-red);
background: #fff;
}
.apss-fb-actions { display: flex; flex-direction: column; gap: 6px; }
.apss-fb-submit {
width: 100%;
background: var(--apss-red);
color: #fff;
border: 0;
border-radius: 7px;
padding: 9px 0;
font: 800 13px/1 inherit;
letter-spacing: 0.2px;
cursor: pointer;
box-shadow: 0 6px 16px rgba(226,0,26,0.24);
margin-top: 2px;
}
.apss-fb-submit:hover { background: #c4001a; }
.apss-fb-status { font: 600 11px/1.2 inherit; color: var(--apss-muted); text-align: center; min-height: 13px; }
/* ---- the dropdown (drops down from the bar) ---- */
.apss-drop {
position: absolute;
top: calc(100% + 10px);
left: 0; right: 0;
background: #fff;
border-radius: var(--apss-radius);
max-height: 80vh;
overflow-y: auto;
overscroll-behavior: contain; /* scrolling the panel to its edge must NOT chain-scroll the shop behind it */
box-shadow: var(--apss-shadow);
border: 1px solid var(--apss-line);
transform-origin: top center;
transform: translateY(-8px) scale(0.985);
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: transform 260ms cubic-bezier(.4,0,.2,1), opacity 260ms cubic-bezier(.4,0,.2,1);
font-family: inherit; /* same Typekit family as the host page */
}
.apss-bar-inline.open .apss-drop {
transform: translateY(0) scale(1);
opacity: 1;
pointer-events: auto;
}
.apss-drop::-webkit-scrollbar { width: 8px; }
.apss-drop::-webkit-scrollbar-thumb { background: rgba(28,43,74,0.18); border-radius: 4px; }
.apss-body { padding: 18px 22px 22px; }
.apss-vlabel { font-size: 12px; letter-spacing: 0.01em; text-transform: none; color: var(--apss-muted); font-weight: 600; margin: 0 0 10px; }
.apss-vline { display: flex; align-items: center; gap: 14px; margin: 22px 0 12px; }
.apss-vline .apss-vlabel { margin: 0; }
.apss-vline .apss-ln { flex: 1; height: 1px; background: var(--apss-line); }
.apss-vline .apss-more { font-size: 11px; color: var(--apss-muted); }
/* ---- idle: 6 main apsoparts divisions across the top ---- */
.apss-divs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
}
.apss-div-card {
background: #fff;
border: 1px solid var(--apss-line);
border-radius: 10px;
padding: 14px 12px;
text-decoration: none;
color: inherit;
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 6px;
transition: all 200ms;
min-height: 120px;
}
.apss-div-card:hover {
border-color: var(--apss-red);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.apss-div-ic { font-size: 26px; line-height: 1; margin-bottom: 2px; }
.apss-div-body h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--apss-ink); }
.apss-div-body p { margin: 3px 0 0; font-size: 11px; color: var(--apss-muted); line-height: 1.3; }
.apss-div-body small {
display: block; margin-top: 6px;
font-size: 10.5px; color: var(--apss-red); font-weight: 600;
letter-spacing: 0.04em;
}
@media (max-width: 880px) {
.apss-divs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
.apss-divs { grid-template-columns: repeat(2, 1fr); }
}
/* ---- idle: featured products — verified spec-row cards ---- */
/* Two columns of image-left cards (3 rows of 2). Collapses to 1 on a narrow
embed. SARCLA 2026-06-13. */
.apss-curated { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
@media (max-width: 560px) { .apss-curated { grid-template-columns: 1fr; } }
/* Spec-row card: photo left (contain — whole product, crisp), body right with
a filled fully-SQUARED tag, then two-tone "zebra" Material / Temperature /
Typical-use rows. A red bar wipes across the top edge on hover. */
.apss-c-tile {
position: relative;
display: grid; grid-template-columns: 100px 1fr;
background: #fff;
border: 1px solid var(--apss-line);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
transition: box-shadow 180ms;
}
.apss-c-tile:hover { box-shadow: 0 8px 20px rgba(15,23,42,0.08); }
.apss-c-tile::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0;
background: var(--apss-red); transition: height 180ms; z-index: 3;
}
.apss-c-tile:hover::before { height: 3px; }
.apss-c-thumb {
background-color: var(--apss-bg-2);
background-size: contain; background-repeat: no-repeat; background-position: center;
border-right: 1px solid var(--apss-line-2);
}
.apss-c-body { display: flex; flex-direction: column; min-width: 0; }
.apss-c-hd { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px 8px; }
.apss-c-tile h3 {
font-size: 13.5px; font-weight: 700; margin: 0;
color: var(--apss-ink); line-height: 1.2; min-width: 0;
}
.apss-c-chip {
margin-left: auto; flex: 0 0 auto;
background: var(--apss-red); color: #fff;
font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
padding: 3px 8px; border-radius: 0; /* filled · FULLY squared */
line-height: 1.25; white-space: nowrap;
}
.apss-c-rows { font-size: 11.5px; }
.apss-c-r {
display: flex; justify-content: space-between; gap: 12px;
padding: 5px 12px; color: var(--apss-muted);
}
.apss-c-r:nth-child(even) { background: #fbfaf7; }
.apss-c-r:nth-child(odd) { background: #f6f8fb; }
.apss-c-r span { flex: 0 0 auto; }
.apss-c-r b { color: var(--apss-ink); font-weight: 600; text-align: right; min-width: 0; }
/* Keep three card rows visible without scrolling on shorter laptops. */
@media (max-height: 820px) {
.apss-curated { gap: 9px; }
.apss-c-tile { grid-template-columns: 88px 1fr; }
.apss-c-r { padding: 4px 12px; }
}
/* ---- dimension view: "all materials at this size" grouped article table ---- */
/* M16 — title with a red underline, counts inline */
.apss-dim-meta { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; border-bottom: 2px solid var(--apss-red); padding-bottom: 8px; }
.apss-dim-meta b { font-size: 17px; font-weight: 800; color: var(--apss-ink); letter-spacing: -0.01em; }
.apss-dim-meta small { color: var(--apss-muted); font-size: 12px; }
.apss-dim-wrap { border: 1px solid var(--apss-line); border-radius: 10px; overflow: hidden; }
.apss-dim-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; table-layout: fixed; }
/* H10 (softened) — light header, muted text, column dividers */
.apss-dim-tbl thead th {
background: #f6f8fb; color: var(--apss-muted); text-align: left; font-weight: 600;
font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase;
padding: 7px 9px; border-bottom: 1px solid var(--apss-line);
border-right: 1px solid var(--apss-line-2);
}
.apss-dim-tbl thead th:last-child { border-right: 0; }
.apss-dim-tbl thead th.r { text-align: right; }
/* Title × — match the digit size, sit centred (not small + raised) */
.apss-dim-x { font-size: 0.92em; vertical-align: -0.04em; margin: 0 1px; }
.apss-dim-grp td { background: #eef1f5; padding: 8px 10px; border-top: 2px solid var(--apss-red); }
.apss-dim-hd { display: flex; align-items: center; gap: 9px; }
.apss-dim-hd img, .apss-dim-noimg { width: 46px; height: 38px; object-fit: contain; background: #fff; border: 1px solid var(--apss-line-2); border-radius: 6px; flex: 0 0 auto; }
.apss-dim-hd b { font-size: 13px; color: var(--apss-ink); flex: 0 0 auto; }
.apss-dim-hd .apss-dim-tag { margin-left: auto; flex: 0 0 auto; background: var(--apss-red); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; padding: 3px 10px; white-space: nowrap; }
.apss-dim-tbl tbody td { padding: 6px 10px; color: var(--apss-muted); border-bottom: 1px solid var(--apss-line-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apss-dim-tbl td.apss-dim-s { color: var(--apss-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.apss-dim-tbl td.apss-dim-dim { color: var(--apss-ink); font-weight: 600; }
/* Stock column: wide enough for "In stock (29 690)" + sales unit, no clipping.
:has() scopes the widening to tables that actually have a stock column, so
the no-stock resolver mini-tables are untouched. SARCLA 2026-06-22. */
.apss-dim-tbl:has(td.apss-dim-stock) colgroup col:nth-last-child(2) { width: 16% !important; }
.apss-dim-tbl td.apss-dim-stock { overflow: visible; text-overflow: clip; }
.apss-dim-r { cursor: pointer; }
.apss-dim-r:hover td { background: #f7f8fa; }
.apss-dim-cert { white-space: normal !important; }
.apss-dim-pill { display: inline-block; background: rgba(46,125,50,0.12); color: var(--apss-green); font-size: 9.5px; font-weight: 600; padding: 1px 6px; border-radius: 2px; margin: 1px 3px 1px 0; white-space: nowrap; }
.apss-dim-none { color: var(--apss-muted); }
/* "see more" disclosure for >6 certifications — a tiny red arrow */
.apss-dim-more { display: inline; }
.apss-dim-more > summary { display: inline; cursor: pointer; list-style: none; color: var(--apss-red, #ed1b2f); font-size: 9.5px; font-weight: 700; padding: 1px 5px; white-space: nowrap; }
.apss-dim-more > summary::-webkit-details-marker { display: none; }
.apss-dim-more > summary::after { content: " ›"; font-weight: 800; }
.apss-dim-more[open] > summary::after { content: " ‹"; }
.apss-dim-act { text-align: center; white-space: nowrap; overflow: visible !important; padding-left: 4px !important; padding-right: 4px !important; }
.apss-dim-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: 0; cursor: pointer; vertical-align: middle; text-decoration: none; }
.apss-dim-btn.go { background: var(--apss-ink); color: #fff; }
.apss-dim-btn.cart { background: var(--apss-red); color: #fff; }
.apss-dim-btn:hover { filter: brightness(1.1); }
.apss-dim-btn svg { width: 16px; height: 16px; }
.apss-c-big, .apss-c-small {
position: relative;
border-radius: var(--apss-radius);
overflow: hidden;
text-decoration: none;
cursor: pointer;
transition: transform 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 220px;
isolation: isolate;
}
.apss-c-big:hover, .apss-c-small:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(15,23,42,0.18), 0 4px 10px rgba(15,23,42,0.08);
}
/* BIG card — split layout: red text panel on left, white photo panel on right.
No blending: the photo keeps its original white background but it's part of
the design (a deliberate inset), not an accident over the red. */
.apss-c-big {
display: grid;
grid-template-columns: 1.05fr 1fr; /* roughly half-half, text panel slightly wider */
background: #fff; /* right side base; left overrides via .apss-c-body */
color: #fff;
min-height: 220px;
overflow: hidden;
}
.apss-c-big .apss-c-img {
/* In-flow now (not absolute); occupies the right grid column. */
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #fff;
transition: transform 320ms cubic-bezier(.4,0,.2,1);
image-rendering: -webkit-optimize-contrast;
/* slight padding so product doesn't kiss the edges */
margin: 0;
}
.apss-c-big:hover .apss-c-img { transform: scale(1.04); }
.apss-c-big .apss-c-body {
position: relative; z-index: 2;
background: linear-gradient(135deg, var(--apss-red) 0%, var(--apss-red-2) 100%);
/* Generous top padding so the tag pill (absolute, top:14px) doesn't
overlap the title text. */
padding: 56px 26px 24px;
display: flex; flex-direction: column; justify-content: center;
}
.apss-c-big .apss-c-body::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.10), transparent 65%);
pointer-events: none;
}
.apss-c-big .apss-c-body h3 {
font-size: 30px; font-weight: 800; margin: 0 0 8px;
letter-spacing: -0.01em; color: #fff;
position: relative; z-index: 1;
}
.apss-c-big .apss-c-body p {
margin: 0 0 12px; font-size: 14.5px; line-height: 1.45;
color: rgba(255,255,255,0.95);
position: relative; z-index: 1;
}
.apss-c-tag {
position: absolute; top: 14px; left: 14px;
background: rgba(255,255,255,0.18);
color: #fff;
padding: 5px 11px; border-radius: 999px;
font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
text-transform: none;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
z-index: 3;
border: 1px solid rgba(255,255,255,0.20);
}
/* SMALL card — white, photo on top, body below. Red contour ties the card
visually to its red tag pill (CERTIFIED / BEST VALUE / FOOD GRADE). */
.apss-c-small {
background: #fff;
border: 1.5px solid var(--apss-red);
min-height: 220px;
/* DOM order is body → tag → img. Reverse so the photo sits on top. */
display: flex;
flex-direction: column-reverse;
}
.apss-c-small .apss-c-img {
height: 55%;
/* Soft cream/beige photo area — the original look the stakeholder approved.
The apsoparts photo's white bg sits visibly inside this beige tile (the
contrast is subtle), so the product is shown at full original colour with
no blending tricks. */
background-color: var(--apss-bg-2);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
transition: transform 320ms cubic-bezier(.4,0,.2,1);
image-rendering: -webkit-optimize-contrast;
}
.apss-c-small:hover .apss-c-img { transform: scale(1.04); }
.apss-c-small .apss-c-body { padding: 14px 16px 16px; }
.apss-c-small .apss-c-body h3 {
font-size: 17px; font-weight: 700; margin: 0 0 3px;
letter-spacing: -0.005em; color: var(--apss-ink);
}
.apss-c-small .apss-c-body p {
margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: var(--apss-muted);
}
.apss-c-tag.small {
position: absolute; top: 10px; left: 10px;
/* Red tag pill matches the card's red contour */
background: var(--apss-red); color: #fff;
border: 1px solid var(--apss-red-2);
-webkit-backdrop-filter: none; backdrop-filter: none;
font-size: 10px;
box-shadow: 0 2px 6px rgba(200,40,31,0.30);
/* original `padding: 4px 9px` continues on next line */
padding: 4px 9px;
z-index: 3;
}
/* spec bullets shown on both BIG and SMALL — short technical points */
.apss-c-specs {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 5px;
}
.apss-c-big .apss-c-specs li {
position: relative;
padding-left: 16px;
font-size: 13px;
line-height: 1.4;
z-index: 1; /* above the radial-gradient ::after */
}
.apss-c-small .apss-c-specs li {
position: relative;
padding-left: 16px;
font-size: 12.5px;
line-height: 1.4;
}
.apss-c-big .apss-c-specs li {
/* Solid white — the translucent 0.85 read poorly on the red gradient,
especially the small "Température…" detail line. */
color: #fff;
font-weight: 500;
}
.apss-c-small .apss-c-specs li {
color: var(--apss-ink-2);
}
.apss-c-big .apss-c-specs li::before,
.apss-c-small .apss-c-specs li::before {
content: ""; position: absolute; left: 0; top: 7px;
width: 6px; height: 6px; border-radius: 50%;
background: currentColor; opacity: 0.55;
}
.apss-c-big .apss-c-specs li::before { opacity: 0.9; } /* visible white dot on red */
@media (max-width: 760px) {
.apss-crow { grid-template-columns: 1fr; }
.apss-c-big { grid-template-columns: 1fr; min-height: 360px; }
.apss-c-big .apss-c-img { height: 160px; }
.apss-c-small { min-height: 240px; }
}
/* material */
.apss-mhero { background: linear-gradient(135deg, var(--apss-ink) 0%, #274e64 100%); color: #fff; border-radius: var(--apss-radius); padding: 24px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; }
.apss-mhero::after { content: ""; position: absolute; right: -50px; bottom: -50px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%); border-radius: 50%; }
.apss-mhero h2 { margin: 0; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.apss-mhero .lbl { font-size: 11px; letter-spacing: 0.04em; text-transform: none; opacity: 0.75; font-weight: 600; }
.apss-mhero p { margin: 12px 0; opacity: 0.85; font-size: 13.5px; line-height: 1.5; color: #fff; }
.apss-mmeta { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; position: relative; z-index: 1; }
.apss-mmeta div { font-size: 11px; opacity: 0.7; }
.apss-mmeta b { display: block; font-size: 15px; opacity: 1; margin-top: 2px; }
.apss-mcats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-content: start; position: relative; z-index: 1; }
.apss-mcat { background: rgba(255,255,255,0.10); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; font-size: 12.5px; cursor: pointer; transition: all 200ms; border: 1px solid rgba(255,255,255,0.08); color: #fff; }
.apss-mcat:hover { background: rgba(255,255,255,0.20); transform: translateX(2px); }
.apss-mcat .ic { font-size: 18px; opacity: 0.85; }
.apss-mcat b { display: block; font-weight: 600; }
.apss-mcat small { display: block; opacity: 0.7; font-size: 10.5px; margin-top: 1px; }
/* product grid */
/* Each alternatives section is ALWAYS one horizontal row. If more than
4 cards exist the row scrolls horizontally — never wraps to a 2nd row.
Multiple sections (elasticity / material / eshop-rule alts) STACK as
separate one-row strips. Matches the look of the material .apss-mslider. */
.apss-pgrid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 190px;
gap: 12px;
overflow-x: auto;
padding-bottom: 16px; /* room for the scrollbar on hover */
scroll-snap-type: x mandatory;
justify-content: start; /* anchor cards at the left edge */
}
.apss-pgrid > .apss-pcard { scroll-snap-align: start; }
/* Placeholder for the "All possibilities" comparison table (Phase 3). */
.apss-alt-table-stub {
background: var(--apss-bg-2);
border: 1px dashed var(--apss-line);
border-radius: 8px;
padding: 18px 22px;
text-align: center;
}
.apss-alt-table-stub p {
margin: 0; font-size: 12.5px; color: var(--apss-muted); line-height: 1.5;
}
/* ──────────────────────────────────────────────────────────────────────
NORMATEC / HITEC split layout — active brand fills 2/3, the other is
a red collapsed strip on the side. Click the strip to swap which
brand is expanded. Only rendered when the dim has BOTH a NORMATEC
article AND a HITEC equivalent.
────────────────────────────────────────────────────────────────────── */
.apss-brand-split {
display: grid;
gap: 12px;
margin-bottom: 18px;
align-items: stretch; /* both panes share the active pane's height */
}
.apss-brand-split[data-active="normatec"] {
grid-template-columns: 2fr 1fr;
}
.apss-brand-split[data-active="hitec"] {
grid-template-columns: 1fr 2fr;
}
/* Re-order panes so the collapsed strip sits on the correct side */
.apss-brand-split[data-active="hitec"] .apss-brand-active-hitec { order: 2; }
.apss-brand-split[data-active="hitec"] .apss-brand-collapsed-normatec{ order: 1; }
.apss-brand-split[data-active="normatec"] .apss-brand-collapsed { order: 2; }
/* Two-card top row: NORMATEC + HITEC side-by-side when both variants
exist for the dim. No more red collapsed pane, no swap toggle. */
.apss-brand-row {
display: grid;
gap: 12px;
margin-bottom: 18px;
align-items: stretch;
}
.apss-brand-row-two { grid-template-columns: 1fr 1fr; }
.apss-brand-row-one { grid-template-columns: 1fr; }
.apss-brand-cell { display: flex; }
.apss-brand-cell > .apss-art { flex: 1; }
/* Legacy collapsed-pane CSS below kept dormant for older HTML; the new
layout doesn't render these classes. */
.apss-brand-split { align-items: stretch; }
.apss-brand-collapsed {
display: flex; flex-direction: column; gap: 8px;
align-items: stretch; justify-content: flex-start;
background: var(--apss-red) !important;
color: #fff;
border: 0; border-radius: var(--apss-radius);
padding: 12px;
cursor: pointer;
text-align: left;
transition: filter 150ms;
height: 100%; /* stretch to the row height set by the active card */
min-height: 0;
overflow: hidden;
outline: none; /* never show the browser blue focus ring */
-webkit-tap-highlight-color: transparent;
}
.apss-brand-collapsed:hover,
.apss-brand-collapsed:focus,
.apss-brand-collapsed:focus-visible,
.apss-brand-collapsed:active {
/* No hover/focus colour change — only a subtle inner highlight via
filter so the click feedback isn't a jarring colour flip. */
filter: brightness(1.05);
background: var(--apss-red) !important;
outline: none;
box-shadow: none;
}
/* Header: arrow + brand pill on a single row */
.apss-brand-collapsed-head {
display: flex; align-items: center; gap: 10px;
color: #fff;
}
.apss-brand-collapsed-arrow {
font: 700 22px/1 Arial, system-ui, sans-serif;
opacity: 0.95;
}
.apss-brand-collapsed-pill {
font: 800 13px/1 Arial, system-ui, sans-serif;
letter-spacing: 0.10em;
background: rgba(255,255,255,0.18);
padding: 4px 10px;
border-radius: 3px;
}
/* White preview card inside the red panel — looks like a mini article */
.apss-brand-collapsed-preview {
display: flex; flex-direction: column;
background: #fff;
border-radius: 6px;
padding: 12px;
gap: 4px;
flex: 1; min-height: 0;
color: var(--apss-ink);
overflow: hidden;
}
.apss-brand-collapsed-thumb {
width: 100%;
max-height: 140px; /* cap so the panel doesn't grow tall */
aspect-ratio: 16 / 11;
display: flex; align-items: center; justify-content: center;
background: var(--apss-bg-2);
border-radius: 4px;
margin-bottom: 4px;
overflow: hidden;
}
.apss-brand-collapsed-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; }
.apss-brand-collapsed-thumb svg { width: 44px; height: 44px; }
.apss-brand-collapsed-title {
font: 700 16px/1.25 Arial, system-ui, sans-serif;
color: var(--apss-ink);
}
.apss-brand-collapsed-desc {
font: 500 13px/1.4 Arial, system-ui, sans-serif;
color: var(--apss-ink-2);
}
.apss-brand-collapsed-attrs {
display: flex; flex-direction: column; gap: 3px;
font: 500 13px/1.45 Arial, system-ui, sans-serif;
color: var(--apss-ink-2);
margin: 6px 0;
}
.apss-brand-collapsed-attrs > span {
display: block;
}
.apss-brand-collapsed-attrs b {
font-weight: 700;
color: var(--apss-ink);
font-size: 13.5px;
}
.apss-brand-collapsed-sku {
margin-top: auto;
padding: 3px 9px;
align-self: flex-start;
background: #f1f3f5;
border-radius: 3px;
font: 700 12px/1.4 "Menlo", "Consolas", monospace;
color: #274e64;
}
/* Active-pane wrapper — the .apss-art inside takes the full pane */
.apss-brand-active,
.apss-brand-active-hitec { display: block; }
/* Small brand pill inside the breadcrumb of the active pane */
.apss-art-bc-brand {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font: 700 10.5px/1 Arial, system-ui, sans-serif;
letter-spacing: 0.10em;
text-transform: uppercase;
}
.apss-art-bc-normatec { background: var(--apss-ink); color: #fff; }
.apss-art-bc-hitec { background: var(--apss-red); color: #fff; }
/* Certifications row — same min-height on both brands so the active
article card stays the SAME height whether the brand is NORMATEC
(single "Standard · general mechanic" pill) or HITEC (5 cert pills
wrapping over 2-3 lines). Without this, swapping brands made the
collapsed pane resize visibly. */
.apss-art-certs {
display: flex; flex-wrap: wrap; gap: 4px;
min-height: 60px; /* room for ~3 lines of cert pills */
align-content: flex-start;
}
.apss-art-certs span {
display: inline-block;
padding: 2px 8px;
background: rgba(46,125,50,0.12);
color: var(--apss-green);
border-radius: 3px;
font: 600 11px/1.4 Arial, system-ui, sans-serif;
height: fit-content;
}
/* Brand tabs (NORMATEC / HITEC) — full-square, no rounded edges, no blue
hover. Active = navy underline + bold; inactive = muted text. */
.apss-brand-tabs {
display: flex; gap: 0;
border-bottom: 1px solid var(--apss-line);
margin-bottom: 12px;
}
.apss-brand-tabs button {
flex: 0 0 auto;
padding: 10px 22px;
background: #fff;
border: 1px solid var(--apss-line);
border-bottom: 0;
border-radius: 0;
font: 700 12px/1 Arial, system-ui, sans-serif;
letter-spacing: 0.08em;
color: var(--apss-muted);
cursor: pointer;
margin-right: -1px; /* collapse adjacent borders */
transition: color 150ms, background 150ms;
}
.apss-brand-tabs button:hover { color: var(--apss-ink); background: #fafaf7; }
.apss-brand-tabs button.active {
color: var(--apss-ink);
background: #fff;
border-color: var(--apss-line);
position: relative;
z-index: 1;
}
.apss-brand-tabs button.active::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: var(--apss-red);
}
/* Shore-hardness chip strip — clickable filter pills.
Lives INSIDE the article card (between badges and attrs). Renders only
shores that actually have a stock article for this brand × dim. */
.apss-shore-strip {
display: flex; align-items: center; gap: 6px;
margin: 10px 0 14px;
flex-wrap: wrap;
}
.apss-shore-lbl {
font: 700 10px/1 Arial, system-ui, sans-serif;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--apss-muted);
margin-right: 4px;
}
.apss-shore-chip {
min-width: 38px; height: 28px;
padding: 0 10px;
background: #fff;
border: 1px solid var(--apss-line);
border-radius: 3px;
font: 600 12px/1 Arial, system-ui, sans-serif;
color: var(--apss-ink-2);
cursor: pointer;
transition: all 150ms;
}
.apss-shore-chip:hover { border-color: var(--apss-red); color: var(--apss-red); }
/* Active Shore = apsoparts red (was navy — too cold against the brand) */
.apss-shore-chip.active {
background: var(--apss-red);
border-color: var(--apss-red);
color: #fff;
}
.apss-shore-chip.active:hover { filter: brightness(0.95); color: #fff; border-color: var(--apss-red); }
/* Richer alt-card body — Material/Shore + Colour + Certifications */
.apss-pcard-attrs {
display: flex; flex-wrap: wrap; gap: 4px;
margin: 4px 0 6px;
}
.apss-pcard-attr {
display: inline-block;
padding: 1px 6px; border-radius: 2px;
background: rgba(28,43,74,0.06);
font: 600 10.5px/1.4 Arial, system-ui, sans-serif;
color: var(--apss-ink-2);
}
.apss-pcard-attr-c {
background: rgba(28,43,74,0.10);
}
.apss-pcard-attr-cert {
background: rgba(46,125,50,0.12);
color: var(--apss-green);
}
/* All-possibilities table — full attribute comparison */
/* Shares the dimension-view design language (M16 title / H10 header /
square cart button) so the two result tables read as one system. */
.apss-alttbl-wrap {
overflow-x: auto;
border: 1px solid var(--apss-line);
border-radius: 10px;
background: #fff;
}
.apss-alttbl {
width: 100%;
border-collapse: collapse;
font: 400 11.5px/1.4 Arial, system-ui, sans-serif;
}
.apss-alttbl thead th {
text-align: left;
padding: 7px 9px;
background: #f6f8fb;
border-bottom: 1px solid var(--apss-line);
border-right: 1px solid var(--apss-line-2);
font-weight: 600; font-size: 9px;
letter-spacing: 0.03em; text-transform: uppercase;
color: var(--apss-muted);
white-space: nowrap;
}
.apss-alttbl thead th:last-child { border-right: 0; }
.apss-alttbl thead th.r { text-align: right; }
.apss-alttbl tbody td {
padding: 6px 10px;
border-bottom: 1px solid var(--apss-line-2);
color: var(--apss-muted);
vertical-align: middle;
white-space: nowrap;
}
.apss-alttbl tbody tr:last-child td { border-bottom: 0; }
.apss-alttbl-row { cursor: pointer; }
.apss-alttbl-row:hover td { background: #f7f8fa; }
.apss-alttbl-row.is-exact { background: rgba(46,125,50,0.05); }
.apss-alttbl-row.is-exact:hover td { background: rgba(46,125,50,0.10); }
.apss-alttbl-sku { color: var(--apss-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.apss-alttbl-act { text-align: center; white-space: nowrap; padding-left: 4px !important; padding-right: 4px !important; }
.apss-alttbl-add {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 30px;
background: var(--apss-red); color: #fff;
border-radius: 0;
text-decoration: none;
transition: filter 150ms;
}
/* color:#fff must beat the global `.apss-drop a { color: inherit }` reset
(which otherwise makes currentColor = the muted td colour). */
.apss-drop a.apss-alttbl-add { color: #fff; }
.apss-alttbl-add svg { width: 16px; height: 16px; display: block; stroke: #fff; }
.apss-alttbl-add:hover { filter: brightness(1.1); }
/* Stock column — placeholder until per-customer stock is enabled.
Real wiring: query apsoparts after login + show qty / lead-time. */
.apss-alttbl-stock { white-space: nowrap; }
.apss-stock-pending {
display: inline-block;
padding: 2px 8px;
background: rgba(28,43,74,0.06);
border-radius: 2px;
font: 600 10.5px/1.4 Arial, system-ui, sans-serif;
color: var(--apss-muted);
}
/* Brand pill in the comparison table — navy for NORMATEC, red for HITEC,
purple-ish for premium FFKM brands (EVOLAST / KALREZ). Compact chip. */
.apss-brand-pill {
display: inline-block;
padding: 2px 8px; border-radius: 3px;
font: 700 10.5px/1.4 Arial, system-ui, sans-serif;
letter-spacing: 0.06em;
color: #fff; background: var(--apss-muted);
white-space: nowrap;
}
.apss-brand-pill-normatec { background: var(--apss-ink); }
.apss-brand-pill-hitec { background: var(--apss-red); }
.apss-brand-pill-evolast { background: #6366f1; }
.apss-brand-pill-kalrez { background: #8b5cf6; }
.apss-brand-pill-fepseal { background: #0891b2; }
.apss-brand-pill-pertec { background: #059669; }
.apss-brand-pill-apsoseal { background: #475569; }
/* Certifications column — green pills for actual certs, muted "standard"
text for NORMATEC ("Standard · general mechanic"). */
.apss-alttbl tbody td.apss-alttbl-cert { white-space: normal; max-width: 240px; }
.apss-cert-pill {
display: inline-block;
padding: 1px 6px; margin: 1px 3px 1px 0;
background: rgba(46,125,50,0.12);
color: var(--apss-green);
border-radius: 2px;
font: 600 9.5px/1.4 Arial, system-ui, sans-serif;
white-space: nowrap;
}
.apss-cert-none {
display: inline-block;
padding: 2px 7px;
background: rgba(28,43,74,0.04);
color: var(--apss-muted);
border-radius: 2px;
font: 400 10.5px/1.4 Arial, system-ui, sans-serif;
font-style: italic;
}
/* Reuse the .apss-mslider scrollbar styling (8 px at rest, 14 px on hover,
red thumb). Mirror the rules so both sliders behave identically. */
.apss-pgrid {
scrollbar-color: rgba(28,43,74,0.30) rgba(28,43,74,0.04);
scrollbar-width: thin;
}
.apss-pgrid:hover, .apss-pgrid:focus-within {
scrollbar-width: auto;
scrollbar-color: var(--apss-red) rgba(200,40,31,0.08);
}
.apss-pgrid::-webkit-scrollbar { height: 8px; transition: height 200ms; }
.apss-pgrid:hover::-webkit-scrollbar,
.apss-pgrid:focus-within::-webkit-scrollbar { height: 14px; }
.apss-pgrid::-webkit-scrollbar-track { background: rgba(28,43,74,0.04); border-radius: 8px; margin: 0 4px; }
.apss-pgrid:hover::-webkit-scrollbar-track,
.apss-pgrid:focus-within::-webkit-scrollbar-track { background: rgba(200,40,31,0.08); }
.apss-pgrid::-webkit-scrollbar-thumb {
background: rgba(28,43,74,0.30);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
}
.apss-pgrid:hover::-webkit-scrollbar-thumb,
.apss-pgrid:focus-within::-webkit-scrollbar-thumb {
background: var(--apss-red);
background-clip: padding-box;
min-width: 60px;
}
/* ── Unified scrollbars (app-wide) ─────────────────────────────────────────
Every scrollable area in the widget uses ONE design: slim RED at rest,
growing thicker (still red) on hover — vertical AND horizontal, the panel
itself and all descendants. Overrides the older per-element styles above.
SARCLA 2026-06-16. */
/* Invisible at rest — the thumb is transparent and only appears (red, bigger)
when you hover the scrollable area. */
.apss-drop, .apss-drop * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.apss-drop:hover, .apss-drop *:hover { scrollbar-color: var(--apss-red) transparent; }
.apss-drop::-webkit-scrollbar,
.apss-drop *::-webkit-scrollbar { width: 7px; height: 7px; transition: width 160ms ease, height 160ms ease; }
.apss-drop::-webkit-scrollbar-track,
.apss-drop *::-webkit-scrollbar-track { background: transparent; margin: 0; }
.apss-drop::-webkit-scrollbar-thumb,
.apss-drop *::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; border: 0; min-width: 0; transition: background 160ms ease; }
/* on hover: thumb becomes red AND the bar grows a little */
.apss-drop:hover::-webkit-scrollbar,
.apss-drop *:hover::-webkit-scrollbar { width: 11px; height: 11px; }
.apss-drop:hover::-webkit-scrollbar-thumb,
.apss-drop *:hover::-webkit-scrollbar-thumb { background: var(--apss-red); }
.apss-drop::-webkit-scrollbar-thumb:hover,
.apss-drop *::-webkit-scrollbar-thumb:hover { background: var(--apss-red-2, #a8121f); }
.apss-drop::-webkit-scrollbar-corner,
.apss-drop *::-webkit-scrollbar-corner { background: transparent; }
.apss-pcard {
position: relative; /* anchor for the absolute .apss-pcard-cart "+" icon */
background: #fff;
border-radius: 3px;
border: 1px solid var(--apss-line);
padding: 10px;
display: flex; flex-direction: column;
color: inherit;
transition: border-color 150ms, box-shadow 150ms;
overflow: hidden; /* clip any child that tries to escape */
}
.apss-pcard:hover { border-color: var(--apss-red); }
.apss-pcard-body {
display: flex; flex-direction: column; gap: 4px;
color: inherit; text-decoration: none;
cursor: pointer;
}
.apss-pcard-img {
position: relative; /* anchor for the absolute alt-tag chip */
width: 100%; aspect-ratio: 1; border-radius: 8px;
background: var(--apss-bg-2);
margin-bottom: 10px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.apss-pcard-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.apss-pcard-img .fb { font-size: 36px; opacity: 0.45; }
.apss-pcard-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; margin: 0 0 4px; color: var(--apss-ink); }
.apss-pcard-meta { font-size: 11px; color: var(--apss-muted); margin-top: auto; }
.apss-pcard-sku {
display: inline-block;
padding: 1px 6px; border-radius: 3px;
background: #f1f3f5;
color: #274e64; font-weight: 700;
font-family: "Menlo", "Consolas", monospace;
letter-spacing: 0.02em;
font-size: 10.5px;
}
/* "+ Add to cart" cart icon, top-right corner of the card image.
This is the ONLY click target on the card that adds-to-cart — the
rest of the card opens the product page (deep-linked via ?sku=). */
.apss-pcard-cart {
position: absolute;
top: 8px; right: 8px;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--apss-red);
border-radius: 3px;
text-decoration: none;
cursor: pointer;
z-index: 2;
transition: filter 150ms;
}
.apss-pcard-cart:hover { filter: brightness(0.88); }
.apss-pcard-cart svg { width: 14px; height: 14px; display: block; }
.apss-pcard-img { position: relative; } /* so the cart icon anchors here */
/* =================================================================
MATERIAL VIEW (new layout)
Row 1: red hero card (left) + O-ring configurator (right)
Rows 2-4: horizontal sliders per category
================================================================= */
.apss-mat-row1 {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 14px;
margin-bottom: 22px;
}
/* ===== Agreed material banner: header strip · body (code+spec | animation) ·
tabs bar. White card, red family badge, centered code watermark, real
hardness + homologations line. SARCLA 2026-06-15. ===== */
.apss-mat-banner { background: #fff; color: var(--apss-ink); border: 1px solid var(--apss-line); border-radius: var(--apss-radius); overflow: hidden; margin-bottom: 18px; }
.apss-mat-bhead { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--apss-line); background: #fafbfc; }
.apss-mat-fam { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #fff; background: var(--apss-red); border-radius: 4px; padding: 3px 9px; }
.apss-mat-crumb { font-size: 12px; color: var(--apss-muted); }
/* min-height so the banner is the SAME size for sealings and plastics (NBR ref);
wider animation column so it fills the gap and the Try-it flow isn't cramped */
/* Split 50/50 body (layout 10): code+description on the left, specs on the
right, vertical divider between. Animation removed; no watermark. SARCLA 2026-06-16. */
.apss-mat-bbody { position: relative; display: flex; padding: 0; min-height: 0; }
.apss-mat-bcol-l { flex: 1 1 0; min-width: 0; padding: 18px; border-right: 1px solid var(--apss-line); }
.apss-mat-bcol-r { flex: 1 1 0; min-width: 0; padding: 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.apss-mat-banim, .apss-mat-wm { display: none; }
/* Ease the load transition so the skeleton→content swap doesn't flash. */
@keyframes apssMatFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.apss-mat-banner, .apss-mat-grid { animation: apssMatFade 200ms ease-out; }
.apss-mat-bid { position: relative; z-index: 1; }
.apss-mat-bcode { margin: 0; font: 700 44px/1 var(--apss-font-head); letter-spacing: -0.02em; color: var(--apss-ink); }
.apss-mat-bdesc { margin: 22px 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--apss-ink-2); }
.apss-mat-homoline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; position: relative; z-index: 1; }
.apss-mat-hard { font: 800 11px/1 var(--apss-font-body); color: #fff; background: var(--apss-ink); border-radius: 3px; padding: 3px 8px; }
.apss-mat-homo { font: 700 10px/1.5 var(--apss-font-body); color: #2e7d32; background: #e7f4e8; border: 1px solid #bfe2c2; border-radius: 3px; padding: 2px 7px; }
.apss-mat-meta { display: flex; gap: 22px; }
.apss-mat-meta div { font-size: 11px; color: var(--apss-muted); }
.apss-mat-meta b { display: block; font-size: 16px; color: var(--apss-ink); margin-top: 2px; font-weight: 800; }
.apss-mat-banim { position: relative; z-index: 1; }
/* Both animation boxes share one height so the sealing & plastic banners match. */
.apss-mat-banim .apss-mat-cfg.apss-mat-hint, .apss-mat-banim .apss-c2sc { margin: 0; min-height: 190px; box-sizing: border-box; }
/* ===== Compact C2S animation (plastics) — sized to match the Try-it box so
the plastic banner is the same height as the sealing (NBR) banner. ===== */
.apss-c2sc { background: var(--apss-bg-2); border: 1px solid var(--apss-line); border-radius: 12px; padding: 14px; }
.apss-c2sc-l { font: 700 10px/1 var(--apss-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--apss-muted); margin-bottom: 8px; }
.apss-c2sc-card { display: flex; gap: 9px; align-items: center; background: #fff; border: 1px solid var(--apss-red); box-shadow: 0 2px 10px rgba(200,40,31,.10); border-radius: 8px; padding: 7px 10px; position: relative; }
.apss-c2sc-thumb { width: 34px; height: 26px; border-radius: 3px; overflow: hidden; flex: 0 0 auto; background: var(--apss-bg-2); display: flex; align-items: center; justify-content: center; }
.apss-c2sc-thumb img { width: 100%; height: 100%; object-fit: contain; }
.apss-c2sc-info { min-width: 0; flex: 1; }
.apss-c2sc-nm { font: 700 11px/1.2 var(--apss-font-body); color: var(--apss-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apss-c2sc-art { font: 600 9px/1.3 var(--apss-font-body); color: var(--apss-muted); }
.apss-c2sc-saw { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--apss-red); color: #fff; display: flex; align-items: center; justify-content: center; animation: apssC2scPulse 1.6s ease-in-out infinite; }
.apss-c2sc-saw svg { width: 13px; height: 13px; }
@keyframes apssC2scPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(237,27,47,.5); } 50% { box-shadow: 0 0 0 7px rgba(237,27,47,0); } }
.apss-c2sc-form { display: flex; gap: 6px; margin-top: 10px; }
.apss-c2sc-field { flex: 1; display: flex; align-items: center; gap: 5px; border: 1px solid var(--apss-line); border-radius: 6px; background: #fff; padding: 5px 7px; min-width: 0; }
.apss-c2sc-field i { font-style: normal; font: 700 9px/1 var(--apss-font-body); color: var(--apss-muted-2); text-transform: uppercase; }
.apss-c2sc-box { flex: 1; font: 600 11px/1 ui-monospace, Menlo, monospace; color: var(--apss-ink); overflow: hidden; white-space: nowrap; min-width: 0; }
.apss-c2sc-v { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation: apssC2scReveal 7s ease-in-out infinite; }
.apss-c2sc-len { --w: 4ch; animation-delay: .3s; } .apss-c2sc-wid { --w: 3ch; animation-delay: 1.5s; } .apss-c2sc-qty { --w: 1ch; animation-delay: 2.7s; }
@keyframes apssC2scReveal { 0% { width: 0; } 7% { width: var(--w); } 86% { width: var(--w); } 94%,100% { width: 0; } }
.apss-c2sc-btn { margin-top: 10px; width: 100%; background: var(--apss-red); color: #fff; border: 0; border-radius: 7px; padding: 8px; font: 800 11.5px/1 var(--apss-font-body); cursor: pointer; animation: apssC2scFlash 7s ease-in-out infinite; }
@keyframes apssC2scFlash { 0%,55% { box-shadow: 0 0 0 0 rgba(237,27,47,0); } 62% { box-shadow: 0 0 0 4px rgba(237,27,47,.35); } 70%,100% { box-shadow: 0 0 0 0 rgba(237,27,47,0); } }
/* tabs bar (All · categories) — emphasised, filter the grid in-page */
/* Big blocky tabs (layout 04): equal-width blocks, active = full red.
Compact height since the banner no longer shows the animation. */
/* flex-wrap so a category with many groups (e.g. Profiles, 9 tabs) flows onto
a second row instead of squishing every label to an ellipsis. min-width keeps
each tab readable; few-tab bars (RWDR/X-ring/plates) still fill one row. */
.apss-mat-btabs { display: flex; flex-wrap: wrap; border-top: 1px solid var(--apss-line); }
.apss-mat-btabs .apss-mat-tab {
flex: 1 1 auto; min-width: 140px; text-align: center; padding: 12px 18px; font: 600 13.5px/1.15 var(--apss-font-body); text-transform: none;
letter-spacing: .01em; color: var(--apss-ink); background: #fff; border: 0; border-right: 1px solid var(--apss-line);
border-bottom: 3px solid var(--apss-tabc, var(--apss-line));
cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: all 140ms; }
.apss-mat-btabs .apss-mat-tab:last-child { border-right: 0; }
.apss-mat-btabs .apss-mat-tab:hover { background: #fafbfc; }
/* Active tab fills with its own category colour (All = red). No accent line —
just the colour; white label at a readable weight. */
.apss-mat-btabs .apss-mat-tab.active { color: #fff; font-weight: 600; background: var(--apss-tabc, var(--apss-red)); border-bottom-color: var(--apss-tabc, var(--apss-red)); }
/* RWDR second row = DIN 3760 form/type filter — neutral slate accent + dashed
separator so it reads as a distinct axis from the coloured material row.
SARCLA 2026-06-30. */
.apss-mat-btabs.apss-rwdr-ftabs { --apss-tabc: #475569; border-top-style: dashed; }
.apss-mat-btabs.apss-rwdr-ftabs .apss-mat-tab { min-width: 90px; font-size: 12.5px; }
/* Many tabs (e.g. the O-ring material chooser, 9 tabs) → balanced rows that
STILL fill the full width. Count-scoped via :has() so ≤6-tab pages (NBR,
PVC …) keep their single filled row. flex-grow stretches each line (incl. the
last) edge-to-edge; the basis sets how many per row: 7-8→4, 9-10→5, 11-12→6. */
.apss-mat-btabs:has(.apss-mat-tab:nth-child(7)) .apss-mat-tab { flex-basis: 24%; min-width: 0; }
.apss-mat-btabs:has(.apss-mat-tab:nth-child(9)) .apss-mat-tab { flex-basis: 19%; min-width: 0; }
.apss-mat-btabs:has(.apss-mat-tab:nth-child(11)) .apss-mat-tab { flex-basis: 15.5%; min-width: 0; }
.apss-mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-top: 2px; }
/* Sealing-technology aggregate launcher (generic "joint"/"seal"/"sealing"). */
.apss-agg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 4px; }
.apss-agg-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px; border: 1px solid var(--apss-line, rgba(28,43,74,.14)); border-left: 4px solid var(--ac, #d80901); border-radius: 10px; background: #fff; cursor: pointer; font: 650 14px/1.2 var(--apss-font-body); color: var(--apss-ink, #1c2b4a); text-align: left; transition: box-shadow .14s, transform .14s; }
.apss-agg-tile:hover { box-shadow: 0 8px 20px -12px rgba(0,0,0,.35); transform: translateY(-1px); }
.apss-agg-go { color: var(--ac, #d80901); font-weight: 700; font-size: 16px; }
.apss-mat-subs {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columns instead of 5 rows */
gap: 8px;
position: relative; z-index: 1;
}
/* High-specificity selectors so the chip text NEVER inherits white from the
red hero, and so the global `.apss-drop a { color: inherit }` reset can't
over-ride us. Bumped on 2026-05-20 — buttons matched too small to the
bigger NBR hero, the plastics view felt cramped. */
.apss-mat-hero a.apss-mat-sub,
.apss-drop .apss-mat-hero a.apss-mat-sub {
display: block;
background: #fff !important;
color: var(--apss-red) !important;
border: 1px solid #f3c9ce;
padding: 11px 14px;
border-radius: 8px;
font-size: 14.5px; font-weight: 700;
letter-spacing: 0.005em;
cursor: pointer; transition: all 180ms;
text-decoration: none;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.apss-mat-hero a.apss-mat-sub:hover {
background: #fff !important;
color: var(--apss-red-2) !important;
transform: translateY(-2px);
box-shadow: 0 3px 10px rgba(0,0,0,0.10);
}
.apss-mat-hero a.apss-mat-sub:visited,
.apss-mat-hero a.apss-mat-sub:active,
.apss-mat-hero a.apss-mat-sub:focus {
color: var(--apss-red) !important;
}
/* O-ring configurator */
.apss-mat-cfg {
background: #fff;
border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
padding: 18px 20px 20px;
display: flex; flex-direction: column;
}
.apss-mat-cfg-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.apss-mat-cfg-head h3 {
margin: 0; font-size: 16px; font-weight: 700; color: var(--apss-ink);
letter-spacing: -0.005em;
}
.apss-mat-cfg-tabs {
display: inline-flex;
background: var(--apss-bg-2);
padding: 3px; border-radius: 999px;
gap: 2px;
}
.apss-mat-cfg-tabs button {
appearance: none; border: 0; background: transparent;
padding: 6px 12px; border-radius: 999px;
font-size: 11px; font-weight: 600; color: var(--apss-muted);
letter-spacing: 0.04em; cursor: pointer; transition: all 180ms;
font-family: inherit;
}
.apss-mat-cfg-tabs button small {
font-weight: 400; font-size: 10px; opacity: 0.7; margin-left: 4px;
text-transform: none; letter-spacing: 0;
}
.apss-mat-cfg-tabs button.active {
background: var(--apss-red); color: #fff;
box-shadow: 0 2px 6px rgba(200,40,31,0.30);
}
.apss-mat-cfg-tabs button.active small { color: rgba(255,255,255,0.85); }
.apss-mat-cfg-inputs {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin-bottom: 14px;
}
.apss-mat-cfg-inputs label {
display: flex; flex-direction: column; gap: 4px;
font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--apss-muted);
}
.apss-mat-cfg-inputs input {
border: 1.5px solid var(--apss-line);
border-radius: 8px;
padding: 9px 12px; font: 600 15px/1 inherit;
color: var(--apss-ink);
outline: 0; transition: border-color 180ms, box-shadow 180ms;
}
.apss-mat-cfg-inputs input:focus {
border-color: var(--apss-red);
box-shadow: 0 0 0 3px rgba(200,40,31,0.10);
}
.apss-mat-cfg-result { flex: 1; min-height: 110px; }
.apss-mat-cfg-hint {
margin: 0; padding: 18px;
font-size: 13px; color: var(--apss-muted);
background: var(--apss-bg-2);
border-radius: 10px;
text-align: center;
}
.apss-mat-cfg-card {
display: grid; grid-template-columns: 96px 1fr 130px; gap: 14px;
align-items: center;
background: var(--apss-bg-2);
border-radius: 10px;
padding: 12px;
}
.apss-mat-cfg-img {
width: 96px; height: 96px; border-radius: 8px;
background: #fff;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.apss-mat-cfg-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.apss-mat-cfg-img .fb { font-size: 40px; opacity: 0.45; }
.apss-mat-cfg-info { min-width: 0; }
.apss-mat-cfg-brand { font-size: 11px; letter-spacing: 0.01em; text-transform: none; color: var(--apss-red); font-weight: 600; }
.apss-mat-cfg-info h4 {
margin: 4px 0 4px; font-size: 14px; font-weight: 700;
color: var(--apss-ink); line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apss-mat-cfg-sku { font: 500 11px ui-monospace,Menlo,monospace; color: var(--apss-muted); }
.apss-mat-cfg-pdp { font-size: 11px; color: var(--apss-red); text-decoration: none; font-weight: 600; }
.apss-mat-cfg-pdp:hover { text-decoration: underline; }
.apss-mat-cfg-buy { display: flex; flex-direction: column; gap: 6px; }
.apss-mat-cfg-buy .apss-qty {
display: grid; grid-template-columns: 26px 1fr 26px;
border: 1px solid var(--apss-line); border-radius: 999px; overflow: hidden;
background: #fff;
}
.apss-mat-cfg-buy .apss-qty button { width: 26px; background: transparent; border: 0; font-size: 14px; color: var(--apss-ink-2); cursor: pointer; }
.apss-mat-cfg-buy .apss-qty button:hover { background: var(--apss-cream); color: var(--apss-red); }
.apss-mat-cfg-buy .apss-qty input { border: 0; outline: 0; background: transparent; text-align: center; font: 600 13px/1 inherit; padding: 6px 0; min-width: 0; color: var(--apss-ink); }
.apss-mat-cfg-buy .apss-add { background: var(--apss-red); color: #fff; border: 0; padding: 8px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: all 180ms; }
.apss-mat-cfg-buy .apss-add:hover { background: var(--apss-red-2); }
.apss-mat-cfg-buy .apss-ct { text-align: center; font-size: 9.5px; color: var(--apss-muted); font-family: ui-monospace,Menlo,monospace; }
.apss-mat-cfg-buy .apss-ct span { color: var(--apss-red); font-weight: 700; }
/* "Looking for an O-ring?" explainer (replaces the live configurator).
Same outer slot as .apss-mat-cfg, but the inner content is a
read-only how-to: a fake search bar that cycles through example
material+dimension queries to teach customers the shortcut. */
.apss-mat-hint .apss-mat-cfg-head h3 {
font-size: 18px;
font-weight: 700;
color: var(--apss-ink);
}
.apss-mat-hint-text {
margin: 4px 0 16px;
font-size: 13.5px;
line-height: 1.55;
color: var(--apss-ink-2);
}
.apss-mat-hint-text code {
background: var(--apss-cream);
color: var(--apss-red);
padding: 1px 7px;
border-radius: 5px;
font: 600 12.5px ui-monospace, Menlo, "SF Mono", monospace;
letter-spacing: 0.01em;
}
.apss-mat-hint-text small {
color: var(--apss-muted);
font-size: 12px;
}
.apss-mat-hint-demo {
background: var(--apss-bg-2);
border: 1px solid var(--apss-line);
border-radius: 12px;
padding: 14px 14px 12px;
margin-top: auto;
}
.apss-mat-hint-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--apss-muted);
margin-bottom: 8px;
}
.apss-mat-hint-bar {
position: relative;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--apss-red);
box-shadow: 0 2px 10px rgba(200,40,31,0.10);
border-radius: 8px;
padding: 10px 14px;
min-height: 40px;
}
.apss-mat-hint-mag {
flex-shrink: 0;
width: 16px; height: 16px;
color: var(--apss-red);
}
.apss-mat-hint-typed {
position: relative;
flex: 1;
height: 18px;
font: 600 14px ui-monospace, Menlo, "SF Mono", monospace;
color: var(--apss-ink);
letter-spacing: 0.01em;
overflow: hidden;
}
.apss-mat-hint-q {
position: absolute;
top: 0; left: 0;
white-space: nowrap;
width: 0;
overflow: hidden;
animation: apssTypeCycle 12s linear infinite;
}
.apss-mat-hint-q1 { animation-delay: 0s; }
.apss-mat-hint-q2 { animation-delay: 3s; }
.apss-mat-hint-q3 { animation-delay: 6s; }
.apss-mat-hint-q4 { animation-delay: 9s; }
@keyframes apssTypeCycle {
0% { width: 0; opacity: 1; }
10% { width: 11ch; opacity: 1; }
18% { width: 11ch; opacity: 1; }
22% { width: 11ch; opacity: 0; }
25%, 100% { width: 0; opacity: 0; }
}
.apss-mat-hint-caret {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 16px;
background: var(--apss-red);
animation: apssCaretBlink 1s steps(2) infinite;
}
@keyframes apssCaretBlink {
0%,49% { opacity: 1; }
50%,100% { opacity: 0; }
}
.apss-mat-hint-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 5px 6px;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--apss-line);
flex-wrap: wrap;
}
.apss-mat-hint-step {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 600;
color: var(--apss-ink-2);
white-space: nowrap;
}
.apss-mat-hint-step b {
display: inline-flex;
align-items: center; justify-content: center;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--apss-red);
color: #fff;
font-size: 9.5px;
font-weight: 800;
}
.apss-mat-hint-step-locked b {
background: var(--apss-muted-2);
}
.apss-mat-hint-step-locked em {
font-style: normal;
font-size: 8px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--apss-muted);
background: var(--apss-cream-2);
padding: 2px 5px;
border-radius: 4px;
margin-left: 4px;
white-space: nowrap;
}
.apss-mat-hint-arrow {
color: var(--apss-muted-2);
font-size: 12px;
}
/* Sliders (rows 2-4) */
.apss-mrow { margin-bottom: 22px; }
.apss-mrow-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 10px;
}
.apss-mrow-head h3 {
margin: 0; font-size: 17px; font-weight: 700;
letter-spacing: -0.005em; color: var(--apss-ink);
}
.apss-mrow-more { font-size: 13px; color: var(--apss-red); text-decoration: none; font-weight: 600; }
.apss-mrow-more:hover { text-decoration: underline; }
/* ── Radial shaft seals (RWDR) curated view ──────────────────────────── */
.apss-rwdr-grp .apss-mrow-head { align-items: center; border-bottom: 1px solid var(--apss-line, #ececec); padding-bottom: 6px; }
.apss-rwdr-grp-temp { font: 600 11px/1.4 var(--apss-font-body); color: var(--apss-muted, #777); white-space: nowrap; }
.apss-rwdr-din { color: #334155 !important; background: #eef2f7 !important; border-color: #cdd6e2 !important; }
.apss-rwdr-card { position: relative; }
.apss-rwdr-tier {
position: absolute; top: 8px; left: 8px; z-index: 2;
font: 700 9px/1.5 var(--apss-font-body); letter-spacing: 0.02em;
padding: 1px 6px; border-radius: 3px; text-transform: uppercase;
}
.apss-rwdr-tier-ap { color: #fff; background: var(--apss-red, #d80901); }
.apss-rwdr-tier-shop { color: #475569; background: #eef2f7; border: 1px solid #d7dee8; }
.apss-rwdr-tier-std { color: #6b7280; background: #f4f4f5; border: 1px solid #e4e4e7; }
.apss-rwdr-desc { font: 500 10.5px/1.35 var(--apss-font-body); color: var(--apss-muted, #777); margin: 2px 0 6px; min-height: 28px; }
.apss-rwdr-mat {
font: 700 10px/1.5 var(--apss-font-body); padding: 1px 6px; border-radius: 3px;
}
.apss-rwdr-mat-nbr { color: #1d4ed8; background: #e8effe; border: 1px solid #c5d8fb; }
.apss-rwdr-mat-fkm { color: #92400e; background: #fdf0e1; border: 1px solid #f3d9b8; }
.apss-rwdr-mat-both { color: #475569; background: #eef2f7; border: 1px solid #d7dee8; }
.apss-rwdr-count { font: 700 11px/1.4 var(--apss-font-body); color: var(--apss-ink, #1a1a1a); margin-top: 6px; }
.apss-mslider {
display: grid;
grid-auto-flow: column;
/* Fixed width — single-product sliders no longer stretch one card to fill
the whole row. Cards stay ~190 px regardless of how many results come
back. */
grid-auto-columns: 190px;
gap: 10px;
overflow-x: auto;
padding-bottom: 16px; /* room for the 14px scrollbar at hover */
scroll-snap-type: x mandatory;
justify-content: start; /* anchor at left when only 1–2 products */
}
/* Slider scrollbar — small at rest, much larger on hover/focus so it's
easy to grab and drag. Track is faintly visible at rest, fills in on
hover to make the draggable area unmistakable. */
.apss-mslider {
scrollbar-color: rgba(28,43,74,0.30) rgba(28,43,74,0.04); /* Firefox */
scrollbar-width: thin;
transition: scrollbar-color 200ms;
}
.apss-mslider:hover, .apss-mslider:focus-within {
scrollbar-width: auto;
scrollbar-color: var(--apss-red) rgba(200,40,31,0.08);
}
.apss-mslider::-webkit-scrollbar {
height: 8px;
transition: height 200ms;
}
.apss-mslider:hover::-webkit-scrollbar,
.apss-mslider:focus-within::-webkit-scrollbar {
height: 14px;
}
.apss-mslider::-webkit-scrollbar-track {
background: rgba(28,43,74,0.04);
border-radius: 8px;
margin: 0 4px;
}
.apss-mslider:hover::-webkit-scrollbar-track,
.apss-mslider:focus-within::-webkit-scrollbar-track {
background: rgba(200,40,31,0.08);
}
.apss-mslider::-webkit-scrollbar-thumb {
background: rgba(28,43,74,0.30);
border-radius: 8px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background 200ms;
}
.apss-mslider:hover::-webkit-scrollbar-thumb,
.apss-mslider:focus-within::-webkit-scrollbar-thumb {
background: var(--apss-red);
background-clip: padding-box;
min-width: 60px; /* fatter thumb so the grab target is bigger */
}
.apss-mslider::-webkit-scrollbar-thumb:hover { background: var(--apss-red-2); background-clip: padding-box; }
.apss-mslider::-webkit-scrollbar-thumb:active { background: var(--apss-ink); background-clip: padding-box; }
.apss-msl-card {
background: #fff;
border: 1px solid var(--apss-line);
border-radius: 10px;
padding: 10px;
text-decoration: none; color: inherit;
display: flex; flex-direction: column;
scroll-snap-align: start;
transition: all 200ms;
}
.apss-msl-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); border-color: var(--apss-red); }
.apss-msl-img {
width: 100%; aspect-ratio: 1; border-radius: 8px;
background: var(--apss-bg-2);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.apss-msl-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.apss-msl-img .fb { font-size: 28px; opacity: 0.45; }
/* Typographic placeholder used when we only have the article SKU from the DB
(no image URL). Looks like a small "card chip" instead of a broken image. */
.apss-msl-img-text {
background: linear-gradient(135deg, #fafaf7 0%, #f4efe6 100%);
flex-direction: column;
gap: 6px; padding: 10px;
}
.apss-msl-pc {
font: 700 11px/1 var(--apss-font-body);
letter-spacing: 0.08em;
color: var(--apss-red);
background: #fff;
padding: 4px 8px; border-radius: 4px; border: 1px solid var(--apss-red);
}
.apss-msl-sub {
font: 500 11px/1.25 var(--apss-font-body);
color: var(--apss-muted);
text-align: center;
}
/* Info card list (right column on plastic/non-elastomer materials) */
.apss-mat-info-list {
list-style: none; padding: 0; margin: 6px 0 2px;
display: flex; flex-direction: column; gap: 5px;
font-size: 13px; color: var(--apss-ink-2);
}
.apss-mat-info-list li {
display: flex; gap: 8px; align-items: baseline;
padding: 4px 0; border-bottom: 1px dashed var(--apss-line);
}
.apss-mat-info-list li:last-child { border-bottom: none; }
.apss-mat-info-list li b {
font-variant-numeric: tabular-nums;
color: var(--apss-red); font-weight: 700; min-width: 52px;
}
.apss-msl-title {
font-size: 13px; font-weight: 600; line-height: 1.35;
margin: 8px 0 3px; color: var(--apss-ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(2 * 13px * 1.35); /* reserve 2 lines so plastic (long titles) and elastomer (short) align vertically */
}
.apss-msl-meta { font-size: 11.5px; color: var(--apss-muted); margin-top: auto; }
/* Material-view card: Hardness (Shore) + working temp + real homologations */
.apss-msl-card-mat { position: relative; }
.apss-msl-best { position: absolute; top: 8px; left: 8px; z-index: 2; font: 800 7.5px/1 var(--apss-font-body);
letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--apss-ink); border-radius: 3px; padding: 3px 6px; }
.apss-msl-card-mat .apss-msl-title { font: 700 12px/1.3 var(--apss-font-body); color: var(--apss-ink); margin: 8px 0 0; }
.apss-msl-spec { margin-top: 7px; display: flex; flex-direction: column; gap: 5px; }
.apss-msl-hard { align-self: flex-start; font: 800 11px/1 var(--apss-font-body); color: #fff; background: var(--apss-ink); border-radius: 3px; padding: 3px 8px; }
.apss-msl-temp { font: 600 11px/1.3 var(--apss-font-body); color: var(--apss-ink-2); }
.apss-msl-cert-row { display: flex; flex-wrap: wrap; gap: 4px; }
.apss-msl-cert { font: 700 9px/1.4 var(--apss-font-body); color: #2e7d32; background: #e7f4e8; border: 1px solid #bfe2c2; border-radius: 3px; padding: 1px 5px; }
.apss-msl-cert-n { color: #2e7d32; }
/* Sustainability version tag (Bio-based / Recycled) — a stronger green chip. */
.apss-msl-cert-bio { color: #fff; background: #2e9e4f; border-color: #2e9e4f; }
/* Real article-fact tag (shaft Ø range, size count) — neutral slate, distinct
from the green homologation certs. Used by the RWDR shaft-seal cards. */
/* Temperature "Range track" (gallery design #09) — cold→hot gradient bar with
min/max end labels, applied to every search-bar card. SARCLA pick. */
.apss-tt { margin: 8px 0 2px; }
.apss-tt-bar { height: 6px; border-radius: 999px; background: linear-gradient(90deg,#93c5fd,#fca5a5); }
.apss-tt-ends { display: flex; justify-content: space-between; margin-top: 4px; font: 700 11px/1.4 var(--apss-font-body); font-variant-numeric: tabular-nums; }
.apss-tt-lo { color: #2563eb; }
.apss-tt-hi { color: #e11d2a; }
.apss-tt-solo { margin: 6px 0 2px; }
/* Real article-fact tags (⌀ shaft range, size count) — enlarged for legibility
on the cards (SARCLA: the size placeholders were too small to read). */
.apss-msl-cert-spec { font: 700 11px/1.5 var(--apss-font-body); color: #334155; background: #eef2f7; border: 1px solid #cdd6e2; border-radius: 4px; padding: 2px 8px; }
/* Inline tier chip inside the RWDR size table's Form column. */
.apss-dim-tier { font: 700 8.5px/1.5 var(--apss-font-body); letter-spacing: .02em; text-transform: uppercase; padding: 0 5px; border-radius: 3px; vertical-align: middle; }
.apss-dim-tier-ap { color: #fff; background: var(--apss-red, #d80901); }
.apss-dim-tier-shop { color: #475569; background: #eef2f7; border: 1px solid #d7dee8; }
.apss-dim-tier-std { color: #6b7280; background: #f4f4f5; border: 1px solid #e4e4e7; }
/* RWDR no-exact-match material × size alternatives matrix. */
.apss-rwdr-mx { table-layout: fixed; }
.apss-rwdr-mx th, .apss-rwdr-mx td { text-align: center; }
.apss-rwdr-mx th:first-child, .apss-rwdr-mx td.apss-mx-size { text-align: left; }
.apss-rwdr-mx .apss-mx-size a { color: var(--apss-ink, #1c2b4a); font-weight: 700; text-decoration: none; cursor: pointer; }
.apss-rwdr-mx .apss-mx-size a:hover { color: var(--apss-red, #d80901); }
.apss-rwdr-mx .apss-mx-row.apss-mx-near { background: #fff7f7; }
.apss-mx-cell { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: #e7f4e8; border: 1px solid #bfe2c2; color: #2e7d32; font-weight: 700; font-size: 11px; text-decoration: none; cursor: pointer; }
.apss-mx-cell:hover { background: #d5edd8; border-color: #2e9e4f; }
.apss-mx-check { font-size: 11px; line-height: 1; }
.apss-mx-n { font-size: 10px; opacity: .8; }
.apss-mx-hint { margin: 8px 2px 0; font-size: 11px; color: var(--apss-muted, #5f6368); }
.apss-msl-cert-bio::before { content: "\1F331 "; }
.apss-msl-std { font: italic 600 10px/1.3 var(--apss-font-body); color: var(--apss-muted-2); }
/* Plastic-material variant: right column is an info card instead of
the elastomer-only O-ring configurator. */
.apss-mat-row1.apss-mat-row1-plastic { grid-template-columns: 1fr 1fr; }
.apss-mat-info {
background: var(--apss-bg-2);
border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
padding: 22px 24px;
display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.apss-mat-info h3 {
margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
color: var(--apss-ink);
}
.apss-mat-info p {
margin: 0; font-size: 14px; line-height: 1.5; color: var(--apss-ink-2);
}
.apss-mat-info-link {
display: inline-block; margin-top: 6px;
background: var(--apss-red); color: #fff;
padding: 9px 16px; border-radius: 8px;
font-size: 13px; font-weight: 600; text-decoration: none;
align-self: flex-start;
}
.apss-mat-info-link:hover { background: var(--apss-red-2); }
/* "Related categories" block at the bottom of a product-type view —
chips now use the apsoparts red as a hover accent + a subtle red
border so they don't look like generic grey buttons. */
.apss-related-cats {
grid-column: span 4;
display: block;
background: linear-gradient(135deg, var(--apss-cream), var(--apss-cream-2));
padding: 14px 18px;
border-radius: 12px;
}
.apss-related-list { display: flex; gap: 8px; flex-wrap: wrap; }
/* Square buttons (border-radius 6px) — match the AI quick-reply chips
and the rest of the bar's button language. Pills were the odd one out. */
.apss-related-chip {
display: inline-block;
background: #fff;
border: 1px solid var(--apss-red);
color: var(--apss-red) !important;
border-radius: 6px;
padding: 8px 14px;
font-size: 12.5px; font-weight: 600;
text-decoration: none;
transition: all 150ms;
}
.apss-related-chip:hover {
background: var(--apss-red); color: #fff !important;
}
/* Standalone "Related categories" rail used by the suggest-fallback
view (transmission belts / coupling / bearing / sensor / nbr
couplings …) so the related chips sit BELOW the product slider as
their own block, not as a no-photo card inside the slider track. */
.apss-related-rail {
margin: 18px 0 4px;
padding: 14px 18px;
background: linear-gradient(135deg, var(--apss-cream), var(--apss-cream-2));
border-radius: 12px;
}
.apss-related-rail .apss-vlabel { margin: 0 0 10px; }
.apss-related-rail .apss-related-chips {
display: flex; flex-wrap: wrap; gap: 8px;
}
/* Category page header — shown at the top of /api/category-driven
product-type pages (O-rings, Round bars, Hoses, etc.). */
.apss-cathead {
/* Compact band: a slim left red accent on a light surface rather than a
tall solid-red block. Keeps the brand colour but stops the header from
dominating the panel, so products sit higher / closer to the fold. */
padding: 12px 18px;
background: linear-gradient(135deg, var(--apss-red), var(--apss-red-2));
color: #fff;
border-radius: var(--apss-radius);
margin-bottom: 14px;
display: flex;
flex-direction: column;
justify-content: center;
}
.apss-cathead .apss-cat-lbl {
font: 600 11px/1 var(--apss-font-body);
letter-spacing: 0.01em;
text-transform: none;
opacity: 0.8;
margin-bottom: 3px;
}
.apss-cathead h2 {
/* futura-pt (apsoparts heading font), weight 700. Trimmed from 28px so the
band is shorter without losing the brand face. */
margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em;
font-family: var(--apss-font-head);
}
.apss-cathead p {
margin: 3px 0 0; font-size: 12px; opacity: 0.82;
}
/* Force white subtitle inside the red category hero — the global
.apss-ptsub rule sets color: var(--apss-muted) which renders near-
invisible on the red gradient. Higher-specificity selector wins. */
.apss-cathead .apss-ptsub,
.apss-cathead p.apss-ptsub {
color: #fff;
opacity: 0.92;
}
/* Cut-to-size badge — small saw icon overlayed on plastic product
cards (KT division). Click opens the apsoparts cut-to-size
configurator for that specific article SKU. */
.apss-msl-img { position: relative; }
.apss-cut-badge {
position: absolute;
top: 6px; right: 6px;
width: 28px; height: 28px;
background: #fff;
border: 1px solid var(--apss-red);
color: var(--apss-red);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
text-decoration: none;
cursor: pointer;
padding: 0;
font-family: inherit;
transition: all 150ms;
z-index: 2;
}
.apss-cut-badge svg { width: 18px; height: 18px; }
.apss-cut-badge:hover {
background: var(--apss-red);
color: #fff;
transform: scale(1.08);
}
/* Alternative card — used in the "Same material ±6%" and "Same dim
different material" sections of a dim search result. Shows a corner
tag on top of the photo describing WHY this product is a valid
alternative (e.g. "ID 96 mm (−4 %)", "FKM instead of NBR"). */
.apss-alt-card .apss-pcard-img {
position: relative;
}
/* Brief-delta tag chip. Default = inline (used inside the comparison
table and any in-flow context). The override below floats it to the
top-left only when it sits INSIDE an alt-card image — without that
scope, table-row tags were absolute-positioning to the document
origin (stray "FKM 80" at the top-left of the page). */
.apss-alt-tag {
display: inline-block;
padding: 4px 9px;
font: 600 11px/1 var(--apss-font-body);
border-radius: 4px;
color: #fff;
background: var(--apss-red);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.apss-pcard-img .apss-alt-tag {
position: absolute;
top: 6px; left: 6px;
}
.apss-alt-tag.elast { background: var(--apss-red); }
.apss-alt-tag.mat { background: var(--apss-ink); }
.apss-alt-tag.exact { background: var(--apss-green); }
/* Inside an alt card, the typographic placeholder must NOT show the
profit-center chip ("DT", "KT", …) — that overlapped the explanatory
alt tag and added no useful info for the customer. */
.apss-alt-card .apss-msl-pc { display: none; }
.apss-alt-card .apss-msl-img-text {
justify-content: center; /* centre the sub-group hint */
}
.apss-alt-card .apss-msl-img-text .apss-msl-sub {
font-size: 12.5px; color: var(--apss-muted); font-weight: 600;
}
/* Allow the alt-tag chip to wrap to two lines when the explanatory
wording is long ("FKM · cross-material"). Keep it compact otherwise. */
.apss-alt-card .apss-alt-tag {
max-width: calc(100% - 12px);
white-space: normal;
line-height: 1.2;
text-transform: none;
letter-spacing: 0.01em;
}
/* Slim note next to a section header (e.g. golden-rule explainer). */
.apss-vlabel-note {
font-size: 11px; color: var(--apss-muted); font-weight: 400;
margin-left: 10px;
}
/* C2S (Customer-to-Specialist) ticket panel — shown on the right of
plastic / sheet-only / sensor / etc material views in place of the
elastomer O-ring configurator. Encourages the user to send a spec
that becomes a quote ticket if our catalogue can't answer directly. */
.apss-mat-c2s {
background: var(--apss-bg-2);
border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
padding: 24px 26px;
display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.apss-mat-c2s .apss-c2s-head {
display: flex; gap: 14px; align-items: flex-start; margin-bottom: 4px;
}
.apss-mat-c2s .apss-c2s-ic {
width: 44px; height: 44px;
background: var(--apss-red); color: #fff;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.apss-mat-c2s .apss-c2s-ic svg { width: 24px; height: 24px; }
.apss-mat-c2s p b { color: var(--apss-ink); font-weight: 700; }
.apss-c2s-icon-inline {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
background: var(--apss-red); color: #fff;
border-radius: 4px; font-size: 11px; font-weight: 700;
vertical-align: -3px;
}
/* C2S narrated demo — 12s cycle, 4 phases:
0.0 – 2.4s Phase 1 · Open the article (mini card visible)
2.4 – 4.8s Phase 2 · Click the saw icon (saw pulses)
4.8 – 9.6s Phase 3 · Length → Width → Qty (form visible, fields fill)
9.6 – 11.4s Phase 4 · Calculate price flashes
11.4 – 12s reset
Phase boundaries map to: 20% / 40% / 80% / 95% of the 12s loop. */
.apss-c2s-demo {
background: #fff;
border: 1px solid var(--apss-line);
border-radius: 4px;
padding: 14px 16px;
margin: 12px 0;
font-family: Arial, system-ui, sans-serif;
}
.apss-c2s-demo-label {
font: 600 10px/1 Arial, system-ui;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--apss-muted);
margin-bottom: 10px;
}
/* Step caption strip — overlapping s share the same row;
only one fades in per phase, the others stay at opacity 0. */
.apss-c2s-demo-caption {
position: relative;
height: 18px;
margin-bottom: 10px;
font: 600 12px/1.4 Arial, system-ui, sans-serif;
color: var(--apss-ink);
}
.apss-c2s-demo-caption .apss-c2s-cap {
position: absolute; top: 0; left: 0; right: 0;
opacity: 0;
display: flex; align-items: center; gap: 6px;
}
.apss-c2s-demo-caption .apss-c2s-cap b {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
background: var(--apss-red); color: #fff;
border-radius: 50%; font-size: 11px; font-weight: 700; font-style: normal;
}
.apss-c2s-demo-caption .apss-c2s-cap i { font-style: normal; font-weight: 700; }
.apss-c2s-cap-1 { animation: apss-c2s-cap1 12s infinite; }
.apss-c2s-cap-2 { animation: apss-c2s-cap2 12s infinite; }
.apss-c2s-cap-3 { animation: apss-c2s-cap3 12s infinite; }
.apss-c2s-cap-4 { animation: apss-c2s-cap4 12s infinite; }
@keyframes apss-c2s-cap1 { 0%, 18% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes apss-c2s-cap2 { 0%, 18% { opacity: 0; } 22%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes apss-c2s-cap3 { 0%, 38% { opacity: 0; } 42%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes apss-c2s-cap4 { 0%, 78% { opacity: 0; } 82%, 100% { opacity: 1; } }
/* Stage: holds the mini card AND the form, sized to fit the form
(the taller of the two). Card fades out as form fades in. */
.apss-c2s-demo-stage { position: relative; min-height: 168px; }
/* Phase 1+2 — apsoparts product-page mini view.
Image on the left, product title + product SKU + tag chips in the
middle, prominent navy saw button absolutely placed on the right edge.
Mirrors the apsoparts PDP header (product-level, NOT article-level). */
.apss-c2s-demo-card {
position: absolute; inset: 0;
display: flex; align-items: center; gap: 12px;
padding: 10px 60px 10px 10px; /* right padding leaves room for the saw button */
background: #fff;
border: 1px solid #e3e5e8;
border-radius: 4px;
opacity: 0;
animation: apss-c2s-card 12s infinite;
}
@keyframes apss-c2s-card {
0%, 38% { opacity: 1; }
42%, 100% { opacity: 0; }
}
.apss-c2s-demo-card-img {
flex-shrink: 0;
width: 72px; height: 72px;
display: flex; align-items: center; justify-content: center;
background: #fff;
border: 1px solid #ebebeb;
border-radius: 4px;
overflow: hidden;
}
.apss-c2s-demo-card-img img {
width: 100%; height: 100%;
object-fit: contain;
padding: 4px;
}
.apss-c2s-demo-card-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 4px;
}
.apss-c2s-demo-card-title {
font: 700 14px/1.3 Arial, system-ui, sans-serif;
color: var(--apss-ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apss-c2s-demo-card-skuline {
display: flex; align-items: center; gap: 6px;
font: 400 11px/1.4 Arial, system-ui, sans-serif;
}
.apss-c2s-demo-card-skulbl {
text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 700; font-size: 10px;
color: var(--apss-muted);
}
.apss-c2s-demo-card-sku {
padding: 1px 7px; border-radius: 3px;
background: #f1f3f5;
color: #274e64; font-weight: 700;
font-family: "Menlo", "Consolas", monospace;
letter-spacing: 0.02em;
}
.apss-c2s-demo-card-dim {
font: 400 11px/1.4 Arial, system-ui, sans-serif;
color: var(--apss-muted);
font-variant-numeric: tabular-nums;
}
.apss-c2s-demo-card-tags {
display: flex; flex-wrap: wrap; gap: 4px;
margin-top: 2px;
}
.apss-c2s-demo-card-tag {
display: inline-flex;
padding: 2px 7px; border-radius: 2px;
background: rgba(200,40,31,0.08);
color: var(--apss-red);
font: 600 10px/1.4 Arial, system-ui, sans-serif;
letter-spacing: 0.02em;
}
/* Saw button — anchored top-right of the card. Solid navy (apsoparts uses
.action.secondary which is navy) with white icon = unmissable focal point. */
.apss-c2s-demo-card-saw {
position: absolute;
top: 50%; right: 12px;
transform: translateY(-50%);
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
padding: 0;
background: #274e64;
border: 1px solid #274e64;
border-radius: 3px;
color: #fff;
cursor: default;
animation: apss-c2s-cardsaw 12s infinite;
}
.apss-c2s-demo-card-saw svg {
display: block;
width: 22px; height: 22px;
fill: #fff;
}
@keyframes apss-c2s-cardsaw {
0%, 18% { background:#274e64; border-color:#274e64;
transform: translateY(-50%) scale(1); }
22%, 32% { background:#1a3a4e; border-color:#1a3a4e;
transform: translateY(-50%) scale(1.10); }
36%, 100% { background:#274e64; border-color:#274e64;
transform: translateY(-50%) scale(1); }
}
/* Click ripple — fires during phase 2 (22% – 38%) */
.apss-c2s-demo-card-pulse {
position: absolute; inset: -4px;
border-radius: 6px;
border: 2px solid var(--apss-red);
opacity: 0;
pointer-events: none;
animation: apss-c2s-pulse 12s infinite;
}
@keyframes apss-c2s-pulse {
0%, 18% { opacity: 0; transform: scale(0.85); }
22% { opacity: 0.9; transform: scale(0.85); }
30% { opacity: 0; transform: scale(1.65); }
32%, 100% { opacity: 0; transform: scale(0.85); }
}
/* Phase 3+4 — dimensions form */
.apss-c2s-demo-form {
position: absolute; inset: 0;
opacity: 0;
animation: apss-c2s-form 12s infinite;
}
@keyframes apss-c2s-form {
0%, 38% { opacity: 0; }
42%, 100% { opacity: 1; }
}
.apss-c2s-demo-row {
display: grid; grid-template-columns: 70px 1fr;
align-items: center; gap: 12px;
padding: 5px 0;
}
.apss-c2s-demo-k {
color: #5e5e5e; font-weight: 600; font-size: 12px; font-family: Arial, system-ui, sans-serif;
}
.apss-c2s-demo-v {
display: inline-flex; align-items: center; gap: 6px;
background: #fff;
border: 1px solid #d6d8db;
border-radius: 3px;
padding: 6px 10px;
min-width: 100px; min-height: 26px;
font-size: 13px; color: var(--apss-ink);
transition: border-color 0.3s, background 0.3s;
}
.apss-c2s-demo-typed {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
opacity: 0; /* hidden by default — animations turn it on */
}
.apss-c2s-demo-unit { color: var(--apss-muted); font-size: 11px; }
/* APSOPARTS-style 'Calculate price' button — white text on navy by default. */
.apss-c2s-demo-btn {
margin-top: 10px;
background: #274e64;
border: 1px solid #274e64;
color: #fff;
border-radius: 3px;
padding: 7px 20px;
min-height: 38px;
font: 600 14px/1.6 Arial, system-ui, sans-serif;
cursor: default;
transition: all 250ms ease-in-out;
}
/* Phase 3 field-fill timing — within the 12s loop, phase 3 runs 42%→78%.
Three fields each get a ~12% slot:
Length 42% – 54%
Width 54% – 66%
Quantity 66% – 78%
After being filled, the typed value stays visible until the loop
resets (mirrors the real-user experience: filled fields don't clear). */
/* Step 1: Length */
.apss-c2s-r1 .apss-c2s-demo-v { animation: apss-c2s-row1 12s infinite; }
.apss-c2s-r1 .apss-c2s-demo-typed { animation: apss-c2s-type1 12s infinite; }
@keyframes apss-c2s-row1 {
0%, 42% { border-color: #d6d8db; background: #fff; }
44%, 54% { border-color: #274e64; background: #fafbfc; }
56%, 100% { border-color: #d6d8db; background: #fff; }
}
@keyframes apss-c2s-type1 {
0%, 44% { opacity: 0; }
46%, 95% { opacity: 1; }
100% { opacity: 0; }
}
/* Step 2: Width */
.apss-c2s-r2 .apss-c2s-demo-v { animation: apss-c2s-row2 12s infinite; }
.apss-c2s-r2 .apss-c2s-demo-typed { animation: apss-c2s-type2 12s infinite; }
@keyframes apss-c2s-row2 {
0%, 54% { border-color: #d6d8db; background: #fff; }
56%, 66% { border-color: #274e64; background: #fafbfc; }
68%, 100% { border-color: #d6d8db; background: #fff; }
}
@keyframes apss-c2s-type2 {
0%, 56% { opacity: 0; }
58%, 95% { opacity: 1; }
100% { opacity: 0; }
}
/* Step 3: Quantity */
.apss-c2s-r3 .apss-c2s-demo-v { animation: apss-c2s-row3 12s infinite; }
.apss-c2s-r3 .apss-c2s-demo-typed { animation: apss-c2s-type3 12s infinite; }
@keyframes apss-c2s-row3 {
0%, 66% { border-color: #d6d8db; background: #fff; }
68%, 78% { border-color: #274e64; background: #fafbfc; }
80%, 100% { border-color: #d6d8db; background: #fff; }
}
@keyframes apss-c2s-type3 {
0%, 68% { opacity: 0; }
70%, 95% { opacity: 1; }
100% { opacity: 0; }
}
/* Step 4: Calculate price flashes — base is already navy/white text;
the flash adds a subtle red glow + slight lift to draw the eye. */
.apss-c2s-demo-btn { animation: apss-c2s-btnflash 12s infinite; }
@keyframes apss-c2s-btnflash {
0%, 80%, 100% { background:#274e64; color:#fff; border-color:#274e64; box-shadow: none; }
84%, 94% { background:#1a3a4e; color:#fff; border-color:#1a3a4e;
box-shadow: 0 0 0 3px rgba(200,16,46,0.25); }
}
.apss-mat-c2s h3 {
margin: 0; font-size: 20px; font-weight: 700; color: var(--apss-ink);
letter-spacing: -0.01em;
}
.apss-mat-c2s p {
margin: 0; font-size: 14px; line-height: 1.55; color: var(--apss-ink-2);
}
/* Back-to-material breadcrumb for chip / sub-category views. */
.apss-back-bar {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--apss-muted);
padding: 8px 12px;
margin-bottom: 12px;
background: var(--apss-bg-2);
border-radius: 8px;
border: 1px solid var(--apss-line);
text-transform: none !important;
}
.apss-back-bar a {
color: var(--apss-red); font-weight: 600; text-decoration: none;
cursor: pointer;
text-transform: none !important;
}
.apss-back-bar a:hover { text-decoration: underline; }
.apss-back-mat {
font-weight: 700;
/* Keep material code capitalised but no ALL-CAPS visual jolt. */
letter-spacing: 0.01em;
}
/* Idle hint (replaces Featured / Divisions). Minimal — bar IS the UX. */
.apss-hint {
padding: 56px 40px;
background: var(--apss-bg-2);
border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
text-align: center;
}
.apss-hint h3 {
margin: 0 0 10px; font-size: 20px;
color: var(--apss-ink); font-weight: 700; letter-spacing: -0.01em;
}
.apss-hint p {
margin: 0; color: var(--apss-muted); font-size: 14px; line-height: 1.6;
max-width: 560px; margin-left: auto; margin-right: auto;
}
.apss-hint p b { color: var(--apss-red); font-weight: 600; }
/* "Thinking…" indicator — spinning red ring + a slowly-rotating domain
phrase, shown while the Claude call is in flight. */
.apss-think { display: inline-flex; align-items: center; gap: 9px; vertical-align: middle; }
.apss-think-ic {
width: 18px; height: 18px; flex: none; color: var(--apss-red);
transform-origin: 60% 60%;
animation: apssThinkScan 1.5s ease-in-out infinite;
}
.apss-think-ic svg { width: 100%; height: 100%; display: block; }
.apss-think-txt {
font-size: 13px; color: var(--apss-muted);
transition: opacity 0.2s ease;
}
/* Playful "searching" sweep — the magnifier scans side-to-side with a
little bob and a wink of scale. Fun but still tidy. */
@keyframes apssThinkScan {
0% { transform: translateX(-2px) rotate(-16deg) scale(1); }
25% { transform: translateX(1px) rotate(6deg) scale(1.08); }
50% { transform: translateX(2px) rotate(16deg) scale(1); }
75% { transform: translateX(1px) rotate(6deg) scale(1.08); }
100% { transform: translateX(-2px) rotate(-16deg) scale(1); }
}
/* AI Assistant panel — full-width chat invoked from the no-match panel. */
.apss-aicard {
display: grid; grid-template-columns: 280px 1fr;
background: #fff;
border-radius: var(--apss-radius);
border: 1px solid var(--apss-line);
overflow: hidden;
min-height: 360px;
}
.apss-aiside {
background: linear-gradient(135deg, var(--apss-red), var(--apss-red-2));
color: #fff;
padding: 24px;
display: flex; flex-direction: column; justify-content: space-between;
}
.apss-aiav { font-size: 28px; margin-bottom: 12px; }
.apss-aitag { font: 700 11px/1 var(--apss-font-body); letter-spacing: 0.12em; opacity: 0.85; }
.apss-aihead { margin: 8px 0 6px; font-size: 22px; font-weight: 700; }
.apss-aiblurb { margin: 0; font-size: 13px; line-height: 1.55; opacity: 0.9; }
.apss-ai-escalate {
background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.4);
padding: 9px 14px; border-radius: 6px; font-size: 13px; cursor: pointer;
text-align: left; transition: all 150ms;
}
.apss-ai-escalate:hover { background: rgba(255,255,255,0.25); }
.apss-chat {
padding: 18px; display: flex; flex-direction: column; gap: 10px;
overflow-y: auto; max-height: 480px;
}
.apss-msg { display: flex; gap: 10px; align-items: flex-start; }
.apss-msg.user { flex-direction: row-reverse; }
.apss-mav {
width: 28px; height: 28px; border-radius: 50%;
background: var(--apss-bg-2); color: var(--apss-muted);
display: flex; align-items: center; justify-content: center;
font: 700 11px/1 var(--apss-font-body);
flex-shrink: 0;
}
.apss-msg.bot .apss-mav { background: var(--apss-red); color: #fff; }
.apss-mb {
background: var(--apss-bg-2); padding: 10px 14px; border-radius: 12px;
font-size: 13px; line-height: 1.5; color: var(--apss-ink);
max-width: 70%;
}
.apss-msg.user .apss-mb { background: var(--apss-ink); color: #fff; }
.apss-aiin {
display: flex; gap: 8px;
border-top: 1px solid var(--apss-line); padding-top: 12px; margin-top: 8px;
}
.apss-aiin input {
flex: 1; border: 1px solid var(--apss-line); border-radius: 8px;
padding: 10px 14px; font-size: 14px; outline: none;
}
.apss-aiin input:focus { border-color: var(--apss-red); }
.apss-aisend {
background: var(--apss-red); color: #fff;
border: none; border-radius: 8px; padding: 10px 18px;
font: 600 13px/1 var(--apss-font-body);
cursor: pointer;
}
.apss-aisend:hover { background: var(--apss-red-2); }
/* Escalation panel — collects email + transcript after the assistant
couldn't resolve. */
.apss-escalate {
background: #fff; border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
padding: 36px 32px; text-align: center;
}
.apss-escalate-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px;
background: var(--apss-red); color: #fff; border-radius: 50%;
font-size: 26px; margin-bottom: 14px;
}
.apss-escalate h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.apss-escalate > p { margin: 0 0 18px; color: var(--apss-muted); font-size: 14px; }
.apss-escalate-form {
display: flex; flex-direction: column; gap: 10px;
max-width: 440px; margin: 0 auto;
}
.apss-escalate-form input,
.apss-escalate-form textarea {
border: 1px solid var(--apss-line); border-radius: 8px;
padding: 11px 14px; font-size: 14px; outline: none; font-family: inherit;
}
.apss-escalate-form input:focus,
.apss-escalate-form textarea:focus { border-color: var(--apss-red); }
.apss-escalate-mailto {
font-size: 12px; color: var(--apss-muted); text-decoration: none;
margin-top: 4px;
}
.apss-escalate-mailto:hover { color: var(--apss-red); }
.apss-escalate-ok {
background: var(--apss-green); color: #fff;
padding: 12px 18px; border-radius: 8px;
margin-top: 14px; font-size: 13px; font-weight: 600;
}
/* No-match panel (replaces former AI fallback while APSOAssistant is deferred) */
.apss-nomatch {
padding: 36px 28px;
background: linear-gradient(135deg, #fffaf2 0%, var(--apss-cream) 100%);
border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
text-align: center;
}
.apss-nomatch-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; margin-bottom: 14px;
background: #fff; border: 2px solid var(--apss-red);
border-radius: 50%; color: var(--apss-red);
font-size: 28px; font-weight: 700;
}
.apss-nomatch h2 {
margin: 0 0 6px; font-size: 22px; color: var(--apss-ink);
font-weight: 700; letter-spacing: -0.01em;
}
.apss-nomatch > p {
margin: 0 0 22px; color: var(--apss-muted); font-size: 14px;
max-width: 540px; margin-left: auto; margin-right: auto;
}
.apss-nomatch-actions {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.apss-nomatch-primary {
display: inline-block; padding: 11px 22px;
background: var(--apss-red); color: #fff; text-decoration: none;
border-radius: 8px; font-size: 14px; font-weight: 600;
}
.apss-nomatch-primary:hover { background: var(--apss-red-2); }
.apss-nomatch-primary { cursor: pointer; border: none; font-family: inherit; }
.apss-nomatch-secondary {
display: inline-block; padding: 11px 20px;
background: #fff; border: 1px solid var(--apss-line);
color: var(--apss-ink); border-radius: 8px;
font-size: 13px; font-weight: 500; text-decoration: none;
}
.apss-nomatch-secondary:hover { border-color: var(--apss-red); color: var(--apss-red); }
.apss-nomatch-chips {
display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.apss-nomatch-chips a {
display: inline-block; padding: 7px 16px;
background: #fff; border: 1px solid var(--apss-line);
border-radius: 999px; font-size: 13px; font-weight: 500;
color: var(--apss-ink); cursor: pointer; text-decoration: none;
transition: all 150ms;
}
.apss-nomatch-chips a:hover {
border-color: var(--apss-red); color: var(--apss-red);
}
/* No-match → inline-chat panel (replaces former "Ask APSO Assistant"
button + chip list). Pre-fills the user's failed query and a Send
button drops them into the chat. */
.apss-nomatch-chat {
padding: 32px 28px;
background: linear-gradient(135deg, #fffaf2 0%, var(--apss-cream) 100%);
border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
}
.apss-nomatch-head {
display: flex; gap: 18px; align-items: flex-start;
margin-bottom: 18px;
}
.apss-nomatch-emoji {
flex-shrink: 0;
width: 56px; height: 56px;
background: #fff;
border: 2px solid var(--apss-red);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.apss-nomatch-head h2 {
margin: 0 0 4px; font-size: 20px; color: var(--apss-ink);
font-weight: 700; letter-spacing: -0.01em;
}
.apss-nomatch-head p {
margin: 0; color: var(--apss-muted); font-size: 13px; line-height: 1.55;
}
.apss-nomatch-head p b { color: var(--apss-ink); font-weight: 600; }
.apss-nomatch-prefill {
display: flex; gap: 8px;
margin-bottom: 14px;
}
.apss-nomatch-prefill input {
flex: 1;
background: #fff; border: 1px solid var(--apss-line); border-radius: 8px;
padding: 11px 14px; font-size: 14px; outline: none;
}
.apss-nomatch-prefill input:focus { border-color: var(--apss-red); }
.apss-nomatch-secondary-row {
text-align: center;
padding-top: 6px;
border-top: 1px dashed var(--apss-line);
}
.apss-nomatch-secondary-row a {
font-size: 12px; color: var(--apss-muted); text-decoration: none;
}
.apss-nomatch-secondary-row a:hover { color: var(--apss-red); }
/* Fuzzy SKU result panel ("Did you mean…") */
.apss-fuzzy { padding: 4px 0; }
.apss-fuzzy h2 {
margin: 0 0 4px; font-size: 22px; font-weight: 700;
color: var(--apss-ink); letter-spacing: -0.01em;
}
/* "No results" caption for an empty slider — better than the implicit empty grid */
.apss-mslider .apss-msl-empty {
padding: 22px 18px;
font-size: 13px;
color: var(--apss-muted);
border: 1px dashed var(--apss-line);
border-radius: 10px;
text-align: center;
grid-column: 1 / -1;
}
@media (max-width: 880px) {
.apss-mat-row1, .apss-mat-row1.apss-mat-row1-plastic { grid-template-columns: 1fr; }
.apss-mat-cfg-card { grid-template-columns: 1fr; }
}
/* product type */
.apss-pthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.apss-pttitle { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--apss-ink); }
.apss-ptsub { color: var(--apss-muted); margin: 4px 0 0; font-size: 12.5px; }
/* article */
.apss-art { background: #fff; border-radius: var(--apss-radius); padding: 18px; border: 1px solid var(--apss-line); display: grid; grid-template-columns: 180px 1fr 180px; gap: 20px; }
/* When the article card lives inside a 2-card brand-row (i.e. side-by-side
NORMATEC + HITEC at 50/50 width), the 180+1fr+180 grid overflows. Switch
to a 2-column layout where the buy panel drops underneath the attrs. */
.apss-brand-row-two .apss-art {
grid-template-columns: 120px 1fr;
grid-template-rows: 1fr auto; /* first row grows, buy row hugs the bottom */
gap: 12px;
padding: 12px;
align-items: start;
}
/* Tighten the article internals inside the 2-card row so the buy panel
(and the "All possible alternatives" table) sit higher up the viewport
— the user asked for the products to "come faster" without scrolling. */
.apss-brand-row-two .apss-art-img { aspect-ratio: 1; }
.apss-brand-row-two .apss-art-title { font-size: 16px; line-height: 1.2; margin: 0 0 2px; }
.apss-brand-row-two .apss-art-bc { font-size: 10.5px; margin-bottom: 4px; }
.apss-brand-row-two .apss-art-sku { font-size: 11px; margin: 2px 0 4px; }
.apss-brand-row-two .apss-art-badges { gap: 4px; margin: 4px 0; }
.apss-brand-row-two .apss-art-attrs {
grid-template-columns: 100px 1fr;
gap: 6px 12px;
font-size: 13.5px; /* up from 11.5 — attribute lines were too small */
margin-top: 6px;
}
.apss-brand-row-two .apss-art-attrs dt { font-weight: 600; }
.apss-brand-row-two .apss-art-attrs dd { font-weight: 600; }
.apss-brand-row-two .apss-art-certs { min-height: 0; gap: 4px; }
.apss-brand-row-two .apss-art-certs span { font-size: 12px; padding: 2px 8px; }
.apss-brand-row-two .apss-cert-none { font-size: 12.5px; padding: 2px 8px; }
.apss-brand-row-two .apss-art-buy {
grid-column: 1 / -1;
align-self: end;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
background: transparent;
border: 0;
padding: 0;
}
.apss-brand-row-two .apss-art-buy .pl { display: none; }
.apss-brand-row-two .apss-art-buy .apss-qty {
flex: 0 0 120px; /* enough for "50" to never get clipped */
}
/* Equal-width buttons: basis 0 so both share the row evenly regardless of
label length ("Add to cart" vs "Open product page"). SARCLA 2026-06-15. */
.apss-brand-row-two .apss-art-buy .apss-add { flex: 1 1 0; min-width: 0; }
.apss-brand-row-two .apss-art-buy .apss-pdp { flex: 1 1 0; min-width: 0; }
.apss-art-img { background: var(--apss-bg-2); border-radius: 10px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.apss-art-img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.apss-art-img .fb { font-size: 84px; opacity: 0.45; }
.apss-art-bc { font-size: 11px; color: var(--apss-muted); margin-bottom: 6px; }
.apss-art-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; line-height: 1.2; letter-spacing: -0.01em; color: var(--apss-ink); }
.apss-art-sku { font: 500 12px ui-monospace,Menlo,monospace; color: var(--apss-muted); margin-bottom: 12px; }
.apss-art-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.apss-art-badge { padding: 4px 10px; border-radius: 3px; font-size: 11px; font-weight: 600; background: var(--apss-cream); color: var(--apss-ink-2); }
.apss-art-badge.green { background: rgba(46,125,50,0.10); color: var(--apss-green); }
.apss-art-attrs { display: grid; grid-template-columns: 100px 1fr; gap: 5px 12px; font-size: 12.5px; margin-top: 6px; }
.apss-art-attrs dt { color: var(--apss-muted); font-weight: 500; }
.apss-art-attrs dd { margin: 0; font-weight: 500; }
.apss-art-buy { background: var(--apss-bg-2); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 9px; align-self: start; border: 1px solid var(--apss-line); }
.apss-art-buy .pl { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apss-muted); font-weight: 600; }
/* Square (3px) buttons + quantity field — matches the apsoparts PDP style
used on 'Add to cart' and 'Calculate price'. Quantity field uses a flex
row so the +/- buttons and the value all share the same centred line. */
.apss-qty {
display: flex; align-items: stretch;
border: 1px solid var(--apss-line);
border-radius: 3px; overflow: hidden;
background: #fff;
height: 38px; /* explicit height = identical to .apss-add */
}
.apss-qty button {
width: 36px; flex-shrink: 0;
background: transparent; border: 0;
display: flex; align-items: center; justify-content: center;
font: 600 18px/1 Arial, system-ui, sans-serif;
color: var(--apss-ink-2);
cursor: pointer;
padding: 0;
}
.apss-qty button:hover { background: var(--apss-cream); color: var(--apss-red); }
.apss-qty input {
flex: 1; min-width: 0;
border: 0; outline: 0; background: transparent;
text-align: center;
font: 600 14px/38px Arial, system-ui, sans-serif; /* line-height = container height */
color: var(--apso-ink, var(--apss-ink));
padding: 0; margin: 0;
box-sizing: border-box;
/* Suppress spinner arrows so the digits sit truly centred. */
-moz-appearance: textfield;
appearance: textfield;
}
.apss-qty input::-webkit-outer-spin-button,
.apss-qty input::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.apss-add {
background: var(--apss-red); color: #fff;
border: 0; padding: 0 14px;
height: 38px; /* matches .apss-qty height */
border-radius: 3px;
font: 600 13px/1 Arial, system-ui, sans-serif;
white-space: nowrap;
cursor: pointer;
transition: filter 150ms;
}
.apss-add:hover { filter: brightness(0.88); } /* subtle darken — no red-on-red, no lift */
/* Host page (apsoparts.com) tints these on :focus/:hover blue because they had
no :focus rule of their own — pin red bg + white icon, kill the blue outline.
Covers the per-row alttbl button, the dim cart button and the card cart.
SARCLA 2026-06-30. */
.apss-add:hover, .apss-add:focus, .apss-add:focus-visible, .apss-add:active,
.apss-alttbl-add:hover, .apss-alttbl-add:focus, .apss-alttbl-add:focus-visible, .apss-alttbl-add:active,
.apss-dim-btn.cart:hover, .apss-dim-btn.cart:focus, .apss-dim-btn.cart:focus-visible, .apss-dim-btn.cart:active,
a.apss-pcard-cart:hover, a.apss-pcard-cart:focus, a.apss-pcard-cart:focus-visible, a.apss-pcard-cart:active {
background: var(--apss-red) !important; color: #fff !important;
outline: none !important; box-shadow: none !important;
}
.apss-add svg, .apss-alttbl-add svg, .apss-dim-btn.cart svg, a.apss-pcard-cart svg {
stroke: #fff !important; fill: none !important;
}
.apss-pdp {
background: transparent; color: var(--apss-red);
border: 1px solid var(--apss-red);
padding: 0 12px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 3px;
font: 600 11.5px/1 Arial, system-ui, sans-serif;
white-space: nowrap;
text-decoration: none; cursor: pointer;
transition: background 150ms;
}
/* Hover: subtle pink wash + keep text red. No full red flip with white
text — too harsh visually. */
.apss-pdp:hover { background: rgba(200,40,31,0.08); color: var(--apss-red); }
/* ===== Two-result product card redesign (variant 10) — photo-left panel,
blue+check match tag, compound tag, certs-in-header (+N), bordered spec
tiles, qty + Add to cart + outline-red product. SARCLA 2026-06-14. ===== */
.apss-brand-row { align-items: stretch; }
/* Card = grid. Default areas reproduce the double-pane stacked layout
(banner / photo+body / tiles / cta). Single result rearranges to a
3-column buy-box layout further down. */
.apss-art.apss-pc {
display: grid;
grid-template-columns: 160px 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-areas: "bar bar" "photo body" "tiles tiles" "cta cta";
padding: 0; gap: 0; overflow: hidden;
}
.apss-pc-matchbar { grid-area: bar; }
.apss-pc-photo {
grid-area: photo; background: var(--apss-bg-2);
display: flex; align-items: center; justify-content: center;
border-right: 1px solid var(--apss-line-2);
}
.apss-pc-body { grid-area: body; }
.apss-pc-tiles { grid-area: tiles; align-self: start; }
.apss-art-buy.apss-pc-cta { grid-area: cta; }
.apss-pc-photo img { width: 100%; height: 100%; max-height: 172px; object-fit: contain; padding: 14px; }
.apss-pc-photo .fb { font-size: 60px; opacity: 0.4; }
/* stock badge on the perfect-match photo + keep the alternatives TAG column from
widening the table (long reason text now wraps as a paragraph). SARCLA 2026-06-27 */
.apss-pc-photo { position: relative; }
.apss-pc-photo-stock {
position: absolute; left: 0; right: 0; bottom: 5px;
background: transparent; border: 0; box-shadow: none; padding: 0 6px; text-align: center;
}
.apss-pc-photo-stock .apss-stock-badge {
font-size: 13px; font-weight: 700; line-height: 1.15; color: var(--apss-green);
background: transparent; border: 0; padding: 0; display: block; white-space: normal;
text-shadow: 0 1px 2px rgba(255,255,255,0.9), 0 0 2px rgba(255,255,255,0.75);
}
.apss-pc-photo-stock .apss-stock-badge.out { color: #c2410c; }
.apss-pc-photo-stock .apss-stock-pending { font-size: 10px; font-weight: 600; color: #9aa6bb; }
.apss-alttbl .apss-tier-rsn { display: block; max-width: 340px; white-space: normal; word-break: break-word; }
.apss-pc-body { flex: 1; min-width: 0; padding: 13px 15px; }
.apss-pc-brow { margin-bottom: 6px; }
.apss-pc-title { font: 800 15px/1.22 Arial, system-ui, sans-serif; color: var(--apss-ink); margin: 0 0 4px; letter-spacing: -0.01em; }
.apss-pc-skl { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.apss-pc .apss-art-sku { margin: 0; }
.apss-pc-stk { font: 600 9.5px/1.4 Arial; color: var(--apss-muted); background: #f1f2f4; padding: 1px 6px; }
/* Full-width "Exact catalogue match" banner across the card top. */
.apss-pc-matchbar { display: flex; align-items: center; gap: 6px; background: #e6eef7; color: #1c5b9c; font: 700 10.5px/1.4 Arial; letter-spacing: 0.01em; padding: 7px 14px; border-bottom: 1px solid #d4e0ef; }
.apss-pc-matchbar svg { flex: 0 0 auto; }
/* Alternatives table row = versus hover trigger. */
.apss-alttbl-row { cursor: pointer; }
.apss-alttbl-row.apss-vs-hot > td:first-child { box-shadow: inset 3px 0 0 var(--apss-red); }
/* Relevance tag (style 25): sober navy reason text + a short tier-coloured
bar underneath. The bar (not the text) carries the tier colour. */
.apss-tier { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.apss-tier-rsn { font: 700 11px/1.3 "Segoe UI", system-ui, sans-serif; color: var(--apss-ink); }
.apss-tier-bar { display: block; height: 2px; width: 34px; border-radius: 2px; margin-top: 4px; }
.apss-tier-perfect .apss-tier-bar { background: #2f7d4f; }
.apss-tier-close .apss-tier-bar { background: #c0455a; }
.apss-tier-better .apss-tier-bar { background: #2a6b73; }
/* Hero-card top bar keeps a light tint so it reads as a header. */
.apss-pc-matchbar.apss-tier-perfect { background: #f3f9f3; border-bottom-color: #dcebdd; }
.apss-pc-matchbar.apss-tier-close { background: #fdf4f5; border-bottom-color: #f3d3d7; }
.apss-pc-matchbar.apss-tier-better { background: #f1f7f8; border-bottom-color: #d7e9eb; }
.apss-pc-matchbar .apss-tier-rsn { font-size: 11px; }
.apss-pc-cmp { background: #fff; color: var(--apss-ink); box-shadow: inset 0 0 0 1px var(--apss-line); }
.apss-pc-cmp i { font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 8px; letter-spacing: 0.04em; color: var(--apss-muted); margin-right: 1px; }
.apss-pc-clbl { font: 600 9px Arial; text-transform: uppercase; letter-spacing: 0.04em; color: var(--apss-muted); margin: 6px 0 5px; }
.apss-pc-certrow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.apss-pc-notcert { font: italic 600 11px Arial; color: #9aa0a6; }
.apss-pc .apss-cert-pill { font: 600 9.5px/1.4 Arial; padding: 1px 7px; border-radius: 2px; margin: 0; }
.apss-pc-more { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.apss-pc-moretag { background: #e7e9ee; color: var(--apss-muted); box-shadow: inset 0 0 0 1px #d8dbe1; font: 700 9.5px/1.4 Arial; padding: 1px 7px; cursor: pointer; user-select: none; }
.apss-pc-rest { display: none; align-items: center; gap: 5px; flex-wrap: wrap; }
/* Clean swap: clicking "+N" hides it and reveals the remaining pills in
its place (no "−+2" artifact, no reflow weirdness). */
.apss-pc-more.open .apss-pc-rest { display: inline-flex; }
.apss-pc-more.open .apss-pc-moretag { display: none; }
.apss-pc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 14px; border-top: 1px solid var(--apss-line-2); }
.apss-pc-tile { background: #fff; border: 1px solid var(--apss-line); border-top: 2px solid var(--apss-red); padding: 8px 4px; text-align: center; }
.apss-pc-tile b { display: block; font: 800 12px Arial; color: var(--apss-ink); }
.apss-pc-tile span { font: 600 8.5px Arial; color: var(--apss-muted); text-transform: uppercase; }
/* ── Clearer card typography — Segoe UI across the exact-match panel.
Overrides the per-rule Arial shorthands above (equal specificity, later
source order wins). Scoped to the card only. SARCLA 2026-06-14. ── */
.apss-pc, .apss-pc * { font-family: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif; }
/* ── Versus hover popover (v10) ─────────────────────────────────────── */
.apss-vs {
display: none; width: 300px; background: #fff; border: 1px solid var(--apss-line-2);
border-radius: 12px; box-shadow: 0 8px 26px rgba(20,30,50,.16); overflow: hidden;
z-index: 2147483600;
font-family: "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--apss-ink);
}
.apss-vs.open { display: block; }
/* Two-exact comparison toggle (NORMATEC | HITEC) */
.apss-vs-toggle { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 13px;
border-bottom: 1px solid var(--apss-line); background: #fafbfc; }
.apss-vs-tgl-lbl { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #8a93a3; margin-right: 2px; }
.apss-vs-tgl { flex: 0 0 auto; font: 700 10.5px/1 "Segoe UI", system-ui, sans-serif; color: var(--apss-muted);
background: #fff; border: 1px solid var(--apss-line-2); border-radius: 6px; padding: 5px 11px; cursor: pointer; }
.apss-vs-tgl:hover { border-color: #b9c0cc; }
.apss-vs-tgl.active { background: var(--apss-ink); color: #fff; border-color: var(--apss-ink); }
.apss-vs-cmp { display: none; }
.apss-vs-cmp.active { display: block; }
.apss-vs-h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800;
text-transform: uppercase; letter-spacing: .05em; padding: 9px 13px; border-bottom: 1px solid; }
.apss-vs-h.apss-vs-green { color: #2e7d32; background: #e7f4e8; border-color: #bfe2c2; }
.apss-vs-h.apss-vs-amber { color: #9a6a00; background: #fdf3e0; border-color: #f0dcb4; }
.apss-vs-pics { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 13px; }
.apss-vs-col { text-align: center; }
.apss-vs-col img, .apss-vs-col .fb { width: 60px; height: 60px; object-fit: contain; background: #fff;
border: 1px solid var(--apss-line); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.apss-vs-col .fb { font-size: 28px; opacity: .4; }
.apss-vs-lbl { display: block; font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em;
color: #8a93a3; font-weight: 800; margin-top: 5px; }
.apss-vs-arr { color: var(--apss-red); font-weight: 900; font-size: 18px; }
.apss-vs-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.apss-vs-tbl th { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: #8a93a3;
font-weight: 800; text-align: left; padding: 0 13px 6px; }
.apss-vs-tbl th:first-child { width: 30%; }
.apss-vs-tbl td { padding: 6px 13px; border-top: 1px solid #f0f2f5; vertical-align: top; }
.apss-vs-tbl .k { color: var(--apss-muted); }
.apss-vs-tbl .a { color: #1c2b4a; font-weight: 700; }
.apss-vs-tbl .b { color: var(--apss-ink); font-weight: 800; }
.apss-vs-ok { color: #2e7d32; display: inline-grid; place-items: center; vertical-align: -2px; }
.apss-vs-none { color: #8a93a3; font-weight: 600; font-style: italic; }
/* A differing spec reads in a clear light red (amber wasn't strong enough). */
.apss-vs-tbl .b.apss-vs-bdiff { color: #d83a4a; background: #fdecee; }
.apss-vs-cnames { display: flex; flex-wrap: wrap; gap: 3px; }
.apss-vs-cnames span { font-size: 9px; font-weight: 700; color: #2e7d32; background: #e7f4e8;
border: 1px solid #bfe2c2; border-radius: 3px; padding: 1px 5px; }
.apss-vs-cmore { background: #e7f4e8; }
.apss-vs-cta { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700;
padding: 9px 13px; border-top: 1px dashed; margin-top: 4px; }
.apss-vs-cta svg { flex: 0 0 auto; }
.apss-vs-cta-green { color: #2e7d32; border-top-color: #bfe2c2; }
.apss-vs-cta-amber { color: #9a6a00; border-top-color: #f0dcb4; }
/* CTA row — beats .apss-brand-row-two .apss-art-buy; pinned to the bottom so
both cards stay equal height. Square buttons; outline-red product page. */
.apss-pc .apss-art-buy.apss-pc-cta {
flex-direction: row; align-items: center; gap: 8px;
background: #fff; border: 0; border-top: 1px solid var(--apss-line-2);
border-radius: 0; padding: 11px 14px; margin-top: auto; align-self: stretch;
}
.apss-pc-cta .pl { display: none; }
.apss-pc-cta .apss-qty { flex: 0 0 auto; margin: 0; height: 34px; border-radius: 0; }
.apss-pc-cta .apss-qty button { width: 28px; }
.apss-pc-cta .apss-add { flex: 1 1 0; min-width: 0; height: 38px; box-sizing: border-box; border: 0; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.apss-pc-cta .apss-add svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* color must beat the global `.apss-drop a { color: inherit }` reset
(otherwise the product-page text renders ink/navy, not red). */
.apss-pc-cta .apss-pdp { flex: 1 1 0; min-width: 0; height: 38px; box-sizing: border-box; border-radius: 0; font-size: 11.5px; padding: 0 14px; color: var(--apss-red); display: inline-flex; align-items: center; justify-content: center; }
/* Single result: full width, rearranged to 3 columns — photo (left) ·
details + tiles (middle) · buy-box (right). The CTA becomes a vertical
buy-box instead of a stretched full-width bar. SARCLA 2026-06-14. */
.apss-brand-row-one .apss-art.apss-pc {
grid-template-columns: 220px 1fr 240px;
grid-template-rows: auto auto 1fr;
grid-template-areas: "bar bar bar" "photo body cta" "photo tiles cta";
}
.apss-brand-row-one .apss-art-buy.apss-pc-cta {
flex-direction: column; align-items: stretch; justify-content: center;
gap: 8px; padding: 14px; margin-top: 0;
border-top: 0; border-left: 1px solid var(--apss-line-2); background: #fff;
}
.apss-brand-row-one .apss-pc-cta .apss-qty { flex: 0 0 auto; width: 100%; height: 38px; }
.apss-brand-row-one .apss-pc-cta .apss-qty input { flex: 1; min-width: 0; }
/* flex:0 0 auto — in a vertical buy-box the inherited flex:1 made the
button grow DOWN to ~82px. Pin it to its own height. */
.apss-brand-row-one .apss-pc-cta .apss-add { flex: 0 0 auto; width: 100%; height: 38px; }
.apss-brand-row-one .apss-pc-cta .apss-pdp { flex: 0 0 auto; width: 100%; height: 38px; justify-content: center; }
/* Debug cart token — hidden in the live demo. Kept in the DOM for
automated tests that read the SKU+qty payload. */
.apss-ct { display: none; }
/* ai */
.apss-aicard { background: #fff; border-radius: var(--apss-radius); border: 1px solid var(--apss-line); overflow: hidden; display: grid; grid-template-columns: 1fr 1.5fr; }
.apss-aiside { background: linear-gradient(160deg, var(--apss-ai) 0%, var(--apss-ai-2) 60%, #ec4899 100%); color: #fff; padding: 20px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.apss-aiside::before { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.10); }
.apss-aiav { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 22px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; z-index: 1; }
.apss-aitag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; font-weight: 700; margin-top: 12px; position: relative; z-index: 1; }
.apss-aihead { font-size: 20px; font-weight: 700; line-height: 1.15; margin: 10px 0 8px; letter-spacing: -0.01em; position: relative; z-index: 1; color: #fff; }
.apss-aiblurb { font-size: 12.5px; line-height: 1.5; opacity: 0.85; position: relative; z-index: 1; color: #fff; }
.apss-chat { padding: 20px; display: flex; flex-direction: column; gap: 12px; font-family: var(--apss-font-chat); }
/* Inter across the whole chat column — bubbles, name labels, input, thinking. */
.apss-chat .apss-mb, .apss-chat .apss-mname, .apss-chat .apss-think-txt,
#apssAiIn, .apss-aiqbtn { font-family: var(--apss-font-chat); }
.apss-msg { display: flex; gap: 9px; max-width: 86%; }
.apss-msg.bot { align-self: flex-start; }
.apss-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.apss-mav { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.apss-msg.bot .apss-mav { background: linear-gradient(135deg, var(--apss-ai), var(--apss-ai-2)); color: #fff; }
.apss-msg.user .apss-mav { background: var(--apss-cream-2); color: var(--apss-ink-2); }
.apss-mb { background: var(--apss-bg-2); padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--apss-ink); }
.apss-msg.user .apss-mb { background: var(--apss-ink); color: #fff; }
.apss-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 0 35px; }
.apss-qbtn { border: 1px solid var(--apss-line); background: #fff; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--apss-ink-2); cursor: pointer; }
.apss-qbtn:hover { background: var(--apss-cream); border-color: var(--apss-red); color: var(--apss-red); }
.apss-aiin { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-top: 12px; border-top: 1px solid var(--apss-line); }
.apss-aiin input { border: 1px solid var(--apss-line); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 13px; outline: 0; }
.apss-aiin input:focus { border-color: var(--apss-ai); }
.apss-aisend { background: linear-gradient(135deg, var(--apss-ai), var(--apss-ai-2)); color: #fff; border: 0; padding: 0 16px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
/* skel */
/* Fluid shimmer: a symmetric gradient (bg-2 → cream → bg-2) that tiles, swept
at constant LINEAR speed by exactly one tile (200%) so the loop is seamless —
no slow-down-then-snap "on/off". SARCLA 2026-06-16. */
.apss-skel { background: linear-gradient(90deg, var(--apss-bg-2) 0%, var(--apss-cream-2) 50%, var(--apss-bg-2) 100%); background-size: 200% 100%; background-repeat: repeat; animation: apssSkel 1.6s linear infinite; border-radius: 6px; }
@keyframes apssSkel { 0%{background-position:0 0} 100%{background-position:-200% 0} }
/* =================================================================
Static fallback body content (revealed when Magento JS leaves the
page main column empty cross-origin)
================================================================= */
#apss-static-body[hidden] { display: none !important; }
#apss-static-body {
display: block;
padding: 28px 24px 60px;
max-width: 1240px;
margin: 0 auto;
font-family: var(--apss-font-body);
}
.apss-hero {
background: linear-gradient(135deg, var(--apss-ink) 0%, #274e64 100%);
color: #fff;
padding: 48px 36px;
border-radius: 18px;
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 28px;
align-items: center;
margin-bottom: 22px;
}
.apss-hero h1 { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
.apss-hero p { margin: 12px 0 0; opacity: 0.85; font-size: 15px; line-height: 1.5; color: #fff; }
.apss-hero-cta {
display: inline-block; margin-top: 18px;
background: var(--apss-red); color: #fff;
padding: 12px 22px; border-radius: 999px;
font-weight: 600; font-size: 14px; text-decoration: none;
}
.apss-hero-cta:hover { background: var(--apss-red-2); }
.apss-hero-glyph {
aspect-ratio: 4/3; border-radius: 16px;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.05) 50%, transparent 70%);
display: flex; align-items: center; justify-content: center;
font-size: 140px; opacity: 0.85;
}
.apss-divisions {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.apss-div {
background: #fff; border-radius: 14px; padding: 22px 16px;
border: 1px solid var(--apss-line);
text-align: center;
text-decoration: none; color: var(--apss-ink);
transition: all 200ms;
}
.apss-div:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: rgba(28,43,74,0.18); }
.apss-div .ic { display: block; font-size: 32px; margin-bottom: 6px; }
.apss-div strong { display: block; font-size: 13.5px; font-weight: 600; }
.apss-div small { display: block; font-size: 11px; color: var(--apss-muted); margin-top: 3px; }
@media (max-width: 980px) {
.apss-hero { grid-template-columns: 1fr; }
.apss-divisions { grid-template-columns: repeat(2, 1fr); }
.apss-mhero { grid-template-columns: 1fr; }
.apss-pgrid { grid-template-columns: repeat(2, 1fr); }
.apss-art { grid-template-columns: 1fr; }
.apss-aicard { grid-template-columns: 1fr; }
.apss-kbd { display: none; }
}
/* Stock badges (Phase 1 — populated only when the customer is logged into
apsoparts.com; silently absent otherwise). Injected after render by
enrichStockBadges() into the card's .apss-msl-meta / .apss-pcard-meta. */
.apss-stock-badge {
display: inline-block;
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
margin-left: 6px;
border-radius: 2px;
line-height: 1.4;
vertical-align: middle;
white-space: nowrap;
animation: apss-stock-fadein 0.25s ease-out;
}
.apss-stock-badge.in { background: rgba(46,125,50,0.12); color: var(--apss-green); }
.apss-stock-badge.out { background: rgba(234,88,12,0.12); color: #c2410c; }
@keyframes apss-stock-fadein {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================================
O-ring per-material columns. Each elastomer (NBR / FKM / EPDM / VMQ /
FFKM …) becomes a vertical column with its product cards stacked inside,
so the user can compare materials side-by-side without scrolling
horizontally per material row.
========================================================================= */
/* The "More across categories" section renders ONE horizontal
slider per category (matching the look of the main material sliders
above). Earlier this was a vertical multi-column layout — the user
asked to drop the "vertical section". Now everything scrolls
horizontally so the visual is consistent across the page. */
.apss-mat-cols {
display: flex;
flex-direction: column;
gap: 18px;
}
.apss-mat-col {
display: flex;
flex-direction: column;
min-width: 0;
}
.apss-mat-col-head {
display: flex; align-items: center; gap: 8px;
margin: 0 0 10px;
padding: 0;
/* No red underline — looks like the rest of the slider headers above. */
font-size: 17px;
font-weight: 700;
color: var(--apss-ink);
letter-spacing: -0.005em;
}
.apss-mat-col-count {
font-size: 10.5px;
font-weight: 700;
color: var(--apss-red);
background: rgba(200,40,31,0.08);
padding: 2px 7px;
border-radius: 999px;
letter-spacing: 0.04em;
}
/* Per-category list: horizontal slider — matches the main material
sliders' look (190px cards, scroll-x). Was a vertical column. */
.apss-mat-col-list {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 190px;
gap: 10px;
overflow-x: auto;
padding-bottom: 16px;
scroll-snap-type: x mandatory;
justify-content: start;
}
/* Cards inside the per-category slider — match the 190px width of
the main material sliders above for visual consistency. */
.apss-mat-col-list .apss-msl-card {
padding: 8px;
scroll-snap-align: start;
}
.apss-mat-col-list .apss-msl-title {
font-size: 12px;
margin: 6px 0 2px;
min-height: calc(2 * 12px * 1.35);
}
.apss-mat-col-list .apss-msl-meta {
font-size: 10.5px;
}
/* Old responsive overrides removed — .apss-mat-cols is now a vertical
stack of horizontal sliders (one per category) so no column count
to override. */
/* Brand-family keyword pages (HITEC, NORMATEC, EVOLAST, KALREZ, FEP-O-SEAL,
AIRSPIR, SYNCHROFLEX…). Only a handful of cards, so we lay them ALL out on
one inline row (wrapping to a new line when a family has many) — no
per-material columns, no vertical stacking. Scoped to .apss-bf-row; the
global .apss-mat-cols vertical stack is untouched. */
.apss-bf-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: flex-start;
}
/* Fixed ~190px card (matches the main material sliders) so the square
product image never blows up. */
.apss-bf-row .apss-msl-card { padding: 8px; width: 190px; flex: 0 0 190px; }
.apss-bf-row .apss-msl-title {
font-size: 12px;
margin: 6px 0 2px;
min-height: calc(2 * 12px * 1.35);
}
.apss-bf-row .apss-msl-meta { font-size: 10.5px; }
/* =========================================================================
Discontinued-programme notice — split-pane card.
Left: red-gradient "status" pane with the discontinued tag, an icon,
and the headline / explanation.
Right: two action cards stacked vertically — primary SUSPA outbound
link + secondary "search by SKU" prompt.
========================================================================= */
.apss-disc2 {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 18px;
align-items: stretch;
margin: 6px 0 8px;
font-family: var(--apss-font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.apss-disc2 *,
.apss-disc2 *::before,
.apss-disc2 *::after {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.apss-disc2-hero {
background: linear-gradient(155deg, var(--apss-red) 0%, #ed1b2f 55%, #a01017 100%);
color: #fff;
border-radius: 16px;
padding: 26px 28px 30px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.apss-disc2-hero::after {
content: "";
position: absolute;
inset: auto -40px -60px auto;
width: 220px; height: 220px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
pointer-events: none;
}
.apss-disc2-status {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.32);
font: 700 12px/1 inherit;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 12px;
border-radius: 999px;
margin-bottom: auto;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.apss-disc2-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px rgba(255,255,255,0.85);
animation: apssDiscDot 1.4s ease-in-out infinite;
}
@keyframes apssDiscDot { 0%,100% { opacity:0.4; } 50% { opacity:1; } }
.apss-disc2-art {
width: 96px; height: 96px;
margin: 18px 0 14px;
}
.apss-disc2-hero h2 {
margin: 0 0 10px;
font-size: 30px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.018em;
}
.apss-disc2-hero p {
margin: 0;
font-size: 15px;
line-height: 1.55;
opacity: 0.94;
max-width: 40ch;
}
.apss-disc2-options {
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
}
.apss-disc2-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
text-align: left;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid var(--apss-line);
border-radius: 14px;
padding: 18px 20px 16px;
cursor: pointer;
font-family: inherit;
transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.apss-disc2-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(15,23,42,0.10);
border-color: var(--apss-red);
}
.apss-disc2-tag {
font: 700 11.5px/1 inherit;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--apss-red);
margin-bottom: 6px;
}
.apss-disc2-card h3 {
margin: 0;
font-size: 19px;
font-weight: 700;
color: var(--apss-ink);
letter-spacing: -0.008em;
line-height: 1.25;
}
.apss-disc2-card p {
margin: 0;
font-size: 14.5px;
line-height: 1.5;
color: var(--apss-muted);
}
.apss-disc2-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 14px;
font-weight: 700;
color: #fff;
background: var(--apss-ink);
padding: 10px 18px;
border-radius: 999px;
align-self: flex-start;
transition: background 180ms;
}
.apss-disc2-card.primary .apss-disc2-cta { background: var(--apss-red); }
.apss-disc2-card.primary:hover .apss-disc2-cta { background: var(--apss-red-2); }
.apss-disc2-cta svg { width: 16px; height: 16px; }
.apss-disc2-cta-ghost {
background: transparent;
color: var(--apss-ink);
border: 1px solid var(--apss-line);
}
.apss-disc2-card.secondary:hover .apss-disc2-cta-ghost {
border-color: var(--apss-red);
color: var(--apss-red);
}
@media (max-width: 720px) {
.apss-disc2 { grid-template-columns: 1fr; }
.apss-disc2-hero h2 { font-size: 22px; }
}
/* =================================================================
APSOassistant chat redesign — red theme, animated product-icon
loop, named bot avatar, line-icon user avatar, square buttons,
quick-reply chips. Appended last so these rules win over the
earlier .apss-ai* / .apss-msg.* declarations.
================================================================= */
/* ── Light "co-pilot" panel: white surface + an animated grainy red
hue-shift wash (variant R1 — mostly brand red, faint coral, 6s).
Content sits above via z-index. ── */
.apss-aicard--red .apss-aiside {
background: linear-gradient(180deg, #fdf1ef 0%, #f9e4e2 100%);
color: var(--apss-ink);
border-right: 1px solid var(--apss-line);
font-family: var(--apss-font-chat); /* Inter — consistent with the chat & cards */
}
.apss-aicard--red .apss-aiside .apss-aihead { font-family: var(--apss-font-chat); }
.apss-aicard--red .apss-aiside::before {
inset: 0; right: auto; top: auto; left: auto; bottom: auto;
width: auto; height: auto; border-radius: 0;
background: linear-gradient(160deg, rgba(200,40,31,0.42), rgba(237,27,47,0.34), rgba(180,20,28,0.32), rgba(200,40,31,0.42));
background-size: 200% 200%; animation: apssSideHue 6s ease infinite; z-index: 0;
}
/* film grain over the wash (matte, kills banding) */
.apss-aicard--red .apss-aiside::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
opacity: 0.06; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes apssSideHue { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* light-panel text colours (override the old white-on-red) */
.apss-aicard--red .apss-aitag { color: #515b6b; }
.apss-aicard--red .apss-aihead { color: var(--apss-ink); }
.apss-aicard--red .apss-aiblurb{ color: #6b7280; opacity: 1; }
/* Live conversation panel in the left red panel — fills in as the brain
understands the request, then morphs into the contact form on hand-off. */
.apss-sidepanel { position: relative; z-index: 1; }
/* Page-control progress bar (Understanding · Searching · Recommendation · Hand-off). */
.apss-pcbar { display: flex; align-items: center; gap: 11px; margin: 16px 0 6px; position: relative; z-index: 1; }
.apss-pcdots { display: flex; align-items: center; gap: 6px; }
.apss-pcdot { width: 7px; height: 7px; border-radius: 5px; background: #dfe3ea; transition: width 0.45s cubic-bezier(.2,.8,.2,1), background 0.45s; }
.apss-pcdot.done { background: var(--apss-red); }
/* upcoming (not-yet-reached) dots gently wave in sequence — keeps the bar alive */
.apss-pcdot:not(.act):not(.done) { animation: apssPcWave 1.5s ease-in-out infinite; }
.apss-pcdots .apss-pcdot:nth-child(1) { animation-delay: 0s; }
.apss-pcdots .apss-pcdot:nth-child(2) { animation-delay: 0.16s; }
.apss-pcdots .apss-pcdot:nth-child(3) { animation-delay: 0.32s; }
.apss-pcdots .apss-pcdot:nth-child(4) { animation-delay: 0.48s; }
@keyframes apssPcWave { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.45); } }
.apss-pcdot.act { width: 26px; background: linear-gradient(90deg, var(--apss-red), var(--apss-red-2)); position: relative; overflow: hidden; animation: apssPcBreathe 2.2s ease-in-out infinite; }
.apss-pcdot.act::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent); transform: translateX(-100%); animation: apssPcCap 1.4s ease-in-out infinite; }
@keyframes apssPcCap { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(240%); } }
@keyframes apssPcBreathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,40,31,0); } 50% { box-shadow: 0 0 9px 0 rgba(200,40,31,0.5); } }
.apss-pcstatus { font-size: 12px; font-weight: 700; color: var(--apss-red); letter-spacing: -0.01em; }
.apss-cp-status {
font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
color: #9aa1ad; margin: 2px 0 12px;
}
/* Quiet "narrowing the best match" status — shown on a clarification turn
instead of stale product cards. Soft shimmer reads as live, not stuck. */
.apss-cp-narrow {
text-transform: none; letter-spacing: 0.01em; font-weight: 600; font-size: 11px;
color: #b3b8c2;
background: linear-gradient(90deg, #b3b8c2 0%, #6b7280 50%, #b3b8c2 100%);
background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: apss-narrow-shimmer 1.8s ease-in-out infinite;
}
@keyframes apss-narrow-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Count chip next to the "Suggested alternatives" header. */
.apss-rec-count {
display: inline-block; min-width: 16px; padding: 1px 6px; margin-left: 2px;
border-radius: 999px; background: var(--apss-red); color: #fff;
font-size: 10px; font-weight: 800; line-height: 1.5; text-align: center; vertical-align: middle;
}
/* Alternatives shelf — scrollable when there are many suitable products so the
panel proposes a real spread instead of going empty. */
.apss-precs--alts {
max-height: 290px; overflow-y: auto; padding-right: 4px;
scrollbar-width: thin; scrollbar-color: rgba(200,40,31,0.35) transparent;
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.apss-precs--alts::-webkit-scrollbar { width: 6px; }
.apss-precs--alts::-webkit-scrollbar-thumb { background: rgba(200,40,31,0.30); border-radius: 6px; }
/* ── Rich product bubble in the chat (small photo + name + link) ─────────── */
.apss-pbubble {
display: flex; align-items: center; gap: 11px; text-decoration: none;
background: #fff; border: 1px solid var(--apss-line); border-radius: 14px;
padding: 9px 12px 9px 9px; max-width: 320px;
box-shadow: 0 2px 10px rgba(15,23,42,0.06);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.apss-pbubble:hover { border-color: rgba(200,40,31,0.45); box-shadow: 0 8px 22px rgba(200,40,31,0.14); transform: translateY(-1px); }
.apss-pbub-img {
flex: none; width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
background: #f4f5f7; display: flex; align-items: center; justify-content: center;
}
.apss-pbub-img img { width: 100%; height: 100%; object-fit: contain; }
.apss-pbub-img.apss-pbub-ph svg { width: 30px; height: 30px; }
.apss-pbub-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apss-pbub-nm { font-size: 13px; font-weight: 700; color: var(--apss-ink); line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.apss-pbub-sp, .apss-pbub-sku { font-size: 11px; color: var(--apss-muted); }
.apss-pbub-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
font-size: 11.5px; font-weight: 700; color: var(--apss-red); }
.apss-pbub-go svg { width: 13px; height: 13px; }
.apss-pbubble:hover .apss-pbub-go svg { transform: translateX(2px); transition: transform .2s ease; }
.apss-cp-list { display: flex; flex-direction: column; gap: 11px; }
.apss-cp-row { display: flex; gap: 10px; align-items: flex-start; }
.apss-cp-check {
flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
background: var(--apss-red); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; line-height: 1;
}
.apss-cp-text { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.apss-cp-k {
font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
color: #9aa1ad;
}
/* Captured value rendered as a soft tag/chip (light panel). */
.apss-cp-tag {
display: inline-flex; align-items: center; max-width: 100%;
background: #f4f6f9;
border: 1px solid #e9ebf0;
color: #16203a; font-size: 13px; font-weight: 600; line-height: 1.25;
padding: 4px 11px; border-radius: 4px;
word-break: break-word;
}
/* Recommendation cards in the side panel — white cards on the red panel,
the whole card links to the locale-correct product page + a basket button. */
.apss-precs { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.apss-reccard {
display: flex; align-items: center; gap: 10px;
background: #fff; border-radius: 4px; padding: 8px; position: relative;
box-shadow: 0 4px 12px rgba(0,0,0,0.14);
}
.apss-pimg {
width: 46px; height: 46px; flex: none; border-radius: 3px; overflow: hidden;
background: #f3f4f6; display: flex; align-items: center; justify-content: center;
border: 1px solid #eceef2;
}
.apss-pimg img { width: 100%; height: 100%; object-fit: contain; }
.apss-pimg--ph svg { width: 30px; height: 30px; }
.apss-pmeta { flex: 1; min-width: 0; }
.apss-reccard .apss-pnm {
display: block; font-size: 12px; font-weight: 800; color: #16203a;
text-decoration: none; line-height: 1.15; letter-spacing: -0.01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.apss-reccard .apss-pnm:hover { color: var(--apss-red); }
.apss-psp { font-size: 10.5px; color: #475569; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* SKU subtitle (dimension defined) — clear, clickable, like the chat */
.apss-recsku { display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--apss-red); text-decoration: none; margin-top: 2px; letter-spacing: 0.01em; }
.apss-recsku:hover { text-decoration: underline; }
.apss-pcert {
display: inline-flex; align-items: center; font-size: 9px; font-weight: 800;
color: #2e7d32; background: rgba(46,125,50,0.10); border-radius: 3px; padding: 1px 6px; margin-top: 5px;
}
/* "View product" button — replaces the add-to-cart basket on the tile */
.apss-recgo {
width: 30px; height: 30px; flex: none; border-radius: 3px;
display: flex; align-items: center; justify-content: center;
background: var(--apss-red); color: #fff; text-decoration: none;
transition: background 140ms, transform 140ms;
}
.apss-recgo:hover { background: var(--apss-red-2); }
/* force white arrow regardless of inherited panel link colour (contrast) */
.apss-reccard .apss-recgo, .apss-reccard .apss-recgo svg { color: #fff; stroke: #fff; }
.apss-recgo svg { width: 16px; height: 16px; }
.apss-reccard:hover .apss-recgo svg { animation: apssGoNudge 0.6s ease; }
@keyframes apssGoNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
/* legacy basket (kept for any other caller) */
.apss-pbasket {
width: 30px; height: 30px; flex: none; border-radius: 3px;
display: flex; align-items: center; justify-content: center;
background: var(--apss-red); color: #fff; text-decoration: none; transition: background 140ms;
}
.apss-pbasket:hover { background: var(--apss-red-2); }
.apss-pbasket svg { width: 15px; height: 15px; }
/* ── Hero card (narrowed to ONE article) — bigger, detailed, animated ── */
.apss-precs-1 { margin-top: 9px; }
.apss-herocard {
position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
background: #fff; border-radius: 5px; padding: 16px 16px 14px; gap: 3px;
box-shadow: 0 10px 30px rgba(15,23,42,0.12); border: 1px solid rgba(200,40,31,0.14);
overflow: hidden; animation: apssHeroIn 0.5s cubic-bezier(.2,.8,.2,1) backwards;
}
.apss-herocard::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--apss-red), var(--apss-red-2));
}
@keyframes apssHeroIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
.apss-heroimg {
position: relative; width: 96px; height: 96px; border-radius: 5px; overflow: hidden;
background: #f5f6f8; border: 1px solid #eceef2; display: flex; align-items: center; justify-content: center;
margin-bottom: 8px;
}
.apss-heroimg img { width: 100%; height: 100%; object-fit: contain; animation: apssHeroFloat 3.6s ease-in-out infinite; }
@keyframes apssHeroFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.03); } }
.apss-heroimg.apss-pimg--ph svg { width: 56px; height: 56px; animation: none; }
/* sheen sweep across the hero image */
.apss-heroglow { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.apss-heroglow::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%);
transform: translateX(-130%); animation: apssRecGloss 3.2s ease-in-out infinite;
}
.apss-heronm { font-size: 15px; font-weight: 900; letter-spacing: -0.02em; color: #16203a; text-decoration: none; line-height: 1.18; }
.apss-heronm:hover { color: var(--apss-red); }
.apss-herosp { font-size: 11px; color: #475569; font-weight: 500; margin-top: 1px; }
.apss-herosku { display: inline-block; font-size: 11px; font-weight: 700; color: var(--apss-red); text-decoration: none; margin-top: 4px; }
.apss-herosku:hover { text-decoration: underline; }
.apss-herocerts { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 8px; }
.apss-herobtn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 13px; width: 100%; padding: 10px 14px; border-radius: 3px;
background: var(--apss-red); color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none;
box-shadow: 0 6px 16px rgba(200,40,31,0.26); transition: background 140ms, transform 140ms, box-shadow 140ms;
}
/* force white text/icon regardless of inherited panel link colour (contrast) */
.apss-herocard .apss-herobtn, .apss-herocard .apss-herobtn span, .apss-herocard .apss-herobtn svg { color: #fff; stroke: #fff; }
.apss-herobtn svg { width: 16px; height: 16px; }
.apss-herobtn:hover { background: var(--apss-red-2); transform: translateY(-1px); box-shadow: 0 9px 20px rgba(200,40,31,0.32); }
/* engineering disclaimer next to "Recommended" — caps to match the label */
.apss-rec-note { font-weight: 600; font-size: 10px; color: #98a0ad; }
/* ── recommendation photo motion: gloss sweep (all) + hover zoom, plus a
cut-line accent for cut-to-size, and the real saw button. ── */
.apss-reccard .apss-pimg { position: relative; }
.apss-reccard .apss-pimg img { transition: transform 0.45s cubic-bezier(.2,.7,.3,1); }
.apss-reccard:hover .apss-pimg img { transform: scale(1.1); }
.apss-pimg-acc { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.apss-pimg-acc::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.55) 50%, transparent 58%);
transform: translateX(-130%); animation: apssRecGloss 3.4s ease-in-out infinite;
}
@keyframes apssRecGloss { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
/* cut-to-size: a faint red cut line sweeps across the plate photo */
/* (cut-line sweep animation removed per SARCLA — too busy on the cards) */
/* saw button (cut-to-size) — real apsoparts icon, pulse + hover fill */
.apss-recsaw {
width: 30px; height: 30px; flex: none; border-radius: 3px;
display: flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--apss-red); color: var(--apss-red);
position: relative; text-decoration: none; transition: background 140ms, color 140ms;
}
.apss-recsaw svg { width: 17px; height: 17px; position: relative; z-index: 2; }
.apss-recsaw:hover { background: var(--apss-red); color: #fff; border-color: var(--apss-red); }
.apss-recsaw svg, .apss-recsaw:hover svg { fill: currentColor; }
.apss-recsaw-pulse { position: absolute; inset: -1px; border-radius: 3px; border: 2px solid var(--apss-red); opacity: 0; animation: apssSawPulse 2.2s ease-out infinite; }
.apss-recsaw:hover .apss-recsaw-pulse { display: none; }
/* Close-conversation button — top-right of the card */
.apss-aicard--red { position: relative; }
.apss-aiclose {
position: absolute; top: 10px; right: 12px; z-index: 12;
width: 30px; height: 30px; border-radius: 6px; border: none; padding: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(15,23,42,0.06); color: #6b7280; cursor: pointer;
transition: background 0.16s, color 0.16s, transform 0.16s;
}
.apss-aiclose svg { width: 16px; height: 16px; display: block; }
.apss-aiclose:hover { background: var(--apss-red); color: #fff; transform: rotate(90deg); }
@keyframes apssSawPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } }
/* skeleton recommendation cards — shown while the brain is thinking.
Geometry matches the real card EXACTLY (image + 2 lines + action button)
so when results arrive there is no layout jump ("the thing is changing"). */
.apss-recskel { pointer-events: none; }
.apss-recskel .apss-pimg { border: none; }
.apss-recskel .apss-skln1 { display: block; height: 11px; width: 72%; border-radius: 3px; }
.apss-recskel .apss-skln2 { display: block; height: 9px; width: 46%; border-radius: 3px; margin-top: 7px; }
.apss-recskel .apss-skact { display: block; width: 30px; height: 30px; flex: none; border-radius: 3px; }
/* skeleton + content crossfade so the swap is smooth, not a hard cut */
.apss-precs { transition: opacity 0.25s ease; }
.apss-recskel { opacity: 1; animation: apssSkelIn 0.3s ease backwards; }
@keyframes apssSkelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* slim indeterminate progress line under the "Searching…" status */
.apss-think-prog { position: relative; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(200,40,31,0.12); margin: 8px 0 2px; }
.apss-think-prog::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, var(--apss-red), var(--apss-red-2)); animation: apssThinkProg 1.15s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes apssThinkProg { 0% { left: -40%; } 100% { left: 100%; } }
.apss-cp-status[data-think] { transition: opacity 0.2s ease; }
/* Contextual action cards — order / delivery / invoice / account shortcuts.
Squared (no rounded), red-accent icon tile, animated icon (truck drives,
user pulses), chevron nudges on hover. Same family as the rec cards. */
.apss-acts { display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 1; margin-top: 4px; }
.apss-actcard {
display: flex; align-items: center; gap: 11px; text-decoration: none;
background: #fff; border: 1px solid var(--apss-line); border-radius: 3px;
padding: 9px 11px; box-shadow: 0 3px 12px rgba(15,23,42,0.05);
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.apss-actcard:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(200,40,31,0.13); border-color: rgba(200,40,31,0.35); }
.apss-act-ic {
width: 36px; height: 36px; flex: none; border-radius: 3px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--apss-red), var(--apss-red2, #ed1b2f));
color: #fff; box-shadow: 0 4px 11px rgba(200,40,31,0.24);
position: relative;
}
/* continuous sheen sweep across the icon tile — guarantees visible motion */
.apss-act-ic::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%);
transform: translateX(-130%); animation: apssActSheen 2.8s ease-in-out infinite;
}
@keyframes apssActSheen { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
.apss-act-ic svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.apss-act-meta { flex: 1; min-width: 0; }
.apss-act-nm { font-size: 12.5px; font-weight: 800; letter-spacing: -0.01em; color: #16203a; line-height: 1.16; }
.apss-act-sub { font-size: 10px; color: #6b7585; margin-top: 1px; }
.apss-act-chev { flex: none; color: #c2c8d2; transition: transform 0.15s, color 0.15s; animation: apssActNudge 2.2s ease-in-out infinite; }
.apss-act-chev svg { width: 15px; height: 15px; display: block; }
.apss-actcard:hover .apss-act-chev { color: var(--apss-red); transform: translateX(3px); animation: none; }
@keyframes apssActNudge { 0%,70%,100% { transform: translateX(0); } 82% { transform: translateX(3px); } }
/* truck clearly drives — loop right/left + a small bob */
.apss-act-track .apss-act-ic svg { animation: apssTruck 1.9s ease-in-out infinite; }
@keyframes apssTruck { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px) translateY(-1px); } }
/* user pulses */
.apss-act-acct .apss-act-ic svg { animation: apssActPulse 2.2s ease-in-out infinite; transform-origin: center; }
@keyframes apssActPulse { 0%,100% { transform: scale(0.94); } 50% { transform: scale(1.12); } }
/* invoice doc — subtle paper lift */
.apss-act-inv .apss-act-ic svg { animation: apssActPulse 2.6s ease-in-out infinite; transform-origin: center; }
/* Welcome state — short tagline + clickable example-query chips. */
.apss-wc-tag { font-size: 13px; color: #46505f; line-height: 1.5; margin-top: 16px; font-weight: 500; position: relative; z-index: 1; }
.apss-wc-try { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: #8a92a0; margin: 20px 0 9px; position: relative; z-index: 1; }
.apss-wc-chips { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; margin-top: 16px; }
.apss-wc-chip {
display: inline-flex; align-items: center; gap: 7px;
background: #fff; border: 1px solid var(--apss-line); border-radius: 3px;
padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: #16203a; font-family: inherit;
cursor: pointer; box-shadow: 0 3px 10px rgba(15,23,42,0.05);
/* backwards fill = hidden during the stagger delay, then base rule takes over
so :hover transform actually applies (forwards used to lock it). */
transition: transform 0.16s cubic-bezier(.2,.7,.3,1), box-shadow 0.16s, border-color 0.16s, color 0.16s, background 0.16s;
animation: apssWcIn 0.45s cubic-bezier(.2,.7,.3,1) backwards;
}
.apss-wc-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(200,40,31,0.16); border-color: var(--apss-red); color: var(--apss-red); background: #fff6f5; }
.apss-wc-chip svg { width: 14px; height: 14px; flex: none; transition: transform 0.16s cubic-bezier(.2,.7,.3,1); }
.apss-wc-chip:hover svg { transform: scale(1.14); }
.apss-wc-chip svg [stroke], .apss-wc-chip svg { stroke: var(--apss-red); }
@keyframes apssWcIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Welcome capabilities — only what the assistant actually does here (no
numbers, no cut). On a white card so the text stays readable over the red. */
.apss-wc-caps {
margin-top: 18px; display: flex; flex-direction: column; gap: 12px;
position: relative; z-index: 1; padding: 14px;
background: #fff; border: 1px solid var(--apss-line); border-radius: 4px;
box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.apss-wc-cap { display: flex; align-items: center; gap: 11px; animation: apssWcIn 0.45s cubic-bezier(.2,.7,.3,1) backwards; }
.apss-wc-cap-ic {
width: 32px; height: 32px; flex: none; border-radius: 3px;
display: flex; align-items: center; justify-content: center;
background: rgba(200,40,31,0.10); color: var(--apss-red);
}
.apss-wc-cap-ic svg { width: 17px; height: 17px; }
.apss-wc-cap-t { font-size: 12.5px; font-weight: 800; color: #16203a; letter-spacing: -0.01em; line-height: 1.18; }
.apss-wc-cap-d { font-size: 10.5px; color: #5b6473; margin-top: 1px; }
.apss-wc-foot {
margin-top: 14px; font-size: 10.5px; color: #7a828f; font-weight: 600;
position: relative; z-index: 1; text-align: center;
animation: apssWcIn 0.5s cubic-bezier(.2,.7,.3,1) 0.5s backwards;
}
/* Auto-hide scrollbars — only visible while hovering the scroll area. */
.apss-chat-scroll, .apss-aicard--red .apss-aiside { scrollbar-width: none; }
.apss-chat-scroll::-webkit-scrollbar, .apss-aicard--red .apss-aiside::-webkit-scrollbar { width: 8px; height: 8px; }
.apss-chat-scroll::-webkit-scrollbar-thumb, .apss-aicard--red .apss-aiside::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.apss-chat-scroll:hover, .apss-aicard--red .apss-aiside:hover { scrollbar-width: thin; scrollbar-color: rgba(200,40,31,0.3) transparent; }
.apss-chat-scroll:hover::-webkit-scrollbar-thumb, .apss-aicard--red .apss-aiside:hover::-webkit-scrollbar-thumb { background: rgba(200,40,31,0.28); }
/* "Listening" dots in the empty state — a quiet sign the panel is live. */
.apss-cp-listening { display: flex; gap: 6px; margin-top: 14px; }
.apss-cp-listening span {
width: 7px; height: 7px; border-radius: 50%; background: rgba(200,40,31,0.45);
animation: apssListen 1.3s ease-in-out infinite;
}
.apss-cp-listening span:nth-child(2) { animation-delay: 0.18s; }
.apss-cp-listening span:nth-child(3) { animation-delay: 0.36s; }
@keyframes apssListen { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
/* Hand-off contact form — morphs into the left red panel on escalate. */
.apss-aiside--form {
justify-content: flex-start;
overflow-y: auto;
}
.apss-leadform { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 11px; }
.apss-lf-head { margin-bottom: 2px; }
.apss-lf-sub { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: #6b7280; }
.apss-lf-grid { display: flex; flex-direction: column; gap: 10px; }
.apss-lf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.apss-lf-row { display: flex; flex-direction: column; gap: 4px; }
.apss-lf-lbl {
font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
text-transform: uppercase; color: #7a828f;
}
.apss-lf-in {
width: 100%; box-sizing: border-box;
background: #fff; color: #16203a;
border: 1px solid #e3e6ec; border-radius: 4px;
padding: 9px 10px; font-size: 13px; font-family: inherit;
outline: none; transition: box-shadow 140ms, border-color 140ms;
}
.apss-lf-in:focus { border-color: var(--apss-red); box-shadow: 0 0 0 3px rgba(200,40,31,0.12); }
textarea.apss-lf-in { resize: vertical; min-height: 38px; }
.apss-lf-submit {
margin-top: 6px; width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
background: linear-gradient(135deg, var(--apss-red), var(--apss-red-2));
color: #fff; border: none; border-radius: 4px; padding: 13px 16px;
font-size: 13px; font-weight: 800; letter-spacing: 0.01em; font-family: inherit;
cursor: pointer; transition: filter 160ms, box-shadow 160ms, transform 160ms;
box-shadow: 0 6px 16px rgba(200,40,31,0.26);
}
.apss-lf-submit svg { width: 16px; height: 16px; }
.apss-lf-submit:hover { filter: brightness(0.93); box-shadow: 0 11px 26px rgba(200,40,31,0.38); transform: translateY(-1px); }
.apss-lf-submit:active { transform: translateY(0); filter: brightness(0.88); box-shadow: 0 4px 12px rgba(200,40,31,0.30); }
.apss-lf-submit:disabled { filter: grayscale(0.25) brightness(0.95); cursor: default; transform: none; box-shadow: 0 4px 12px rgba(200,40,31,0.2); }
.apss-lf-status { font-size: 12px; min-height: 14px; color: #6b7280; }
.apss-lf-status.err { color: var(--apss-red); font-weight: 700; }
.apss-lf-thanks {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
justify-content: center; height: 100%;
}
.apss-lf-check {
width: 44px; height: 44px; border-radius: 50%;
background: var(--apss-red); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 700;
box-shadow: 0 8px 20px rgba(200,40,31,0.3);
animation: apssLfPop 0.4s cubic-bezier(.2,1.3,.5,1);
}
@keyframes apssLfPop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* Single morphing avatar (replaces both the gear glyph and the
earlier line-of-6 icons). Same pattern as the challengingdawn.pt
chatbot: one container that cross-morphs through a small set of
stroke-drawn glyphs every 2.4s. Between morphs each glyph plays
its own ambient idle motion (twinkle / breathe / spin). */
.apss-aicard--red .apss-aiav { display: none; }
.apss-bubble-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 16px;
}
.apss-bubble-icon {
position: relative;
width: 40px; height: 40px;
border-radius: 6px;
background: linear-gradient(135deg, var(--apss-red), var(--apss-red-2));
border: none;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 5px 13px rgba(200,40,31,0.26);
z-index: 1;
}
.apss-bubble-icon::after {
/* Subtle online-indicator pulse, mirrors the green dot next to the
APSOassistant avatar in the live HubSpot chat header. */
content: "";
position: absolute;
right: 2px; bottom: 2px;
width: 10px; height: 10px;
border-radius: 50%;
background: #22c55e;
border: 2px solid #fff;
box-shadow: 0 0 0 0 rgba(34,197,94,0.6);
animation: apssDotPulse 1.8s ease-out infinite;
z-index: 2;
}
@keyframes apssDotPulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.apss-bubble-icon svg {
position: absolute; inset: 0; margin: auto;
width: 30px; height: 30px;
color: #fff;
transform-origin: center;
animation: apssAvatarFloat 3.6s ease-in-out infinite;
}
/* 3-glyph cross-fade morph (sparkle → magnifier → O-ring). */
.apss-bubble-icon.apss-gcyc .apss-gly {
position: absolute; inset: 0; margin: auto;
width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(.4) rotate(-40deg);
}
.apss-bubble-icon.apss-gcyc .apss-gly svg {
position: static; width: 30px; height: 30px; animation: none; transform: none;
}
.apss-gly1 { animation: apssGcyc 6.4s ease-in-out infinite; }
.apss-gly2 { animation: apssGcyc 6.4s ease-in-out infinite; animation-delay: 2.13s; }
.apss-gly3 { animation: apssGcyc 6.4s ease-in-out infinite; animation-delay: 4.27s; }
@keyframes apssGcyc {
0% { opacity: 0; transform: scale(.4) rotate(-40deg); }
6% { opacity: 1; transform: scale(1) rotate(0); }
27% { opacity: 1; transform: scale(1) rotate(0); }
33% { opacity: 0; transform: scale(1.5) rotate(40deg); }
100% { opacity: 0; transform: scale(1.5) rotate(40deg); }
}
/* Soft glowing halo around the avatar — quiet, modern AI feel. */
.apss-bubble-icon.apss-bubble-anim { animation: apssAvatarGlow 2.8s ease-in-out infinite; }
@keyframes apssAvatarGlow {
0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.16), 0 0 12px rgba(255,255,255,0.10); }
50% { box-shadow: 0 0 0 7px rgba(255,255,255,0.05), 0 0 26px rgba(255,255,255,0.22); }
}
@keyframes apssAvatarFloat {
0%,100% { transform: rotate(-7deg) scale(1); }
50% { transform: rotate(7deg) scale(1.07); }
}
/* The little secondary spark twinkles on its own. */
.apss-av-spark { transform-origin: 19px 5px; animation: apssAvatarTwinkle 1.9s ease-in-out infinite; }
@keyframes apssAvatarTwinkle { 0%,100% { opacity: 0.45; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }
/* Legacy idle classes (no longer applied) kept harmless. */
.apss-idle-spin, .apss-idle-breathe, .apss-idle-twinkle { animation: none; }
.apss-aicard--red .apss-aitag {
margin-top: 2px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
}
.apss-aicard--red .apss-aihead {
color: var(--apss-ink);
font-size: 26px;
line-height: 1.18;
margin: 14px 0 4px;
}
.apss-aicard--red .apss-aiblurb {
color: #6b7280;
opacity: 0.95;
font-size: 17px;
line-height: 1.55;
}
/* Square red Skip button (override pill) */
.apss-aicard--red .apss-ai-escalate {
background: rgba(0,0,0,0.22);
color: #fff;
border: 1px solid rgba(255,255,255,0.28);
border-radius: 6px;
padding: 10px 14px;
font-size: 12.5px; font-weight: 500;
text-align: center;
cursor: pointer;
}
.apss-aicard--red .apss-ai-escalate:hover { background: rgba(0,0,0,0.34); }
/* Bot avatar: red circle with white "A"; bot name "APSOassistant"
shown above the bubble in red. */
.apss-aicard--red .apss-msg.bot .apss-mav {
background: var(--apss-red);
color: #fff;
font-weight: 700;
width: 34px; height: 34px;
font-size: 16px;
}
.apss-aicard--red .apss-mb-wrap {
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
max-width: calc(100% - 44px); /* leave room for the 34px avatar + 10px gap */
}
.apss-aicard--red .apss-mb {
max-width: 100%;
word-break: break-word;
overflow-wrap: anywhere;
}
.apss-aicard--red .apss-mb .apss-skel {
max-width: 100%;
display: block !important;
width: 90px !important; /* tighter thinking-bubble pill */
}
.apss-aicard--red .apss-mname {
font-size: 13.5px;
font-weight: 700;
color: var(--apss-red);
letter-spacing: 0.04em;
padding-left: 2px;
}
/* User avatar: thin person line-icon on cream background */
.apss-aicard--red .apss-msg.user .apss-mav {
background: var(--apss-cream-2);
color: var(--apss-ink-2);
width: 34px; height: 34px;
}
.apss-aicard--red .apss-msg.user .apss-mav svg {
display: block;
width: 18px; height: 18px;
}
/* Message bubbles — match the live HubSpot APSOassistant chat:
bot in a soft cream bubble on the left, user in a red bubble on
the right with white text. */
.apss-aicard--red .apss-msg {
max-width: 92%;
gap: 10px;
align-items: flex-end;
}
/* Burst grouping — when a bot bubble follows another bot bubble in
the same answer, suppress the avatar and name so a 3-bubble reply
reads as one continuous voice. Tighter top-margin too. */
.apss-aicard--red .apss-msg.bot.burst {
margin-top: -6px;
}
.apss-aicard--red .apss-mav.apss-mav-ghost {
background: transparent !important;
box-shadow: none !important;
visibility: hidden;
}
.apss-aicard--red .apss-mb {
font-size: 15px;
line-height: 1.5;
padding: 11px 15px;
border-radius: 16px;
font-family: var(--apss-font-chat);
letter-spacing: 0;
}
.apss-aicard--red .apss-msg.bot .apss-mb {
background: #f4efe6;
color: var(--apss-ink);
border: 1px solid rgba(28,43,74,0.08);
border-bottom-left-radius: 5px;
}
/* apsoparts.com links the bot drops inline in its replies. */
.apss-mb-link {
color: var(--apss-red);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 600;
word-break: break-all;
}
.apss-mb-link:hover { color: var(--apss-red-2); text-decoration: underline; }
.apss-aicard--red .apss-msg.user .apss-mb {
background: var(--apss-red);
color: #fff;
border-bottom-right-radius: 5px;
box-shadow: 0 4px 14px rgba(200,40,31,0.22);
font-weight: 500;
}
/* APSOparts bot avatar — small red rounded square with white "AP"
mark, same shape as the live HubSpot chat avatar. */
.apss-aicard--red .apss-mav.apss-mav-apso {
background: var(--apss-red);
color: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(200,40,31,0.28);
}
.apss-mav-mark {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.04em;
font-family: var(--apss-font-body);
}
/* Fixed-height "window": the whole card is a fixed box; ONLY the chat
history and (if needed) the left panel scroll internally — the block
itself never grows/scrolls. (SARCLA: "no sense the whole block scrolls".) */
.apss-aicard--red { height: 560px; }
.apss-aicard--red .apss-aiside { overflow-y: auto; }
.apss-aicard--red .apss-chat {
height: 100%; max-height: none; box-sizing: border-box;
display: flex; flex-direction: column; overflow: hidden;
}
/* messages scroll here; input row is a sibling pinned at the bottom */
.apss-chat-scroll {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; gap: 10px;
}
/* Input row: red focus + square red Send button, bigger text. */
.apss-aicard--red .apss-aiin {
margin-top: 0;
padding-top: 16px;
gap: 12px;
}
@media (max-width: 720px) {
.apss-aicard--red { height: auto; }
.apss-aicard--red .apss-aiside { overflow-y: visible; }
.apss-aicard--red .apss-chat { height: auto; overflow: visible; }
.apss-chat-scroll { overflow-y: visible; }
}
.apss-aicard--red .apss-aiin input {
font-size: 16px;
padding: 13px 18px;
border-radius: 8px;
}
.apss-aicard--red .apss-aiin input:focus { border-color: var(--apss-red); }
.apss-aicard--red .apss-aisend {
background: var(--apss-red);
color: #fff;
border: 0;
padding: 0 22px;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
height: 46px;
}
.apss-aicard--red .apss-aisend:hover { background: var(--apss-red-2); }
/* Quick-reply chips above the input — square, red on hover */
.apss-aiquick {
display: flex; gap: 8px; flex-wrap: wrap;
padding: 6px 0 8px;
margin: 0;
}
.apss-aiqbtn {
background: #fff;
border: 1px solid var(--apss-line);
color: var(--apss-ink-2);
border-radius: 6px;
padding: 9px 14px;
font-size: 14.5px;
font-weight: 500;
cursor: pointer;
transition: all 150ms;
}
.apss-aiqbtn:hover {
border-color: var(--apss-red);
color: var(--apss-red);
background: rgba(200,40,31,0.04);
}
/* Square Send → specialist button on the escalation form */
.apss-aicard--red .apss-nomatch-primary,
.apss-escalate .apss-nomatch-primary {
border-radius: 6px;
}
/* Short-query hint — shown when no result AND query length <= 3,
instead of opening the chat. Flex column centering — the host
apsoparts page has a `p { margin: 0 }` rule that wiped out our
`margin: 0 auto`, so the 520-px-wide paragraph was pinned to the
left edge instead of being horizontally centered. align-items:
center on the parent is robust against any host margin reset. */
.apss-shortq {
padding: 44px 28px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: linear-gradient(135deg, #fffaf2 0%, var(--apss-cream) 100%);
border: 1px solid var(--apss-line);
border-radius: var(--apss-radius);
}
.apss-shortq-ic {
width: 64px; height: 64px;
margin: 0 0 16px;
background: #fff;
border: 2px solid var(--apss-red);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.apss-shortq h2 {
margin: 0 0 10px;
font-size: 22px; font-weight: 700;
color: var(--apss-ink);
letter-spacing: -0.01em;
text-align: center;
}
.apss-shortq p {
margin: 0;
max-width: 520px;
color: var(--apss-muted); font-size: 15px; line-height: 1.6;
text-align: center;
}
/* Special-article panel (search-bar shortcut for 80.xxxx.xxxx /
30.xxxx.xxxx codes that aren't in the public catalogue). Shown
directly in the dropdown without hopping into the AI chat. */
.apss-special-article {
display: grid;
grid-template-columns: 64px 1fr;
gap: 22px;
align-items: start;
padding: 24px 28px;
background: linear-gradient(135deg, #fff8f3 0%, var(--apss-cream) 100%);
border: 1px solid var(--apss-line);
border-left: 4px solid var(--apss-red);
border-radius: var(--apss-radius);
}
.apss-special-icon {
width: 60px; height: 60px;
background: #fff;
border: 2px solid var(--apss-red);
border-radius: 50%;
color: var(--apss-red);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.apss-special-tag {
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--apss-red);
margin-bottom: 8px;
}
.apss-special-body h2 {
margin: 0 0 12px;
font-size: 22px;
font-weight: 700;
color: var(--apss-ink);
letter-spacing: -0.01em;
}
.apss-special-body h2 code {
font: 800 22px ui-monospace, Menlo, "SF Mono", monospace;
background: rgba(200,40,31,0.08);
color: var(--apss-red);
padding: 2px 10px;
border-radius: 6px;
letter-spacing: 0.02em;
}
.apss-special-body p {
margin: 0 0 14px;
color: var(--apss-ink-2);
font-size: 14px;
line-height: 1.55;
}
.apss-special-body p b { color: var(--apss-ink); font-weight: 700; }
/* CTA — white text is forced via !important because the global
.apss-drop a reset ("color: inherit") otherwise pulls in the dark
ink of the surrounding panel. */
.apss-special-cta,
.apss-drop .apss-special-cta,
.apss-special-cta:visited,
.apss-special-cta:active,
.apss-special-cta:focus,
.apss-special-cta:hover {
display: inline-block;
background: var(--apss-red);
color: #fff !important;
padding: 11px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
letter-spacing: 0.01em;
transition: background 180ms, transform 180ms;
}
.apss-special-cta:hover {
background: var(--apss-red-2);
transform: translateY(-1px);
}
.apss-special-note {
margin-top: 14px !important;
font-size: 12.5px !important;
color: var(--apss-muted) !important;
border-top: 1px dashed var(--apss-line);
padding-top: 12px;
}
@media (max-width: 680px) {
.apss-special-article {
grid-template-columns: 1fr;
gap: 14px;
padding: 20px;
}
.apss-special-icon { width: 52px; height: 52px; }
}
/* ───────────────────────────────────────────────────────────────────
* Temperature view (Pass 5 — Szymon dotSource 2026-05-26)
* Reuses the red material-hero style so the page feels continuous
* with the rest of the bar's results. Chip rail under the hero
* shows every material family whose range covers the queried T.
* ─────────────────────────────────────────────────────────────────── */
.apss-temp-head {
background: linear-gradient(135deg, var(--apss-red) 0%, var(--apss-red-2) 60%, #8b1a14 100%);
color: #fff;
border-radius: var(--apss-radius);
padding: 16px 22px 14px;
position: relative;
overflow: hidden;
margin-bottom: 14px;
}
.apss-temp-head::after {
content: ""; position: absolute; right: -70px; bottom: -70px;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(255,255,255,0.12), transparent 70%);
border-radius: 50%;
}
.apss-temp-lbl {
font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase; opacity: 0.7; font-weight: 700;
position: relative; z-index: 1;
}
.apss-temp-head h2 {
margin: 4px 0 4px; font-size: 38px; font-weight: 800;
line-height: 1; letter-spacing: -0.02em; color: #fff;
position: relative; z-index: 1;
}
.apss-temp-sub {
margin: 0 0 10px; font-size: 13px; line-height: 1.45;
color: rgba(255,255,255,0.92);
position: relative; z-index: 1;
}
.apss-temp-chips {
display: flex; flex-wrap: wrap; gap: 6px;
position: relative; z-index: 1;
}
.apss-temp-chip {
display: inline-flex; align-items: baseline; gap: 6px;
/* Squared (6px) to match the bar's design language, not a pill; and more
opaque so it reads as a solid tag rather than a faint transparent one. */
background: rgba(255,255,255,0.26);
border: 1px solid rgba(255,255,255,0.34);
border-radius: 6px;
padding: 4px 10px;
font-size: 12px; font-weight: 600;
color: #fff;
}
.apss-temp-chip small {
font-size: 10px; font-weight: 400; opacity: 0.78;
}
.apss-temp-chip-sg {
background: rgba(255,235,200,0.22);
border-color: rgba(255,235,200,0.4);
}
/* ============================================================================
DESIGN LAYER — "Editorial sidebar × Friendly chat" (SARCLA 2026-06-17 pick).
Additive override block: everything here is scoped to .apss-aicard--red and
sits at the end of the file so it wins by source order. Delete this block to
revert to the previous look. State A reference: chat-design-editorial-friendly.html
========================================================================== */
/* ── LEFT PANEL → Editorial ───────────────────────────────────────────────*/
.apss-aicard--red .apss-aiside {
background: linear-gradient(170deg, #fbf9f5 0%, #f3efe7 100%);
}
/* calm the heavy animated red wash down to a faint editorial tint */
.apss-aicard--red .apss-aiside::before {
background: linear-gradient(170deg, rgba(200,40,31,0.05), rgba(200,40,31,0.015));
background-size: 100% 100%; animation: none;
}
.apss-aicard--red .apss-aiside::after { opacity: 0.04; }
/* kicker (the APSOASSISTANT tag) */
.apss-aicard--red .apss-aitag {
color: var(--apss-red); font-size: 10px; font-weight: 800;
letter-spacing: 0.18em; text-transform: uppercase;
}
/* the headline — brand display font (futura-pt) for the editorial voice
that matches the apsoparts search bar */
.apss-aicard--red .apss-aiside .apss-aihead {
font-family: var(--apss-font-head); /* futura-pt — matches the apsoparts search bar */
font-weight: 700; font-size: 24px; line-height: 1.12;
color: var(--apss-ink); margin: 10px 0 8px; letter-spacing: -0.01em;
}
/* section label ("Suggested alternatives N") */
.apss-aicard--red .apss-cp-status {
color: #9aa0a6; letter-spacing: 0.1em;
}
.apss-aicard--red .apss-rec-count { background: var(--apss-red); }
/* product picks rendered as hairline-separated "features", not boxed cards */
.apss-aicard--red .apss-precs { gap: 0; margin-top: 8px; }
.apss-aicard--red .apss-reccard {
background: transparent; border: 0; box-shadow: none; border-radius: 0;
padding: 11px 2px; gap: 13px; align-items: center;
border-bottom: 1px solid rgba(28,43,74,0.08);
}
.apss-aicard--red .apss-reccard:hover { transform: none; }
.apss-aicard--red .apss-reccard .apss-pimg {
width: 54px; height: 54px; flex: none; border-radius: 12px;
background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.07);
}
.apss-aicard--red .apss-reccard .apss-pnm {
font-family: var(--apss-font-head); font-weight: 600;
font-size: 15px; line-height: 1.15; color: var(--apss-ink);
}
.apss-aicard--red .apss-reccard .apss-psp { font-size: 11.5px; color: var(--apss-muted); }
.apss-aicard--red .apss-reccard .apss-recgo {
background: transparent; box-shadow: none; width: auto; height: auto;
color: var(--apss-red);
}
.apss-aicard--red .apss-reccard .apss-recgo svg { stroke: var(--apss-red); }
/* hero (single match) keeps the serif name too */
.apss-aicard--red .apss-herocard .apss-heronm { font-family: var(--apss-font-head); font-weight: 600; }
/* narrowing status: editorial italic */
/* narrowing status uses the SAME font as the rest of the chat (Inter), not a
special display/italic face. (SARCLA: "font should be like the rest".) */
.apss-aicard--red .apss-cp-narrow {
font-family: "Inter", "Segoe UI", system-ui, var(--apss-font-body);
font-style: normal;
}
/* Narrowing state = skeleton cards (SARCLA pick #21): a 2-up grid of small
shimmering card placeholders so the panel reads as actively searching. */
.apss-narrow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.apss-narrow-card {
display: flex; gap: 8px; align-items: center;
background: #fff; border: 1px solid rgba(28,43,74,0.07);
border-radius: 8px; padding: 8px;
}
.apss-narrow-im { width: 28px; height: 28px; border-radius: 5px; flex: none; }
.apss-narrow-ln { flex: 1; height: 9px; border-radius: 3px; }
/* ── RIGHT PANEL → Friendly chat, SQUARED (SARCLA 2026-06-17: square not
round, more contrast, no quick chips, cleaner close). ────────────────*/
/* squared brand avatar */
.apss-aicard--red .apss-msg.bot .apss-mav.apss-mav-apso {
border-radius: 7px; width: 30px; height: 30px;
background: linear-gradient(135deg, var(--apss-red), #ef5440);
box-shadow: 0 3px 9px rgba(200,40,31,0.26);
}
.apss-aicard--red .apss-mav-mark { font-size: 12px; }
.apss-aicard--red .apss-msg.user .apss-mav {
border-radius: 7px; width: 30px; height: 30px; background: #e3e6ec;
}
.apss-aicard--red .apss-msg.user .apss-mav svg { width: 15px; height: 15px; }
/* squared bubbles with REAL contrast — bot sits in a defined cool-grey
panel with a border so it reads clearly against the light chat surface */
.apss-aicard--red .apss-mb { border-radius: 8px; font-size: 14px; }
.apss-aicard--red .apss-msg.bot .apss-mb {
background: #e3e7ee; border: 1px solid #c4ccd8;
box-shadow: none; color: var(--apss-ink);
border-bottom-left-radius: 3px;
}
.apss-aicard--red .apss-msg.user .apss-mb {
background: var(--apss-red);
border-bottom-right-radius: 3px;
box-shadow: 0 3px 10px rgba(200,40,31,0.22);
}
.apss-aicard--red .apss-mname { color: var(--apss-red); font-size: 12px; }
/* squared input + send */
.apss-aicard--red .apss-aiin input {
border: 1px solid rgba(28,43,74,0.14); border-radius: 8px; background: #fff;
box-shadow: none; padding: 13px 16px;
}
.apss-aicard--red .apss-aiin input:focus { border-color: var(--apss-red); }
.apss-aicard--red .apss-aisend { border-radius: 8px; }
/* squared product bubble (photo + squared red tag) */
.apss-aicard--red .apss-pbubble {
border: 1px solid rgba(28,43,74,0.12); border-radius: 8px; padding: 10px;
box-shadow: none;
}
.apss-aicard--red .apss-pbub-img { border-radius: 6px; background: #fdeceb; }
.apss-aicard--red .apss-pbub-go {
margin-top: 5px; color: #fff; background: var(--apss-red);
border-radius: 5px; padding: 3px 9px; align-self: flex-start;
}
.apss-aicard--red .apss-pbub-go svg { display: none; }
/* hide the quick-reply chips under the chat (greeting + after) */
.apss-aicard--red .apss-aiquick { display: none !important; }
/* squared progress dots + count chip */
.apss-aicard--red .apss-pcdot { border-radius: 2px; }
.apss-aicard--red .apss-pcdot.act { border-radius: 2px; }
.apss-aicard--red .apss-rec-count { border-radius: 4px; }
/* squared welcome chips + capability tiles */
.apss-aicard--red .apss-wc-chip,
.apss-aicard--red .apss-wc-cap { border-radius: 8px; }
/* Close button = proposal #4 "Outlined Close": a squared bordered text chip,
border + text go red on hover, no rotate. (SARCLA pick 2026-06-17.) */
.apss-aicard--red .apss-aiclose {
width: auto; height: 28px; padding: 0 12px; border-radius: 2px; /* really squared */
border: 1px solid #d7dbe2; background: #fff;
font-family: "Inter", "Segoe UI", system-ui, var(--apss-font-body);
font-size: 12px; font-weight: 700; letter-spacing: 0;
color: var(--apss-muted);
}
.apss-aicard--red .apss-aiclose:hover {
background: #fff; border-color: var(--apss-red); color: var(--apss-red);
transform: none;
}
/* ── FONT MATCH + BIGGER TEXT (SARCLA: match the search bar, larger) ──────
The apsoparts search bar is Arial (--apss-font-body) at ~18px. Align the
whole widget to the site's type system: Arial body everywhere, futura-pt
only for display headlines + product names, and step every size up. */
.apss-aicard--red .apss-aiside,
.apss-aicard--red .apss-chat,
.apss-aicard--red .apss-msg .apss-mb,
.apss-aicard--red .apss-mname,
.apss-aicard--red .apss-aitag,
.apss-aicard--red .apss-reccard .apss-pnm,
.apss-aicard--red .apss-aiin input { font-family: "Inter", "Segoe UI", system-ui, var(--apss-font-body); }
/* headline: Inter too (the font SARCLA prefers), bigger */
.apss-aicard--red .apss-aiside .apss-aihead {
font-family: "Inter", "Segoe UI", system-ui, var(--apss-font-body);
font-size: 25px; font-weight: 800; letter-spacing: -0.02em;
}
/* lede / tagline + section labels bigger */
.apss-aicard--red .apss-wc-tag { font-size: 14px; line-height: 1.55; }
.apss-aicard--red .apss-cp-status { font-size: 11px; }
.apss-aicard--red .apss-cp-k { font-size: 13px; }
.apss-aicard--red .apss-cp-tag { font-size: 13px; }
/* chat bubbles bigger — closer to the bar's 18px */
.apss-aicard--red .apss-msg .apss-mb { font-size: 15.5px; line-height: 1.5; }
.apss-aicard--red .apss-mname { font-size: 12.5px; }
/* product features bigger */
.apss-aicard--red .apss-reccard .apss-pnm { font-size: 16px; }
.apss-aicard--red .apss-reccard .apss-psp { font-size: 12.5px; }
.apss-aicard--red .apss-pbub-nm { font-size: 14.5px; }
/* input text bigger */
.apss-aicard--red .apss-aiin input { font-size: 16px; }
/* ── Lead/contact form must NOT scroll — only the chat scrolls (SARCLA) ──
Override the side panel's overflow when it's the form, and compact the
fields so the whole form fits inside the card height without a scrollbar. */
.apss-aicard--red .apss-aiside.apss-aiside--form { overflow-y: hidden; }
.apss-aicard--red .apss-leadform { gap: 8px; }
.apss-aicard--red .apss-lf-head { margin-bottom: 2px; }
.apss-aicard--red .apss-lf-grid { gap: 8px; }
.apss-aicard--red .apss-lf-2col { gap: 8px; }
.apss-aicard--red .apss-lf-in { padding: 8px 11px; }
.apss-aicard--red .apss-lf-sub { font-size: 12px; line-height: 1.4; }
.apss-aicard--red .apss-leadform .apss-aihead { font-size: 21px; margin: 4px 0; }
/* Multiple cert pills on a recommendation card wrap neatly (was 1 cert). */
.apss-aicard--red .apss-pcerts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
/* ── Split Send ▾ button (SARCLA pick A) ─────────────────────────────────*/
.apss-aicard--red .apss-send-split { display: flex; position: relative; }
.apss-aicard--red .apss-send-split .apss-aisend { border-radius: 2px 0 0 2px; }
.apss-aicard--red .apss-send-caret {
background: var(--apss-red); color: #fff; border: 0; /* SAME red as Send */
border-left: 1px solid rgba(255,255,255,0.4); border-radius: 0 2px 2px 0;
width: 34px; height: 46px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.apss-aicard--red .apss-send-caret:hover { background: var(--apss-red-2); }
/* The inline svg refuses to render in this widget (global svg rules), so use a
bulletproof TEXT glyph ▾ — a font character that can't be overridden. */
.apss-aicard--red .apss-send-caret svg { display: none !important; }
.apss-aicard--red .apss-send-caret::after {
content: "\25BE"; color: #fff !important; font-size: 15px; line-height: 1;
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
.apss-aicard--red .apss-send-menu {
position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40;
background: #fff; border: 1px solid var(--apss-line); border-radius: 2px;
box-shadow: 0 -10px 28px rgba(15,23,42,0.16); min-width: 220px; overflow: hidden;
}
.apss-aicard--red .apss-sm-item {
display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: #fff;
padding: 11px 14px; text-align: left; cursor: pointer;
font: 600 13.5px/1.2 "Inter", "Segoe UI", system-ui, var(--apss-font-body);
color: var(--apss-ink);
}
.apss-aicard--red .apss-sm-item:hover { background: #fdeceb; color: var(--apss-red); }
.apss-aicard--red .apss-sm-item svg { width: 16px; height: 16px; flex: none; }
.apss-aicard--red .apss-sm-dz { color: var(--apss-red); border-top: 1px solid var(--apss-line); }