plus the widget's markdown
* classes — so target the text nodes inside the embedded group. */
.cim-widget-dialog .cim-widget-message-group.embedded,
.cim-widget-dialog .cim-widget-message-group.embedded p,
.cim-widget-dialog .cim-widget-message-group.embedded li,
.cim-widget-dialog .cim-widget-message-group.embedded .cim-widget-li,
.cim-widget-dialog .cim-widget-message-group.embedded .cim-widget-ul,
.cim-widget-dialog .cim-widget-message-group.embedded .cim-widget-ol {
color: #181818 !important;
}
.cim-widget-dialog .cim-widget-message-group.embedded p,
.cim-widget-dialog .cim-widget-message-group.embedded li,
.cim-widget-dialog .cim-widget-message-group.embedded .cim-widget-li {
font-size: 15px !important;
}
/* PDP promo callout on the detail card. Now SHOWN and driven per-color: the
* override resolves the selected color's callout from the field map's
* c_promotionCallOutsByColor map and only renders the element when that color has
* a PDP promo (a color with none renders nothing), so the prior blanket
* `display:none` suppression is removed. The color rule is retained — at 0,4,1
* specificity it re-asserts the override's red over the neutral #181818
* embedded-paragraph text, honoring the --skx-promo-color theming var. */
.cim-widget-dialog .cim-widget-message-group.embedded p.skx-msg-pdp__promo {
color: var(--skx-promo-color, #d31717) !important;
}
/* Carousel tile promo callout: same neutralization as the PDP promo above —
* the embedded-group text rules force #181818 (0,3,0) and 15px onto every ,
* flattening the override's red callout and blowing up its size. Re-assert the
* override's red + smaller tile size at higher specificity (0,4,1) with
* !important so the carousel callout matches the PDP one but reads smaller in
* the denser tile. Still honors the override's --skx-promo-* theming vars. */
.cim-widget-dialog .cim-widget-message-group.embedded p.skx-msg-tile__promo {
color: var(--skx-promo-color, #d31717) !important;
font-size: var(--skx-promo-font-size, 0.75rem) !important;
}
/* "Excluded from promotions." notice — the detail card / comparison column render
* this (with the --excluded modifier) for a markdown-only colorway that has no
* active promotion, mirroring the storefront PDP. Re-color it orange over the
* base promo red at higher specificity (0,5,1) so it beats both the base promo
* rules above and the embedded-group #181818. The icon is a stroke-drawn
* circle-slash (fill:none/stroke:currentColor set on the SVG), so it inherits
* this orange automatically. Honors the --skx-promo-excluded-color theming var. */
.cim-widget-dialog .cim-widget-message-group.embedded p.skx-msg-pdp__promo.skx-msg-pdp__promo--excluded,
.cim-widget-dialog .cim-widget-message-group.embedded p.skx-msg-tile__promo.skx-msg-tile__promo--excluded {
color: var(--skx-promo-excluded-color, #d97706) !important;
}
/* Product card: name in Medium weight, price in Bold. (The PDP title is styled
* on its own below — kept out of this shared rule to avoid a duplicate selector.) */
.cim-widget-msg-product-card__title,
.cim-widget-msg-product-card__title-link {
font-weight: 500 !important;
color: #181818 !important;
/* Carousel tile name: 14px/18px, truncated after 3 lines (overrides the
* bundle's 1rem/1.3/2-line clamp). The override already sets the
* -webkit-box display + box-orient needed for line-clamp; here we only
* bump the line count and the type scale so longer names (e.g. "Arch Fit
* Arcade HI - Moving Along") get a third line before the ellipsis. */
font-size: 0.875rem !important;
line-height: 18px !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
}
.cim-widget-msg-product-card__price {
font-weight: 700 !important;
color: #181818 !important;
}
/* Carousel tile: tighten the name -> price spacing to the spec's 8px. The bundle
* spreads the name block and the price/promo block apart with
* justify-content:space-between + gap:1rem (which also pins the price to the card
* bottom); that produced a large, variable gap. flex-start + 8px stacks them
* top-aligned at a fixed 8px instead. The promo is unaffected — it lives inside
* .skx-msg-tile__price-block (its own 6px gap), so the whole price+promo block
* just moves up together; overflow risk is lower since the gap shrinks 16px->8px. */
.cim-widget-msg-product-card__content {
justify-content: flex-start !important;
gap: 8px !important;
}
/* User's own message bubbles: light blue fill. */
.cim-widget-user-message.embedded {
background: #CCE0F1 !important;
}
/* ── Welcome hero (empty state only) ──
* The messaging widget has no built-in welcome screen: while there are no agent
* messages it renders only a connecting indicator. This injects a hero (icon +
* "Skechers AI" + intro) onto the message container, gated with :has() so it
* shows only until the first agent message bubble (.cim-widget-message-group)
* renders — at which point :not(:has(...)) stops matching and the hero is
* removed, handing over to the conversation. The "…joined the conversation"
* reset line and the connecting pulse are hidden while the hero is up. */
.cim-widget-message-container:not(:has(.cim-widget-message-group)) {
/* Positioning context only — no flex centering on the scroll container. The
* widget mounts/unmounts children here during load (connecting indicator,
* reset line, first message); centering the container would reflow and shift
* the hero on each of those. The hero is instead laid out as an absolute
* overlay (::before/::after) that is independent of those siblings. */
position: relative !important;
/* The gradient star logo lives on the container background (not a pseudo-
* element) so the ::before background layer is free for the WELCOME text
* shimmer. It sits just above the centred WELCOME/subtitle group. */
background:
#F7F9FA
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 108 108' fill='none' stroke='url(%23hg)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cdefs%3E%3ClinearGradient id='hg' x1='0' y1='0' x2='108' y2='108' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239731A0'/%3E%3Cstop offset='1' stop-color='%232478C1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='54' cy='54' r='28'/%3E%3Cpath d='M90 54 L98 54 M79.5 28.5 L85.1 22.9 M54 18 L54 10 M28.5 28.5 L22.9 22.9 M18 54 L10 54 M28.5 79.5 L22.9 85.1 M54 90 L54 98 M79.5 79.5 L85.1 85.1'/%3E%3Cpath stroke-width='3' d='M54 39 L57.8 48.7 L68.3 49.4 L60.2 56 L62.8 66.1 L54 60.5 L45.2 66.1 L47.8 56 L39.7 49.4 L50.2 48.7 Z'/%3E%3C/svg%3E")
no-repeat !important;
background-position: center calc(50% - 64px) !important;
background-size: 80px 80px !important;
}
.cim-widget-message-container:not(:has(.cim-widget-message-group)) .cim-widget-connecting-indicator {
display: none !important;
}
/* Hide the "Skechers Shopper Agent joined the conversation" reset line
* EVERYWHERE (design feedback). The hero-only rule above stopped matching once
* the first message group rendered, so the line reappeared mid-conversation;
* this suppresses it unconditionally. */
.cim-widget-reset-message {
display: none !important;
}
/* Non-full-height mode (if cc_dialogFullHeight is ever set false): cap via
* max-height so the auto-height dialog can't grow past the same bound as the
* full-height panel above (--skx-dialog-height). */
.cim-widget-dialog:not(.full-height) {
max-height: var(--skx-dialog-height, 93.6dvh) !important;
}
/* Icon (108x108) + "Skechers AI" heading. The icon is a top-anchored background
* image with the heading below it via top padding. It is a lightweight outline
* SVG (circle + rays + star) rather than a heavy single-path vector, and
* translateZ(0) promotes the pseudo-element to its own compositor layer — the
* widget repaints this container frequently (auto-scroll, connecting-indicator
* updates, :has() re-evaluation), and both choices keep the icon off that
* repaint path to avoid flicker. */
/* "WELCOME" heading, centred just below the star. It scales up as it enters and
* a pink highlight sweeps across the glyphs (background-clip: text). The base
* transform has NO !important so the cc-welcome-in animation can drive it — an
* !important transform would block the keyframe scale. */
.cim-widget-message-container:not(:has(.cim-widget-message-group))::before {
content: "WELCOME";
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) translateZ(0);
text-align: center !important;
/* Keep "WELCOME" on one line: an absolutely-positioned box with left:50%
* and no width shrink-to-fits to only the right half of the panel, which is
* narrower than the word on mobile and forces a wrap. nowrap overrides that. */
white-space: nowrap !important;
font-size: 34px !important;
font-weight: 700 !important;
letter-spacing: 3px !important;
line-height: 1.1 !important;
/* Two background layers, both clipped to the glyphs:
* 1) a moving highlight band (the shimmer) — swept via background-position
* 2) the static purple→blue brand gradient (the resting colour)
* Layer 2 stays at 0 0 while layer 1 sweeps, so the letters are always
* gradient-coloured and the shine passes over them. */
background:
linear-gradient(100deg, transparent 34%, rgba(255, 220, 248, 0.9) 50%, transparent 66%),
linear-gradient(120deg, #9731A0 0%, #6E3BB0 45%, #2478C1 100%) !important;
background-size: 250% 100%, 100% 100% !important;
background-position: 150% 0, 0 0 !important;
background-repeat: no-repeat !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
animation:
cc-welcome-in 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both,
cc-welcome-shimmer 3.4s ease-in-out 1.5s infinite !important;
}
/* Subtitle, tucked close under WELCOME (tight spacing to match Figma). Fades in
* last. Its transform keeps !important since only opacity is animated. */
.cim-widget-message-container:not(:has(.cim-widget-message-group))::after {
content: "Skechers AI shopping assistant";
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, calc(-50% + 32px)) translateZ(0) !important;
width: 320px !important;
max-width: 80% !important;
text-align: center !important;
font-size: 15px !important;
line-height: 1.4 !important;
color: #555555 !important;
animation: cc-hero-fade-in 0.8s ease 1.4s both !important;
}
/* Subtitle fade-in. */
@keyframes cc-hero-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* WELCOME entrance: fade + scale up (the "gets bigger" reveal). */
@keyframes cc-welcome-in {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.5) translateZ(0); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1) translateZ(0); }
}
/* Pink shimmer: sweep the highlight band (layer 1) across while the brand
* gradient (layer 2) stays put, then hold before repeating. */
@keyframes cc-welcome-shimmer {
0% { background-position: 150% 0, 0 0; }
55% { background-position: -60% 0, 0 0; }
100% { background-position: -60% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.cim-widget-message-container:not(:has(.cim-widget-message-group))::before,
.cim-widget-message-container:not(:has(.cim-widget-message-group))::after {
animation: none !important;
}
}
/* ── PDP option chips (size/variant selectors in a product card) ──
* Default: light-grey 6px-radius outline. Selected: reset the widget's blue
* fill and white text back to default, and mark selection with a 2px dark-grey
* border. */
label.cim-widget-msg-pdp__chip {
border-radius: var(--Corner-radius-small, 6px) !important;
border: 1px solid var(--neutral-medium-cc, #CCC) !important;
}
label.cim-widget-msg-pdp__chip.selected {
border-radius: var(--Corner-radius-small, 6px) !important;
border: 2px solid var(--font-default-medium-43, #434343) !important;
background-color: transparent !important;
color: inherit !important;
}
/* ── Color swatches: square off to match the size/variant chips ──
* The widget renders each swatch (and its image) as a full circle
* (border-radius: 50%). Override to the same small corner radius as the chips
* so the color selector reads as the same shape as Size/Width. The image sits
* inside 2px of padding, so its radius is inset by 2px to stay concentric. */
label.cim-widget-msg-pdp__swatch {
border-radius: var(--Corner-radius-small, 6px) !important;
}
.cim-widget-msg-pdp__swatch-image {
border-radius: calc(var(--Corner-radius-small, 6px) - 2px) !important;
}
/* ============================================================
* PDP detail-card redesign (design feedback)
* ------------------------------------------------------------
* Larger touch targets, brand type, solid CTA. CSS-only and
* scoped to .cim-widget-msg-pdp so the carousel tile and the
* comparison grid — which share .cim-widget-price* — are left
* alone. "20pt" from the mockup is rendered as 20px (web
* convention); Mulish is the storefront brand face and falls
* back to the widget font if the page hasn't loaded it.
* ============================================================ */
/* Headline (product name): Mulish Black, 20px. The PDP title is styled solely
* here (removed from the shared product-card rule above to avoid a duplicate
* selector); color is the #181818 used across the widget.
*
* Scoped under .cim-widget-message-group.embedded so this out-specifics the
* generic embedded-paragraph rule above (0,3,1 → font-size:15px). The title is a
*
inside that group, so without the ancestor prefix the 15px rule wins on
* specificity even though both are !important. The prefixed selector is (0,4,1),
* so 20px wins — same technique as the promo-callout override. */
.cim-widget-dialog .cim-widget-message-group.embedded p.cim-widget-msg-pdp__title,
.cim-widget-dialog .cim-widget-message-group.embedded .cim-widget-msg-pdp__title-link {
font-family: 'Mulish', var(--cim-widget-font-family, sans-serif) !important;
font-weight: 900 !important;
font-size: 20px !important;
line-height: 1.25 !important;
color: #181818 !important;
}
/* Price (sale amount): Mulish Bold, 20px. Scoped under .cim-widget-msg-pdp
* so the tile / comparison price (same .cim-widget-price__amount class)
* keeps its smaller size; the struck-through compare price is untouched. */
.cim-widget-msg-pdp .cim-widget-price__amount {
font-family: 'Mulish', var(--cim-widget-font-family, sans-serif) !important;
font-weight: 700 !important;
font-size: 20px !important;
}
/* Color swatches: 6 across, each filling its grid column for a bigger
* touch target while still showing every color. The swatch is normally a
* fixed 36px square; stretch it to the cell and keep it square. */
.cim-widget-msg-pdp__swatches {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 0.375rem !important;
}
.cim-widget-msg-pdp__swatches label.cim-widget-msg-pdp__swatch {
width: 100% !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
aspect-ratio: 1 / 1 !important;
}
/* Size chips: 6 across for larger touch targets. Keyed by CHIP COUNT, not by
* aria-labelledby — the earlier "variant-label-size" scope depended on the
* attribute id being exactly "size", which doesn't hold on every catalog, so
* Size fell back to natural wrapping (7 across). `:has(…:nth-child(7))` matches
* any chip group with 7+ options → that's Size; Width (1–2 options) never has a
* 7th chip, so it stays inline automatically. No attribute-id assumption. */
.cim-widget-msg-pdp__chips:has(.cim-widget-msg-pdp__chip:nth-child(7)) {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 0.375rem !important;
}
.cim-widget-msg-pdp__chips:has(.cim-widget-msg-pdp__chip:nth-child(7)) label.cim-widget-msg-pdp__chip {
width: 100% !important;
min-width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Remove the Quantity row (label + stepper). The quantity block is a
* generic .cim-widget-msg-pdp__variant; the stepper is unique to it, so
* :has() isolates it without touching Color / Width / Size. The override's
* quantity state stays at its minimum (1), so Add-to-cart still adds one. */
.cim-widget-msg-pdp__variant:has(.cim-widget-msg-pdp__stepper) {
display: none !important;
}
/* Add-to-cart: solid blue, full-width Primary CTA (was an outlined button).
* Matched to the storefront's primary filled-button spec: #0063BA fill, an
* 8px corner radius, and a 2px #0059A7 bottom border (the pressed-edge look),
* darkening to #004F95 on hover. Uses the storefront button design tokens with
* the design-provided hex fallbacks so it tracks the system if those tokens are
* defined on the page. */
button.cim-widget-msg-pdp__add-to-cart {
width: 100% !important;
min-height: 48px !important;
background-color: var(--Buttons-button-primary-filled-default-fill, #0063BA) !important;
border: none !important;
border-bottom: 2px solid var(--Buttons-button-primary-filled-default-border-bottom, #0059A7) !important;
border-radius: var(--buttons-button-new-spacing-corner-radius, 8px) !important;
color: #ffffff !important;
font-weight: 700 !important;
font-size: 1rem !important;
}
button.cim-widget-msg-pdp__add-to-cart:hover:not(:disabled) {
background-color: var(--skx-atc-bg-hover, #004F95) !important;
}
/* 16px between the CTA and the "View Full Details" link beneath it. */
.cim-widget-msg-pdp__actions {
gap: 16px !important;
}
/* "View Full Details" link under the CTA (markup added in the override
* bundle). Centered 15px storefront-style link; it is a plain full-page
* navigation to the PDP, which unmounts the widget — i.e. closes the agent. */
.skx-msg-pdp__view-details {
align-self: center !important;
color: var(--Buttons-button-primary-filled-default-fill, #0063BA) !important;
font-size: 15px !important;
text-decoration: none !important;
}
.skx-msg-pdp__view-details:hover {
text-decoration: underline !important;
}
/* ============================================================================
* Design feedback — round 2 (CSS-only).
* #2 Pill hover darkens — applied in the base .cim-widget-suggestion-button:hover
* rule above (kept there to avoid a duplicate selector).
* #3 Comparison names black #6 Remove modal icon
* (#1 navbar a11y and #4 agentscript are owned elsewhere, not styling.)
* ========================================================================== */
/* #3 Comparison product names read as links (blue). Make them the neutral
* near-black used elsewhere so they don't look clickable. */
.cim-widget-product-comparison__name,
.cim-widget-product-comparison__name-link {
color: #181818 !important;
}
/* #6 Modal/expand view is broken — remove its entry point. Hides the dialog's
* "Expand" (diagonal-arrows) control so the widget stays in its dialog size. */
.cim-widget-toggle-modal-button {
display: none !important;
}
/* ============================================================================
* Design feedback — round 3 (CSS-only, easy to revert: delete this block).
* Sale price red + grey strikethrough (tile + card) · header button hover
* ========================================================================== */
/* Sale price in the storefront reduced-price red (#c00, from
* `.sales.reduced-price { color:#c00 }`), with the original left as a grey
* strikethrough — identical on the carousel tile and the detail card. The sale
* amount only turns red when a struck compare price is present (:has), i.e. the
* item is actually discounted; non-sale prices keep their default color. */
.cim-widget-msg-product-card .cim-widget-price:has(.cim-widget-price__compare) .cim-widget-price__amount,
.cim-widget-msg-pdp .cim-widget-price:has(.cim-widget-price__compare) .cim-widget-price__amount {
color: var(--skx-sale-red, #c00) !important;
}
/* Struck original price: one consistent solid grey on both surfaces (replaces
* the semi-transparent default so tile and carousel match exactly). */
.cim-widget-msg-product-card .cim-widget-price__compare,
.cim-widget-msg-pdp .cim-widget-price__compare {
color: #767676 !important;
opacity: 1 !important;
}
/* Header controls — the overflow "⋮" menu (.cim-widget-icon-button) and the
* close "X" (.cim-widget-close-button, which does NOT carry the icon-button
* class, so it is named explicitly). Both get the SAME hover: the button grows
* (scale) with a drop shadow and fills to a dark translucent circle with a
* WHITE glyph. That reads clearly on BOTH the gradient (behind the X) and the
* kebab's resting grey circle, and keeps the glyph above the WCAG 3:1 floor at
* any gradient position (replacing the near-invisible stock #f0f0f0 tint). The
* kebab's dots (react-icons, fill:currentColor) follow `color`, so they flip
* white to match the X exactly.
*
* IMPORTANT — exclude the launcher: on some widget builds (e.g. BDCN) the
* minimized FAB button carries BOTH .cim-widget-minimized-button AND
* .cim-widget-icon-button, so these header-control rules would otherwise bleed
* onto the FAB — overriding its own `width 0.25s` drawer transition and adding
* the scale(1.18) zoom on hover (the FAB "zooms out" instead of sliding open as
* a drawer). :not(.cim-widget-minimized-button) keeps these scoped to the real
* header controls so the launcher keeps its pill/drawer animation. */
.cim-widget-icon-button:not(.cim-widget-minimized-button),
.cim-widget-close-button {
transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}
.cim-widget-icon-button:not(.cim-widget-minimized-button):hover:not(:disabled),
.cim-widget-close-button:hover:not(:disabled) {
background-color: rgba(0, 0, 0, 0.32) !important;
color: #ffffff !important;
transform: scale(1.18) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.cim-widget-icon-button:not(.cim-widget-minimized-button):hover:not(:disabled) svg {
fill: currentColor !important;
}
/* ============================================================================
* Hide the in-cart coupon entry (CSS-only, easy to revert: delete this block).
* .cim-widget-cart-coupon is the widget's coupon-row flex container (holds the
* input field + submit button). Skechers does not want coupon entry inside the
* agent cart, so the whole row is removed. !important beats the widget's
* runtime-injected `display: flex` on the same selector.
* ========================================================================== */
.cim-widget-cart-coupon {
display: none !important;
}
/* ============================================================================
* Shopper Agent header button — "Shop With AI" (design: brand gradient pill)
* ----------------------------------------------------------------------------
* Restyles the base .cc-header-button (a plain black pill in the mirrored base
* rules above) to the purple->blue brand gradient pill from Figma, and places
* it responsively. The SAME template (cimulate/headerButton) is included twice:
* - tablet + desktop (>=768px): in the header bar, left of the search box
* (pageHeader.isml, inside .c-header-global__search-container)
* - mobile (<768px): full-width at the top of the hamburger flyout
* (menu.isml, inside .menu-group)
* Each instance is shown ONLY in its own breakpoint via the ancestor-scoped
* rules below, so there is never a visible duplicate.
*
* Visibility is gated to the agent being ACTIVE: .cc-header-entry is hidden by
* default and revealed only under body.cc-agent-active, which messagingWidget's
* activateAgent() sets exactly when the FAB appears (and, under dark launch,
* only after enableAgent()) — so the button mirrors the FAB. The pill styling
* and the hidden-until-active default now live with the base .cc-header-button
* rules near the top of this file; only the responsive placement rules remain
* below.
* ========================================================================== */
/* ── Header-bar placement: tablet + desktop (left of the search box) ── */
@media (min-width: 768px) {
body.cc-agent-active .c-header-global__search-container .cc-header-entry {
display: inline-flex !important;
align-items: center !important;
margin: 0 12px 0 0 !important;
}
}
/* Keep the pill snug to the LEFT of the search box on desktop. Base sets
* .c-search { width:100% } at Skechers' lg (1280px+), which stretches the search
* cell to fill .c-header-global__search-container and strands the pill at the far
* left (next to the nav) with a big gap before the input. Collapsing the cell to
* its content width lets the container's justify-content:flex-end group
* [pill][search][cart] together on the right — the Figma layout. Breakpoint must
* match the base rule (lg = 1280px, not Bootstrap's 992px). Scoped to
* cc-agent-active so the search box is untouched whenever the agent is off. */
@media (min-width: 1280px) {
body.cc-agent-active .c-header-global__search-container .c-search {
width: auto !important;
}
}
/* ── Mobile flyout placement: full-width pill at the top of the hamburger menu.
* Re-show the label here (the base mobile rule hides .cc-header-button-label)
* and let the pill fill the flyout width. ── */
@media (max-width: 767.98px) {
body.cc-agent-active .menu-group .cc-header-entry {
display: block !important;
margin: 12px 16px 4px !important;
}
.menu-group .cc-header-button {
width: 100% !important;
justify-content: center !important;
padding: 13px 16px !important;
font-size: 15px !important;
}
.menu-group .cc-header-button-label { display: inline !important; }
}
/* ============================================================================
* Shopper Agent PDP action buttons — "Shop With AI" / "Build an Outfit" /
* "Show similar products". Injected CLIENT-SIDE by static/js/ccPdpButtons.js
* into the main .c-product-details__attributes container on PDP (no
* app_skechers edit); the loader cimulate/pdpButtonsClient.isml gates rendering
* on configHelper.isPdpButtonEnabled().
* ----------------------------------------------------------------------------
* Same dark-launch gate as the FAB and the header button: the whole row is
* display:none until body.cc-agent-active is set (messagingWidget activateAgent),
* so these appear exactly when the FAB does. Primary pill reuses the brand
* gradient; the two action pills are the white/outline variant from Figma with
* a brand-coloured sparkle.
* ========================================================================== */
/* Hidden until the agent activates. */
.cc-pdp-entry { display: none !important; }
body.cc-agent-active .cc-pdp-entry {
display: flex !important;
flex-wrap: wrap;
gap: 10px;
margin: 14px 0 0 0;
}
.cc-pdp-button {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
border: 1px solid transparent;
transition: filter 0.15s ease, background 0.15s ease;
}
.cc-pdp-button__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.cc-pdp-button__label { white-space: nowrap; letter-spacing: 0.01em; }
/* Primary — brand gradient pill (matches the header button / FAB). */
.cc-pdp-button--primary {
background: linear-gradient(135deg, #9731A0, #2478C1);
color: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.cc-pdp-button--primary:hover { filter: brightness(0.94); }
.cc-pdp-button--primary:active { filter: brightness(0.90); }
.cc-pdp-button--primary .cc-pdp-button__icon { color: #ffffff; }
/* Secondary — white/outline pill with a brand-coloured sparkle. */
.cc-pdp-button--secondary {
background: #ffffff;
color: #1a1a1a;
border-color: #c9c9c9;
}
.cc-pdp-button--secondary:hover { background: #f6f6f6; }
.cc-pdp-button--secondary:active { background: #efefef; }
.cc-pdp-button--secondary .cc-pdp-button__icon { color: #9731A0; }