.s3c-kc {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 8px;
border-radius: 28px;
color: var(--s3-t1);
font-family: var(--s3-sans);
letter-spacing: -.011em;
font-variant-numeric: tabular-nums;
background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, color-mix(in srgb, var(--s3-pale-2) 94%, transparent) 100%);
box-shadow: var(--s3-sh-1), inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 4%, transparent);
transition: transform .6s var(--s3-ease), box-shadow .6s var(--s3-ease);
}
.s3c-kc:hover {
transform: translateY(-4px);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--s3-accent) 22%, transparent), 0 0 0 6px color-mix(in srgb, var(--s3-accent) 5%, transparent), var(--s3-sh-2);
}
.s3c-kc :where(h2, h3, h4, p, ul) { margin: 0; }
.s3c-kc :where(ul) { padding: 0; list-style: none; }
.s3c-kc :where(a) { color: inherit; text-decoration: none; }
.s3c-kc :focus-visible { outline: 2px solid var(--s3-accent-2); outline-offset: 3px; border-radius: 8px; }
.s3c-sr {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.s3c-stage {
position: relative;
isolation: isolate;
overflow: hidden;
aspect-ratio: 5 / 4;
border-radius: 22px;
background: linear-gradient(165deg, var(--s3-pale) 0%, var(--s3-pale-2) 72%);
transition: box-shadow .6s var(--s3-ease);
}
.s3c-stage::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(70% 60% at 50% 34%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%);
}
.s3c-obj {
position: absolute;
inset: 0;
pointer-events: none;
}
.s3c-objSh {
position: absolute;
left: 50%;
top: 82%;
width: 52%;
margin-left: -26%;
margin-top: -1.6%;
aspect-ratio: 6 / 1;
border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--s3-ink) 22%, transparent), color-mix(in srgb, var(--s3-ink) 9%, transparent) 45%, transparent);
transition: transform .8s var(--s3-ease), opacity .8s var(--s3-ease);
}
.s3c-obj img {
position: absolute;
left: 12%;
top: 8%;
width: 76%;
height: 76%;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform .8s var(--s3-ease);
}
.s3c-kc:hover .s3c-obj img { transform: translate3d(0, -3.5%, 0) scale(1.03); }
.s3c-kc:hover .s3c-objSh { transform: scale(.82); opacity: .62; }
.s3c-tinka {
position: absolute;
left: 12px;
top: 12px;
height: 28px;
padding: 0 12px 0 4px;
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
font: 600 12.5px/1 var(--s3-sans);
color: var(--s3-ok-ink);
background: rgba(255, 255, 255, .82);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-ok) 22%, transparent), 0 4px 12px color-mix(in srgb, var(--s3-ink) 6%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transition: opacity .5s var(--s3-ease), transform .6s var(--s3-ease);
transition-delay: var(--d, 0ms);
}
.s3c-tinkaC {
width: 18px;
height: 18px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--s3-ok);
box-shadow: 0 0 8px color-mix(in srgb, var(--s3-ok) 50%, transparent);
}
.s3c-tinkaC svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s3c-kc .s3c-tinka { left: auto; right: 12px; }
.s3c-tinka[hidden] { display: none; }
.s3c-logo {
--lx: 7px;
--ly: 4px;
position: absolute;
left: 10px;
top: 10px;
z-index: 2;
width: 76px;
height: 34px;
padding: var(--ly) var(--lx);
display: grid;
place-items: center;
overflow: hidden;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--s3-ink) 7%, transparent), 0 4px 12px color-mix(in srgb, var(--s3-ink) 7%, transparent);
pointer-events: none;
}
.s3c-logo img { position: absolute; left: var(--lx); top: var(--ly); display: block; width: calc(100% - 2 * var(--lx)); height: calc(100% - 2 * var(--ly)); max-width: none; object-fit: contain; }
.s3c-logoTxt span {
max-width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
font: 700 10.5px/1.1 var(--s3-sans);
letter-spacing: .04em;
text-transform: uppercase;
text-align: center;
color: var(--s3-t2);
}
.s3c-isFit .s3c-stage { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-ok) 14%, transparent); }
[data-s3-scan="wait"] .s3c-tinka { opacity: 0; transform: translate3d(0, -6px, 0) scale(.94); }
.s3c-b { padding: 16px 12px 0; }
.s3c-brand { font: 600 12px/1 var(--s3-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--s3-t1); }
.s3c-n {
margin-top: 8px !important;
font: 600 19px/1.25 var(--s3-sans);
letter-spacing: -.025em;
color: var(--s3-t1);
overflow-wrap: anywhere;
}
.s3c-n a { transition: color .3s var(--s3-ease); }
.s3c-n a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.s3c-n a:hover { color: var(--s3-accent); }
.s3c-nx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s3c-mpn { display: none; }
.s3c-spec { margin-top: 12px !important; min-height: 24px; display: flex; flex-wrap: wrap; gap: 4px; }
.s3c-spec li {
max-width: 100%;
height: 24px;
padding: 0 8px;
display: inline-flex;
align-items: center;
overflow: hidden;
border-radius: 8px;
font: 500 12px/1 var(--s3-sans);
letter-spacing: -.005em;
color: var(--s3-t2);
background: color-mix(in srgb, var(--s3-accent) 4.5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 6%, transparent);
white-space: nowrap;
text-overflow: ellipsis;
}
.s3c-attrs { margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.s3c-attrs > div { display: flex; align-items: baseline; gap: 4px; min-width: 0; font: 400 12.5px/1.35 var(--s3-sans); letter-spacing: -.005em; }
.s3c-attrs > div:nth-child(n+3) { display: none; }
.s3c-attrs dt { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--s3-t3); }
.s3c-attrs dt::after { content: ":"; }
.s3c-attrs dd { flex: 0 0 auto; max-width: calc(100% - 3em); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--s3-t1); }
.s3c-f { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding: 20px 4px 4px 12px; }
.s3c-pr { min-width: 0; }
.s3c-price {
display: inline-flex;
align-items: baseline;
font: 600 28px/1 var(--s3-sans);
letter-spacing: -.04em;
color: var(--s3-t1);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.s3c-priceC { display: inline-block; font-size: .56em; letter-spacing: -.01em; transform: translateY(-.64em); }
.s3c-priceE { display: inline-block; font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--s3-t3); transform: translateY(-.76em); }
.s3c-priceLead { margin-right: .12em; }
.s3c-priceTrail { margin-left: .22em; }
.s3c-priceNone { display: block; font: 500 14px/1.3 var(--s3-sans); letter-spacing: -.01em; color: var(--s3-t3); }
.s3c-stock { margin-top: 8px !important; display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--s3-sans); color: var(--s3-ok-ink); }
.s3c-stock i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--s3-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s3-ok) 14%, transparent); }
.s3c-stockOff { color: var(--s3-t3); }
.s3c-stockOff i { background: var(--s3-t4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s3-t4) 16%, transparent); }
.s3c-stockLow { color: hsl(var(--warning-strong)); }
.s3c-stockLow i { background: hsl(var(--warning)); box-shadow: 0 0 0 3px hsl(var(--warning) / .18); }
.s3c-act { flex: none; display: flex; align-items: center; gap: 8px; }
.s3c-add {
position: relative;
z-index: 2;
flex: none;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
color: #fff;
background: linear-gradient(180deg, var(--s3-accent-2), var(--s3-accent));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px color-mix(in srgb, var(--s3-accent) 60%, transparent), 0 8px 20px color-mix(in srgb, var(--s3-accent) 38%, transparent);
transition: transform .4s var(--s3-ease), box-shadow .4s var(--s3-ease), background .4s var(--s3-ease);
}
.s3c-add:hover { transform: scale(1.06); }
.s3c-add:focus-visible { outline: 2px solid var(--s3-accent-2); outline-offset: 3px; }
.s3c-addI { position: relative; flex: none; display: block; width: 20px; height: 20px; }
.s3c-add svg { position: absolute; left: 0; top: 0; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--s3-ease), transform .4s var(--s3-ease); }
.s3c-addT { display: none; }
.s3c-addT > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .3s var(--s3-ease), transform .4s var(--s3-ease); }
.s3c-addOk { opacity: 0; transform: translate3d(0, 4px, 0); }
.s3c-add[data-done] .s3c-addL { opacity: 0; transform: translate3d(0, -4px, 0); }
.s3c-add[data-done] .s3c-addOk { opacity: 1; transform: none; }
.s3c-more {
position: relative;
z-index: 2;
display: none;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 16px;
border-radius: 12px;
font: 600 14px/1 var(--s3-sans);
letter-spacing: -.01em;
white-space: nowrap;
color: var(--s3-t1);
background: color-mix(in srgb, var(--s3-accent) 5%, #fff);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 12%, transparent);
transition: color .3s var(--s3-ease), box-shadow .3s var(--s3-ease);
}
.s3c-more:hover { color: var(--s3-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 32%, transparent); }
.s3c-addK { opacity: 0; transform: scale(.6); }
.s3c-add[data-done] {
background: linear-gradient(180deg, color-mix(in srgb, var(--s3-ok) 85%, #fff), color-mix(in srgb, var(--s3-ok) 80%, var(--s3-ok-ink)));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px color-mix(in srgb, var(--s3-ok) 60%, transparent), 0 8px 20px color-mix(in srgb, var(--s3-ok) 38%, transparent);
}
.s3c-add[data-done] .s3c-addP { opacity: 0; transform: scale(.6) rotate(90deg); }
.s3c-add[data-done] .s3c-addK { opacity: 1; transform: none; }
@media (max-width: 760px) {
.s3c-kc { padding: 6px; border-radius: 22px; }
.s3c-stage { aspect-ratio: 1 / .92; border-radius: 17px; }
.s3c-tinka { left: 8px; top: 8px; height: 24px; font-size: 11.5px; gap: 6px; padding: 0 10px 0 3px; }
.s3c-kc .s3c-tinka { left: auto; right: 8px; }
.s3c-logo { --lx: 5px; --ly: 3px; left: 6px; top: 6px; width: 60px; height: 27px; border-radius: 8px; }
.s3c-logoTxt span { font-size: 9.5px; }
.s3c-tinkaC { width: 16px; height: 16px; }
.s3c-b { padding: 12px 6px 0; }
.s3c-brand { font-size: 11px; }
.s3c-n { font-size: 15.5px; margin-top: 6px !important; }
.s3c-spec { margin-top: 8px !important; }
.s3c-spec li { height: 22px; padding: 0 6px; font-size: 11px; }
.s3c-spec li:nth-child(n+3) { display: none; }
.s3c-attrs { margin-top: 8px; gap: 2px; }
.s3c-attrs > div { font-size: 11.5px; }
.s3c-f { padding: 12px 0 2px 6px; gap: 8px; }
.s3c-price { font-size: 22px; }
.s3c-stock { font-size: 11.5px; gap: 6px; margin-top: 6px !important; }
.s3c-add { width: 40px; height: 40px; }
}
.s3c-vt {
flex: none;
display: inline-flex;
align-items: center;
gap: 2px;
height: 40px;
padding: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--s3-accent) 4.5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 8%, transparent);
}
.s3c-vtB {
width: 40px;
height: 32px;
padding: 0;
border: 0;
border-radius: 999px;
display: grid;
place-items: center;
cursor: pointer;
color: var(--s3-t3);
background: transparent;
transition: color .3s var(--s3-ease), background-color .3s var(--s3-ease), box-shadow .3s var(--s3-ease);
}
.s3c-vtB:hover { color: var(--s3-t1); }
.s3c-vtB:focus-visible { outline: 2px solid var(--s3-accent-2); outline-offset: 2px; }
.s3c-vtB svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-s3-view="grid"] .s3c-vtGrid,
[data-s3-view="list"] .s3c-vtList {
color: var(--s3-accent);
background: #fff;
box-shadow: 0 1px 2px color-mix(in srgb, var(--s3-ink) 8%, transparent), 0 4px 12px color-mix(in srgb, var(--s3-accent) 14%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 10%, transparent);
}
.s3c-results { display: grid; gap: 16px; min-width: 0; }
.s3c-rbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.s3c-rbarS { min-width: 0; }
.s3c-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.s3c-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) {
.s3c-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s3c-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.s3c-grid, .s3c-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s3c-vt { height: 38px; padding: 3px; }
.s3c-vtB { width: 36px; }
}
[data-s3-view="list"] .s3c-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
[data-s3-view="list"] [data-s3-grid] { container: s3list / inline-size; }
[data-s3-view="list"] .s3c-kc {
display: grid;
grid-template-columns: 208px minmax(0, 1fr) 256px;
grid-template-areas: "stage body foot";
column-gap: 24px;
border-radius: 26px;
}
[data-s3-view="list"] .s3c-kc:hover { transform: translateY(-2px); }
[data-s3-view="list"] .s3c-stage { grid-area: stage; aspect-ratio: auto; min-height: 176px; border-radius: 20px; }
[data-s3-view="list"] .s3c-obj img { left: 10%; top: 26%; width: 80%; height: 64%; }
[data-s3-view="list"] .s3c-objSh { top: 88%; }
[data-s3-view="list"] .s3c-kc .s3c-tinka { left: 10px; right: auto; top: auto; bottom: 10px; }
[data-s3-view="list"] .s3c-b { grid-area: body; align-self: center; min-width: 0; padding: 16px 0; }
[data-s3-view="list"] .s3c-n { margin-top: 10px !important; font-size: 20px; line-height: 1.3; }
[data-s3-view="list"] .s3c-nx { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
[data-s3-view="list"] .s3c-mpn { display: block; margin-top: 8px !important; font: 500 13px/1.3 var(--s3-mono); letter-spacing: 0; color: var(--s3-t3); overflow-wrap: anywhere; }
[data-s3-view="list"] .s3c-spec { margin-top: 12px !important; min-height: 0; }
[data-s3-view="list"] .s3c-attrs { margin-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
[data-s3-view="list"] .s3c-attrs > div:nth-child(n+3) { display: flex; }
[data-s3-view="list"] .s3c-attrs > div { font-size: 13px; }
[data-s3-view="list"] .s3c-attrs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
[data-s3-view="list"] .s3c-f {
grid-area: foot;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 16px;
margin: 8px 0;
padding: 12px 12px 12px 24px;
border-left: 1px solid color-mix(in srgb, var(--s3-accent) 9%, transparent);
}
[data-s3-view="list"] .s3c-pr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
[data-s3-view="list"] .s3c-stock { margin-top: 0 !important; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--s3-ok) 9%, transparent); white-space: nowrap; }
[data-s3-view="list"] .s3c-stockOff { background: color-mix(in srgb, var(--s3-t4) 12%, transparent); }
[data-s3-view="list"] .s3c-stockLow { background: hsl(var(--warning) / .14); }
[data-s3-view="list"] .s3c-act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
[data-s3-view="list"] .s3c-add { width: 100%; height: 46px; padding: 0 16px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
[data-s3-view="list"] .s3c-add:hover { transform: translateY(-1px); }
[data-s3-view="list"] .s3c-addT { display: inline-grid; font: 600 15px/1 var(--s3-sans); letter-spacing: -.01em; }
[data-s3-view="list"] .s3c-more { display: inline-flex; }
@container s3list (min-width: 1060px) {
[data-s3-view="list"] .s3c-bA { display: flex; align-items: center; gap: 32px; }
[data-s3-view="list"] .s3c-bA .s3c-bh { flex: 1 1 auto; min-width: 0; }
[data-s3-view="list"] .s3c-bA .s3c-attrs {
flex: 0 0 312px;
margin: 0;
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding: 4px 16px;
border-radius: 16px;
background: color-mix(in srgb, var(--s3-accent) 3%, #fff);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 7%, transparent);
}
[data-s3-view="list"] .s3c-bA .s3c-attrs > div { justify-content: space-between; gap: 16px; padding: 7px 0; }
[data-s3-view="list"] .s3c-bA .s3c-attrs > div + div { box-shadow: 0 -1px 0 color-mix(in srgb, var(--s3-accent) 8%, transparent); }
[data-s3-view="list"] .s3c-bA .s3c-attrs dt::after { content: none; }
[data-s3-view="list"] .s3c-bA .s3c-attrs dd { text-align: right; }
}
@container s3list (max-width: 899px) {
[data-s3-view="list"] .s3c-kc { grid-template-columns: 172px minmax(0, 1fr) 216px; column-gap: 20px; }
[data-s3-view="list"] .s3c-stage { min-height: 160px; }
[data-s3-view="list"] .s3c-n { font-size: 18px; }
[data-s3-view="list"] .s3c-f { padding-left: 20px; }
[data-s3-view="list"] .s3c-price { font-size: 26px; }
}
@container s3list (max-width: 620px) {
[data-s3-view="list"] .s3c-kc {
grid-template-columns: 112px minmax(0, 1fr);
grid-template-areas: "stage body" "foot foot";
column-gap: 12px;
padding: 6px;
border-radius: 22px;
}
[data-s3-view="list"] .s3c-stage { min-height: 132px; border-radius: 16px; }
[data-s3-view="list"] .s3c-logo { --lx: 5px; --ly: 3px; left: 6px; top: 6px; width: 62px; height: 28px; border-radius: 8px; }
[data-s3-view="list"] .s3c-obj img { left: 8%; top: 30%; width: 84%; height: 60%; }
[data-s3-view="list"] .s3c-kc .s3c-tinka { left: 6px; bottom: 6px; }
[data-s3-view="list"] .s3c-b { align-self: start; padding: 8px 4px 0 0; }
[data-s3-view="list"] .s3c-brand { font-size: 11px; }
[data-s3-view="list"] .s3c-n { margin-top: 6px !important; font-size: 15.5px; line-height: 1.3; }
[data-s3-view="list"] .s3c-mpn { margin-top: 4px !important; font-size: 12px; }
[data-s3-view="list"] .s3c-spec { margin-top: 8px !important; }
[data-s3-view="list"] .s3c-attrs { margin-top: 8px; grid-template-columns: minmax(0, 1fr); gap: 2px; }
[data-s3-view="list"] .s3c-attrs > div:nth-child(n+3) { display: none; }
[data-s3-view="list"] .s3c-attrs > div { font-size: 12px; }
[data-s3-view="list"] .s3c-f { margin: 10px 4px 0; padding: 12px 0 4px; gap: 12px; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--s3-accent) 9%, transparent); }
[data-s3-view="list"] .s3c-price { font-size: 24px; }
[data-s3-view="list"] .s3c-stock { height: 26px; font-size: 12px; }
[data-s3-view="list"] .s3c-act { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
[data-s3-view="list"] .s3c-add { height: 44px; padding: 0 10px; gap: 8px; }
[data-s3-view="list"] .s3c-addT { font-size: 14px; }
[data-s3-view="list"] .s3c-more { height: 44px; padding: 0 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.s3c-kc, .s3c-stage, .s3c-tinka, .s3c-obj img, .s3c-objSh, .s3c-add, .s3c-add svg, .s3c-addT > span, .s3c-more, .s3c-vtB { transition: none !important; }
}