/* @bulk:start web-kit/styles/commerce library Search Discovery And Catalog Styles */
.wk-search-hero { position: relative; max-inline-size: var(--wk-content-max); min-block-size: 36rem; margin-inline: auto; padding: var(--wk-section-y) var(--wk-gutter); display: grid; align-content: center; gap: var(--wk-space-6); }.wk-search-hero__title { max-inline-size: 11ch; margin: 0; font-size: var(--wk-text-display); line-height: .9; letter-spacing: -.065em; }.wk-search-hero__accent { display: block; color: var(--wk-highlight); }.wk-search-hero__lead { max-inline-size: 44rem; margin: 0; color: var(--wk-muted); font-size: var(--wk-text-lead); line-height: 1.6; }.wk-search-hero__form { max-inline-size: 49rem; padding: var(--wk-space-2); border: 1px solid var(--wk-outline); border-radius: 999px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: var(--wk-space-2); background: color-mix(in srgb,var(--wk-glass) 86%,transparent); backdrop-filter: blur(1.4rem) saturate(1.2); box-shadow: var(--wk-shadow-lg); transition: border-color var(--wk-motion-fast),box-shadow var(--wk-motion-fast),transform var(--wk-motion-fast); }.wk-search-hero__form:focus-within { border-color: color-mix(in srgb,var(--wk-accent) 68%,var(--wk-outline)); box-shadow: var(--wk-shadow-lg),0 0 2.4rem color-mix(in srgb,var(--wk-accent) 18%,transparent); transform: translateY(-2px); }.wk-search-hero__input { min-inline-size: 0; min-block-size: 3.35rem; padding-inline: var(--wk-space-4); border: 0; outline: 0; background: transparent; color: var(--wk-text); font: inherit; font-size: 1rem; }.wk-search-hero__input::placeholder { color: var(--wk-muted); }.wk-search-hero__visual { inline-size: 3.25rem; block-size: 3.25rem; border: 0; border-radius: 50%; background: var(--wk-surface-2); color: var(--wk-text); font-size: 1.35rem; cursor: pointer; }.wk-search-hero__submit { inline-size: 3.35rem; block-size: 3.35rem; padding: 0; border: 1px solid color-mix(in srgb,var(--wk-accent) 50%,transparent); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--wk-text); color: var(--wk-bg); box-shadow: var(--wk-shadow-sm); font: inherit; font-size: 1.55rem; cursor: pointer; transition: inline-size var(--wk-motion-slow),padding var(--wk-motion-slow),transform var(--wk-motion-fast); }.wk-search-hero__submit-label { inline-size: 0; overflow: hidden; opacity: 0; font-size: .82rem; font-weight: 900; transition: inline-size var(--wk-motion-slow),opacity var(--wk-motion-fast); }.wk-search-hero__form:focus-within .wk-search-hero__submit { inline-size: auto; padding-inline: 1rem; grid-auto-flow: column; gap: .45rem; }.wk-search-hero__form:focus-within .wk-search-hero__submit-label { inline-size: auto; opacity: 1; }.wk-search-hero__keywords { display: flex; flex-wrap: wrap; gap: var(--wk-space-2); }.wk-search-hero__keyword { padding: .55rem .8rem; border: 1px solid var(--wk-outline); border-radius: 999px; background: color-mix(in srgb,var(--wk-glass) 72%,transparent); color: var(--wk-muted); backdrop-filter: blur(.7rem); font: inherit; font-size: .78rem; cursor: pointer; transition: color var(--wk-motion-fast), border-color var(--wk-motion-fast), transform var(--wk-motion-fast); }.wk-search-hero__keyword:hover { color: var(--wk-text); border-color: var(--wk-accent); transform: translateY(-2px); }
.wk-rail { max-inline-size: var(--wk-content-max); margin-inline: auto; padding: var(--wk-section-y) var(--wk-gutter); }.wk-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13rem,1fr); gap: var(--wk-space-4); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; }.wk-rail__track::-webkit-scrollbar { display: none; }.wk-category-card { position: relative; min-block-size: 20rem; border-radius: var(--wk-radius-lg); overflow: hidden; scroll-snap-align: start; box-shadow: var(--wk-shadow-sm); }.wk-category-card__media, .wk-category-card__veil { position: absolute; inset: 0; }.wk-category-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--wk-motion-slow); }.wk-category-card__veil { background: linear-gradient(to top,color-mix(in srgb,var(--wk-seed-ink) 82%,transparent),transparent 64%); }.wk-category-card__title, .wk-category-card__count { position: absolute; z-index: 1; inset-inline: var(--wk-space-6); }.wk-category-card__title { inset-block-end: 2.5rem; margin: 0; color: var(--wk-seed-white); font-size: 1.25rem; }.wk-category-card__count { inset-block-end: 1.15rem; color: color-mix(in srgb,var(--wk-seed-white) 68%,transparent); font-size: .72rem; }.wk-category-card:hover img { transform: scale(1.06); }
.wk-marquee { padding-block: var(--wk-space-5); border-block: 1px solid var(--wk-outline); overflow: hidden; background: var(--wk-surface); mask-image: linear-gradient(to right,transparent,var(--wk-seed-ink) 8%,var(--wk-seed-ink) 92%,transparent); }.wk-marquee__track { inline-size: max-content; display: flex; gap: var(--wk-space-5); animation: wk-marquee 32s linear infinite; }.wk-marquee:hover .wk-marquee__track { animation-play-state: paused; }.wk-marquee__item { min-inline-size: 9rem; min-block-size: 4.8rem; padding: .65rem 1rem; border: 1px solid var(--wk-outline); border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb,var(--wk-seed-ink) 50%,var(--wk-seed-white)); color: var(--wk-muted); font-weight: 850; filter: saturate(.65); opacity: .86; transition: filter var(--wk-motion-fast),opacity var(--wk-motion-fast),box-shadow var(--wk-motion-fast); }.wk-marquee__item:hover { filter: none; opacity: 1; box-shadow: 0 0 1.8rem color-mix(in srgb,var(--wk-accent) 16%,transparent); }.wk-marquee__item img { inline-size: 7rem; block-size: 3rem; object-fit: contain; filter: drop-shadow(0 0 .35rem color-mix(in srgb,var(--wk-seed-white) 25%,transparent)); }
.wk-brand-directory { max-inline-size: var(--wk-content-max); margin-inline: auto; padding: var(--wk-section-y) var(--wk-gutter); }.wk-brand-directory__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(10rem,1fr)); gap: var(--wk-space-4); }.wk-brand-card { min-block-size: 10.5rem; padding: var(--wk-space-4); border: 1px solid var(--wk-outline); border-radius: var(--wk-radius-lg); display: grid; justify-items: center; align-content: center; gap: var(--wk-space-3); background: var(--wk-surface); color: var(--wk-text); font: inherit; cursor: pointer; transition: transform var(--wk-motion-fast),border-color var(--wk-motion-fast),box-shadow var(--wk-motion-fast); }.wk-brand-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--wk-accent) 42%,var(--wk-outline)); box-shadow: var(--wk-shadow-lg); }.wk-brand-card__mark { inline-size: 7.5rem; block-size: 5rem; padding: .65rem; border: 1px solid color-mix(in srgb,var(--wk-seed-white) 18%,var(--wk-seed-ink)); border-radius: var(--wk-radius-md); display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb,var(--wk-seed-ink) 50%,var(--wk-seed-white)); box-shadow: inset 0 0 1.6rem color-mix(in srgb,var(--wk-seed-white) 12%,transparent),0 0 1.2rem color-mix(in srgb,var(--wk-accent) 8%,transparent); }.wk-brand-card[data-logo-frame="wide"] .wk-brand-card__mark { border-radius: 999px; }.wk-brand-card[data-logo-frame="square"] .wk-brand-card__mark { inline-size: 5rem; border-radius: 50%; }.wk-brand-card__mark img { inline-size: 100%; block-size: 100%; object-fit: contain; }.wk-brand-card__monogram { font-size: 1.45rem; font-weight: 950; letter-spacing: -.04em; }.wk-brand-card strong { font-size: .82rem; }.wk-brand-card small { color: var(--wk-muted); font-size: .7rem; }
.wk-product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--wk-space-4); }.wk-product { position: relative; min-inline-size: 0; border: 1px solid var(--wk-outline); border-radius: var(--wk-radius-lg); overflow: hidden; background: var(--wk-surface); transition: transform var(--wk-motion-fast),box-shadow var(--wk-motion-fast),border-color var(--wk-motion-fast); }.wk-product:hover { transform: translateY(-5px); border-color: color-mix(in srgb,var(--wk-accent) 35%,var(--wk-outline)); box-shadow: var(--wk-shadow-lg); }.wk-product__media { position: relative; aspect-ratio: 4/5; overflow: hidden; display: block; background: var(--wk-surface-2); }.wk-product__media::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg,var(--wk-surface-2) 8%,var(--wk-surface) 18%,var(--wk-surface-2) 33%); background-size: 200% 100%; animation: wk-image-shimmer 1.35s linear infinite; }.wk-product__media > img { position: relative; z-index: 1; inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--wk-surface-2); transition: transform var(--wk-motion-slow),opacity var(--wk-motion-fast); }.wk-product:hover .wk-product__media > img { transform: scale(1.035); }.wk-product__media > .wk-badge { position: absolute; z-index: 2; inset-block-start: var(--wk-space-3); inset-inline-start: var(--wk-space-3); }.wk-product__body { padding: var(--wk-space-4); display: grid; gap: var(--wk-space-2); }.wk-product__merchant { color: var(--wk-muted); font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }.wk-product__title { min-block-size: 2.6em; margin: 0; font-size: .98rem; line-height: 1.3; }.wk-product__meta { display: flex; align-items: baseline; gap: var(--wk-space-2); }.wk-product__price { font-weight: 900; }.wk-product__compare { color: var(--wk-muted); font-size: .82rem; }.wk-product__match { color: var(--wk-highlight); font-size: .72rem; font-weight: 800; }.wk-product__save { position: absolute; z-index: 2; inset-block-start: var(--wk-space-3); inset-inline-end: var(--wk-space-3); inline-size: 2.6rem; block-size: 2.6rem; border: 1px solid color-mix(in srgb,var(--wk-seed-white) 24%,transparent); border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb,var(--wk-seed-ink) 54%,transparent); color: var(--wk-seed-white); backdrop-filter: blur(.8rem); cursor: pointer; font-size: 1.2rem; }
.wk-filter { margin-block-end: var(--wk-space-8); padding: var(--wk-space-4); border: 1px solid var(--wk-outline); border-radius: var(--wk-radius-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--wk-space-4) var(--wk-space-6); background: var(--wk-glass); backdrop-filter: blur(1rem); }.wk-filter__search { flex: 1 0 100%; inline-size: min(100%,34rem); max-inline-size: 34rem; min-block-size: 3.4rem; padding: var(--wk-space-2); border: 1px solid var(--wk-outline); border-radius: 999px; display: flex; align-items: center; gap: var(--wk-space-2); background: color-mix(in srgb,var(--wk-glass) 88%,transparent); box-shadow: var(--wk-shadow-sm); opacity: .84; transition: max-inline-size var(--wk-motion-slow),opacity var(--wk-motion-fast),border-color var(--wk-motion-fast),box-shadow var(--wk-motion-fast),transform var(--wk-motion-fast); }.wk-filter__search:focus-within { max-inline-size: 44rem; opacity: 1; border-color: var(--wk-accent); box-shadow: var(--wk-shadow-lg); transform: translateY(-2px); }.wk-filter__search-icon { padding-inline-start: var(--wk-space-3); color: var(--wk-accent); font-size: 1.25rem; }.wk-filter__search-input { flex: 1; min-inline-size: 0; border: 0; outline: 0; background: transparent; color: var(--wk-text); font: inherit; }.wk-filter__search-input::placeholder { color: var(--wk-muted); }.wk-filter__summary { display: flex; align-items: center; gap: var(--wk-space-3); white-space: nowrap; }.wk-filter__clear { border: 0; background: transparent; color: var(--wk-accent); font: inherit; font-size: .78rem; cursor: pointer; }.wk-filter__facets { display: flex; flex: 1; gap: var(--wk-space-2); overflow-x: auto; scrollbar-width: none; }.wk-filter__facet { min-block-size: 2.35rem; padding-inline: .85rem; border: 1px solid var(--wk-outline); border-radius: 999px; display: inline-flex; align-items: center; gap: var(--wk-space-2); white-space: nowrap; background: var(--wk-surface); color: var(--wk-muted); font: inherit; cursor: pointer; }.wk-filter__facet[aria-pressed="true"] { background: var(--wk-text); color: var(--wk-bg); }.wk-filter__facet span { opacity: .62; font-size: .72rem; }
.wk-search-hero { overflow: hidden; isolation: isolate; }.wk-search-hero::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(to right,color-mix(in srgb,var(--wk-bg) 55%,transparent) 0%,color-mix(in srgb,var(--wk-bg) 46%,transparent) 38%,color-mix(in srgb,var(--wk-bg) 10%,transparent) 78%); }.wk-search-hero__video { position: absolute; inset: 0; z-index: -4; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .88; filter: saturate(1.2) contrast(1.08); transform: scale(1.025); }.wk-search-hero__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: -3; mix-blend-mode: screen; opacity: .3; }.wk-search-hero__mosaic { position: absolute; inset-block: 1.5rem; inset-inline-end: max(var(--wk-gutter),calc((100% - var(--wk-content-max))/2)); inline-size: min(43%,36rem); display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; z-index: -1; transform: perspective(70rem) rotateY(-7deg) rotateX(2deg); }.wk-search-hero__mosaic > div { display: contents; }.wk-search-hero__tile { min-block-size: 0; border: 1px solid color-mix(in srgb,var(--wk-seed-white) 20%,transparent); border-radius: 1.4rem; overflow: hidden; box-shadow: var(--wk-shadow-lg); opacity: .86; }.wk-search-hero__tile:nth-child(2),.wk-search-hero__tile:nth-child(5) { transform: translateY(2.5rem); }.wk-search-hero__tile img { inline-size: 100%; block-size: 100%; object-fit: cover; }.wk-search-hero__content { position: relative; max-inline-size: 55rem; z-index: 2; text-shadow: 0 .12rem 1.6rem var(--wk-bg); }.wk-search-hero__form,.wk-search-hero__keywords { text-shadow: none; }.wk-product__source { display: inline-flex; align-items: center; gap: .35rem; color: var(--wk-muted); font-size: .72rem; text-decoration: none; }.wk-product__source:hover { color: var(--wk-accent); }
.wk-preview[data-theme="light"] .wk-search-hero::after { background: linear-gradient(to right,color-mix(in srgb,var(--wk-bg) 48%,transparent) 0%,color-mix(in srgb,var(--wk-bg) 30%,transparent) 44%,color-mix(in srgb,var(--wk-bg) 8%,transparent) 82%); }.wk-preview[data-theme="light"] .wk-search-hero__video { opacity: .82; filter: saturate(1.05) contrast(.96); mix-blend-mode: normal; }.wk-preview[data-theme="light"] .wk-search-hero__canvas { mix-blend-mode: multiply; opacity: .2; }
.wk-detail { max-inline-size: var(--wk-content-max); margin-inline: auto; padding: calc(var(--wk-section-y) * .7) var(--wk-gutter) var(--wk-section-y); }.wk-detail__back { margin-block-end: var(--wk-space-6); border: 0; background: transparent; color: var(--wk-muted); font: inherit; cursor: pointer; }.wk-detail__layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(19rem,.85fr); gap: clamp(2rem,6vw,6rem); align-items: start; }.wk-detail__gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--wk-space-3); }.wk-detail__image { inline-size: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--wk-radius-lg); background: var(--wk-surface-2); }.wk-detail__image--primary { grid-column: 1/-1; aspect-ratio: 6/5; }.wk-detail__panel { position: sticky; inset-block-start: 7rem; padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid var(--wk-outline); border-radius: var(--wk-radius-lg); background: var(--wk-glass); backdrop-filter: blur(1.5rem); box-shadow: var(--wk-shadow-lg); }.wk-detail__merchant { color: var(--wk-highlight); font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }.wk-detail__title { margin: .7rem 0; font-size: clamp(2.2rem,5vw,4.5rem); line-height: .95; letter-spacing: -.055em; }.wk-detail__subtitle,.wk-detail__description { color: var(--wk-muted); line-height: 1.7; }.wk-detail__price { margin-block: var(--wk-space-5); font-size: 1.5rem; font-weight: 900; }.wk-detail__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-block: var(--wk-space-4); }.wk-detail__tags span { padding: .45rem .7rem; border: 1px solid var(--wk-outline); border-radius: 999px; color: var(--wk-muted); font-size: .7rem; }.wk-detail__notice { margin-block: var(--wk-space-5); padding: var(--wk-space-4); border-inline-start: .2rem solid var(--wk-highlight); background: var(--wk-surface-2); color: var(--wk-muted); font-size: .8rem; line-height: 1.5; }.wk-detail__merchant-cta,.wk-detail__intent { min-block-size: 3.5rem; border-radius: var(--wk-radius-md); display: flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 900; text-decoration: none; }.wk-detail__merchant-cta { background: var(--wk-text); color: var(--wk-bg); }.wk-detail__intent { inline-size: 100%; margin-block-start: var(--wk-space-3); border: 1px solid var(--wk-outline); background: transparent; color: var(--wk-text); font: inherit; cursor: pointer; }
.wk-intent { position: fixed; z-index: 40; inset-inline-end: var(--wk-gutter); inset-block-end: var(--wk-gutter); }.wk-intent__toggle { min-block-size: 3.5rem; padding-inline: 1.1rem; border: 1px solid var(--wk-outline); border-radius: 999px; display: flex; align-items: center; gap: .75rem; background: var(--wk-text); color: var(--wk-bg); box-shadow: var(--wk-shadow-lg); font: inherit; cursor: pointer; }.wk-intent__toggle strong { inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; display: grid; place-items: center; background: var(--wk-highlight); color: var(--wk-seed-ink); }.wk-intent__panel { position: absolute; inset-inline-end: 0; inset-block-end: 4.3rem; inline-size: min(24rem,calc(100vw - 2 * var(--wk-gutter))); max-block-size: 65vh; padding: var(--wk-space-5); border: 1px solid var(--wk-outline); border-radius: var(--wk-radius-lg); overflow: auto; background: var(--wk-glass); backdrop-filter: blur(1.5rem); box-shadow: var(--wk-shadow-lg); }.wk-intent__head,.wk-intent__item { display: flex; align-items: center; justify-content: space-between; gap: var(--wk-space-3); }.wk-intent__head h2 { margin: 0; }.wk-intent__head button,.wk-intent__item button { border: 0; background: transparent; color: var(--wk-muted); font-size: 1.2rem; cursor: pointer; }.wk-intent__items { display: grid; gap: var(--wk-space-3); margin-block: var(--wk-space-5); }.wk-intent__item img { inline-size: 3.6rem; block-size: 4.5rem; border-radius: .7rem; object-fit: cover; }.wk-intent__item > div { flex: 1; min-inline-size: 0; display: grid; gap: .25rem; }.wk-intent__item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }.wk-intent__item span,.wk-intent__hint { color: var(--wk-muted); font-size: .72rem; }
.wk-detail__gallery > div,.wk-detail__tags > div { display: contents; }.wk-preview .wk-detail__merchant-cta { color: var(--wk-bg); }
@keyframes wk-marquee { to { transform: translateX(-50%); } } @keyframes wk-image-shimmer { to { background-position-x: -200%; } }
@media (max-width: 1050px) { .wk-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) { .wk-search-hero { min-block-size: 42rem; align-content: start; }.wk-search-hero__mosaic { inset-block-start: 20rem; inset-inline: var(--wk-gutter); inline-size: auto; block-size: 20rem; }.wk-search-hero__form { grid-template-columns: minmax(0,1fr) auto; }.wk-search-hero__visual { display: none; }.wk-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--wk-space-3); }.wk-filter { align-items: flex-start; flex-direction: column; }.wk-filter__facets { inline-size: 100%; }.wk-detail__layout { grid-template-columns: 1fr; }.wk-detail__panel { position: static; }.wk-detail__gallery { gap: var(--wk-space-2); }.wk-brand-directory__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .wk-marquee__track,.wk-product__media::before { animation: none; }.wk-search-hero__video { display: none; }.wk-category-card__media img,.wk-product,.wk-product__media > img,.wk-search-hero__keyword,.wk-filter__search { transition: none; }.wk-product:hover,.wk-search-hero__keyword:hover,.wk-filter__search:focus-within { transform: none; } }
.wk-rail__track > div, .wk-marquee__track > div, .wk-product-grid > div, .wk-filter__facets > div { display: contents; }
.wk-ai { position: fixed; z-index: 60; inset-inline-end: var(--wk-gutter); inset-block-end: var(--wk-gutter); }.wk-ai__orb { min-block-size: 3.6rem; padding: .45rem .9rem .45rem .5rem; border: 1px solid color-mix(in srgb,var(--wk-accent) 35%,var(--wk-outline)); border-radius: 999px; display: flex; align-items: center; gap: .65rem; background: color-mix(in srgb,var(--wk-bg) 72%,transparent); color: var(--wk-text); backdrop-filter: blur(1.4rem); box-shadow: var(--wk-shadow-lg); font: inherit; font-weight: 850; cursor: pointer; }.wk-ai__orb-mark { inline-size: 2.65rem; block-size: 2.65rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%,var(--wk-accent),var(--wk-primary) 65%,var(--wk-highlight)); color: var(--wk-on-primary); box-shadow: 0 0 2rem color-mix(in srgb,var(--wk-primary) 45%,transparent); animation: wk-ai-breathe 2.8s ease-in-out infinite; }.wk-ai__panel { position: absolute; inset-inline-end: 0; inset-block-end: 4.5rem; inline-size: min(27rem,calc(100vw - 2 * var(--wk-gutter))); block-size: min(43rem,calc(100vh - 8rem)); border: 1px solid var(--wk-outline); border-radius: var(--wk-radius-xl); overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto; background: color-mix(in srgb,var(--wk-bg) 82%,transparent); backdrop-filter: blur(2rem) saturate(1.25); box-shadow: var(--wk-shadow-lg); }.wk-ai__head { padding: var(--wk-space-5); border-block-end: 1px solid var(--wk-outline); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg,color-mix(in srgb,var(--wk-primary) 16%,transparent),color-mix(in srgb,var(--wk-accent) 8%,transparent)); }.wk-ai__head h2 { margin: .2rem 0 0; font-size: 1.1rem; }.wk-ai__head button { border: 0; background: transparent; color: var(--wk-muted); font-size: 1.7rem; cursor: pointer; }.wk-ai__eyebrow { color: var(--wk-accent); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }.wk-ai__messages { padding: var(--wk-space-4); overflow: auto; display: flex; flex-direction: column; gap: var(--wk-space-3); }.wk-ai__message { max-inline-size: 88%; padding: .85rem 1rem; border-radius: 1.15rem; color: var(--wk-text); font-size: .86rem; line-height: 1.55; }.wk-ai__message p { margin: 0; }.wk-ai__message--assistant { align-self: flex-start; border: 1px solid var(--wk-outline); border-end-start-radius: .3rem; background: var(--wk-surface); }.wk-ai__message--user { align-self: flex-end; border-end-end-radius: .3rem; background: var(--wk-primary); color: var(--wk-on-primary); }.wk-ai__message button { margin-block-start: .7rem; padding: .5rem .7rem; border: 1px solid var(--wk-outline); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .72rem; cursor: pointer; }.wk-ai__thinking { align-self: flex-start; padding: .9rem 1rem; display: flex; gap: .3rem; }.wk-ai__thinking i { inline-size: .38rem; block-size: .38rem; border-radius: 50%; background: var(--wk-accent); animation: wk-ai-dot 1s ease-in-out infinite; }.wk-ai__thinking i:nth-child(2) { animation-delay: .14s; }.wk-ai__thinking i:nth-child(3) { animation-delay: .28s; }.wk-ai__products { padding: 0 var(--wk-space-4) var(--wk-space-3); display: flex; gap: var(--wk-space-2); overflow-x: auto; }.wk-ai__products > div { display: contents; }.wk-ai__product { flex: 0 0 12rem; padding: .55rem; border: 1px solid var(--wk-outline); border-radius: var(--wk-radius-md); display: grid; grid-template-columns: 3rem 1fr; gap: .65rem; align-items: center; text-align: start; background: var(--wk-surface); color: var(--wk-text); cursor: pointer; }.wk-ai__product img { inline-size: 3rem; block-size: 3.8rem; border-radius: .55rem; object-fit: cover; }.wk-ai__product span { min-inline-size: 0; display: grid; gap: .2rem; }.wk-ai__product strong,.wk-ai__product small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.wk-ai__product strong { font-size: .75rem; }.wk-ai__product small { color: var(--wk-muted); font-size: .63rem; }.wk-ai__error { margin: 0 var(--wk-space-4) var(--wk-space-2); color: var(--wk-danger); font-size: .72rem; }.wk-ai__composer { margin: 0 var(--wk-space-4) var(--wk-space-4); padding: .4rem; border: 1px solid var(--wk-outline); border-radius: 999px; display: flex; background: var(--wk-surface); }.wk-ai__composer input { flex: 1; min-inline-size: 0; padding-inline: .8rem; border: 0; outline: 0; background: transparent; color: var(--wk-text); font: inherit; font-size: .82rem; }.wk-ai__composer button { inline-size: 2.65rem; block-size: 2.65rem; border: 0; border-radius: 50%; background: var(--wk-text); color: var(--wk-bg); font-size: 1.2rem; cursor: pointer; }
@keyframes wk-ai-breathe { 50% { transform: scale(1.06); box-shadow: 0 0 2.8rem color-mix(in srgb,var(--wk-accent) 55%,transparent); } } @keyframes wk-ai-dot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-.25rem); } }
@media (max-width: 760px) { .wk-ai__panel { position: fixed; inset: auto 0 0; inline-size: 100%; block-size: min(78vh,46rem); border-radius: var(--wk-radius-xl) var(--wk-radius-xl) 0 0; }.wk-ai__orb-label { display: none; }.wk-ai__orb { padding: .35rem; } }
@media (prefers-reduced-motion: reduce) { .wk-ai__orb-mark,.wk-ai__thinking i { animation: none; } }
/* @bulk:end */