/* Kuwal Store - /store page (theme "Tatlı"). Uses generic --ks-* tokens + motion API only. Transform/opacity animations. */

.ks-st-ico { width: 1.25em; height: 1.25em; flex: none; }
.ks-st-crumb { padding-top: var(--ks-s-3); padding-bottom: 0; }

.ks-st-head { display: flex; flex-direction: column; align-items: center; gap: var(--ks-s-3); text-align: center; margin-bottom: var(--ks-s-7); }
.ks-st-head .ks-lead { max-width: 46ch; }
.ks-st-head--left { align-items: flex-start; text-align: left; margin-bottom: var(--ks-s-5); }

/* ================= Hero scene ================= */
.ks-st-hero { --scene-len: 118vh; background: var(--ks-bg); }
.ks-st-hero .ks-scene__sticky { background: var(--ks-wash); overflow: clip; }
@media (min-width: 1024px) {
  /* content is top-aligned in a ~1 viewport pinned area (not centred in a tall one) */
  .ks-st-hero .ks-scene__sticky { height: min(calc(100svh - var(--ks-header-h, 56px)), 632px); align-items: flex-start; }
  .ks-st-hero__inner { padding-top: var(--ks-s-7); }
}
.ks-st-hero__wash {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 1px 1px, rgba(201, 60, 104, .16) 1.5px, transparent 1.6px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000, transparent 100%);
}
.ks-st-hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ks-s-4); text-align: center; padding-block: var(--ks-s-4) var(--ks-s-5); }
.ks-st-hero__copy { display: flex; flex-direction: column; align-items: center; gap: var(--ks-s-3); max-width: 640px; transform: translate3d(0, calc(var(--p) * -10px), 0); }
.ks-st-hero__title { font-size: clamp(2.25rem, 1.2rem + 5.4vw, 4.75rem); line-height: 1.04; }
.ks-st-hero__sub { max-width: 34ch; font-size: clamp(1rem, .95rem + .4vw, 1.25rem); }
.ks-st-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ks-s-3); margin-top: var(--ks-s-2); }
.ks-st-hero__cta .ks-btn { min-height: 56px; }
.ks-st-hero__cta .ks-st-ico { transition: transform var(--ks-dur-2) var(--ks-ease-out); }
.ks-st-hero__cta .ks-btn:hover .ks-st-ico { transform: translate3d(3px, 0, 0); }
.ks-st-hero__cta .ks-btn--secondary { display: none; }

/* art composition: everything sits inside the box (decoration offsets are small so nothing is clipped) */
.ks-st-art { position: relative; flex: none; height: min(38svh, 320px); aspect-ratio: 1.32; max-width: 100%; margin-top: var(--ks-s-3); }
.ks-st-art > span { position: absolute; display: block; }
.ks-st-art svg { display: block; width: 100%; height: 100%; }
.ks-st-art__blob { will-change: transform; }
.ks-st-art__blob--a { inset: 0 4% -4% 4%; transform: scale(calc(.9 + var(--p) * .1)) rotate(calc(var(--p) * 10deg)); }
.ks-st-art__blob--b { width: 40%; aspect-ratio: 1; right: 0; top: 0; transform: translate3d(calc((1 - var(--p)) * -6%), calc((1 - var(--p)) * 6%), 0) scale(calc(.9 + var(--p) * .1)) rotate(calc(var(--p) * -14deg)); }
.ks-st-art__blob--c { width: 38%; aspect-ratio: 1; left: 0; bottom: 0; transform: translate3d(calc((1 - var(--p)) * 6%), calc((1 - var(--p)) * -5%), 0) scale(calc(.9 + var(--p) * .1)) rotate(calc(var(--p) * 12deg)); }
.ks-st-art__pal { aspect-ratio: 1; filter: drop-shadow(0 14px 18px rgba(120, 60, 80, .16)); will-change: transform; }
.ks-st-art__pal--bear { width: 56%; left: 22%; bottom: 0; z-index: 3; transform-origin: 50% 100%; transform: translate3d(0, calc((1 - var(--p)) * 3%), 0) scale(calc(.9 + var(--p) * .1)) rotate(calc((1 - var(--p)) * -3deg)); }
.ks-st-art__pal--bunny { width: 42%; left: 29%; bottom: 14%; z-index: 2; transform-origin: 50% 100%; transform: translate3d(calc(-45% + var(--p) * -27%), calc((1 - var(--p)) * 4%), 0) rotate(calc(var(--p) * -10deg)) scale(calc(.88 + var(--p) * .12)); }
.ks-st-art__pal--panda { width: 42%; left: 29%; bottom: 14%; z-index: 2; transform-origin: 50% 100%; transform: translate3d(calc(45% + var(--p) * 27%), calc((1 - var(--p)) * 4%), 0) rotate(calc(var(--p) * 10deg)) scale(calc(.88 + var(--p) * .12)); }
.ks-st-float { z-index: 4; width: 9%; aspect-ratio: 1; opacity: calc(.75 + var(--p) * .25); }
.ks-st-float > span, .ks-st-drift, .ks-st-char, .ks-st-idle { display: block; width: 100%; height: 100%; }
.ks-st-float--h1 { left: 2%; top: 8%; width: 11%; }
.ks-st-float--s1 { right: 14%; top: 12%; width: 10%; }
.ks-st-float--h2 { right: 0; top: 48%; width: 8%; }
.ks-st-float--s2 { left: 0; top: 52%; width: 8%; }
.ks-st-float--h3 { right: 22%; bottom: 0; width: 9%; }

/* ----- on-load choreography (CSS only, so it needs no JS; start states exist only under html.ks-motion) ----- */
.ks-st-line { display: block; overflow: hidden; padding: .08em .06em .16em; margin: -.08em -.06em -.16em; }
.ks-st-line > span { display: block; }
html.ks-motion .ks-st-line > span { transform: translate3d(0, 112%, 0); transition: transform 900ms var(--ks-ease-out) calc(var(--li, 0) * 110ms + 80ms); }
html.ks-motion [data-reveal].is-in .ks-st-line > span { transform: none; }
html.ks-motion:not(.ks-motion-js) .ks-st-line > span { animation: ks-force-in 1ms linear 3s forwards; }
@media (prefers-reduced-motion: no-preference) {
  html.ks-motion .ks-st-hero .ks-st-line > span { transform: none; transition: none; animation: ks-st-line 950ms var(--ks-ease-out) calc(.16s + var(--li, 0) * .13s) both; }
  html.ks-motion .ks-st-hero__copy > .ks-eyebrow { animation: ks-st-rise 700ms var(--ks-ease-out) .04s both; }
  html.ks-motion .ks-st-hero__sub { animation: ks-st-rise 800ms var(--ks-ease-out) .5s both; }
  html.ks-motion .ks-st-hero__cta { animation: ks-st-rise 800ms var(--ks-ease-out) .66s both; }
  html.ks-motion .ks-st-art__blob > .ks-st-drift { animation: ks-st-blobin 1000ms var(--ks-ease-out) both, ks-st-drift var(--dur, 20s) ease-in-out 1s infinite alternate; }
  html.ks-motion .ks-st-char { transform-origin: 50% 100%; animation: ks-st-charpop 900ms var(--ks-ease-spring) var(--d, .5s) both; }
  html.ks-motion .ks-st-idle { transform-origin: 50% 100%; animation: ks-st-bob var(--i, 5s) ease-in-out calc(var(--d, .5s) + .9s) infinite alternate; }
  html.ks-motion .ks-st-twinkle { animation: ks-st-charpop 800ms var(--ks-ease-spring) var(--d, 1s) both, ks-st-twinkle var(--t, 4s) ease-in-out calc(var(--d, 1s) + .8s) infinite; }
}
@keyframes ks-st-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes ks-st-line { from { transform: translate3d(0, 112%, 0); } to { transform: none; } }
@keyframes ks-st-charpop { 0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.4); } 60% { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.07); } 100% { opacity: 1; transform: none; } }
@keyframes ks-st-bob { from { transform: translate3d(0, 0, 0) rotate(-1.4deg); } to { transform: translate3d(0, -3%, 0) rotate(1.4deg); } }
@keyframes ks-st-twinkle { 0%, 100% { transform: translate3d(0, 0, 0) scale(.94) rotate(-6deg); opacity: .85; } 50% { transform: translate3d(0, -8%, 0) scale(1.1) rotate(6deg); opacity: 1; } }
@keyframes ks-st-blobin { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: none; } }
@keyframes ks-st-drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(var(--dx, 3%), 4%, 0) rotate(6deg) scale(1.04); } }

/* pop reveal (springy) for tiles, trust icons, steps and product cards; rides on the engine's data-reveal + .is-in */
html.ks-motion .ks-st-pop[data-reveal], html.ks-motion .ks-st-grid .ks-pcard[data-reveal] { transform: translate3d(0, 18px, 0) scale(.9); transition-timing-function: var(--ks-ease-spring), var(--ks-ease-spring), var(--ks-ease-out); }
html.ks-motion .ks-st-pop[data-reveal].is-in, html.ks-motion .ks-st-grid .ks-pcard[data-reveal].is-in { transform: none; }

@media (min-width: 900px) {
  .ks-st-hero__inner { flex-direction: row; justify-content: space-between; gap: var(--ks-s-7); text-align: left; }
  .ks-st-hero__copy { align-items: flex-start; flex: 1 1 46%; }
  .ks-st-hero__cta { justify-content: flex-start; }
  .ks-st-hero__cta .ks-btn--secondary { display: inline-flex; }
  .ks-st-art { height: min(56svh, 520px); margin-top: 0; }
}
@media (max-height: 640px) and (max-width: 899px) { .ks-st-art { height: 30svh; } .ks-st-hero__sub { display: none; } }

/* Below 1024px the scene is not pinned: the hero is a normal block that animates as it enters */
@media (max-width: 1023.98px) {
  .ks-st-hero { min-height: 0; }
  .ks-st-hero .ks-scene__sticky { position: static; height: auto; overflow: clip; padding-block: var(--ks-s-4) var(--ks-s-6); align-items: flex-start; }
}
html:not(.ks-motion) .ks-st-hero .ks-scene__sticky { height: auto; }
@media (prefers-reduced-motion: reduce) { .ks-st-hero .ks-scene__sticky { height: auto; } }

/* ================= Collection tiles ================= */
.ks-st-collections { padding-top: var(--ks-s-5); padding-bottom: var(--ks-s-7); }
.ks-st-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-s-3); }
@media (min-width: 900px) { .ks-st-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-s-5); } }
.ks-st-tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%; aspect-ratio: 4 / 5; min-height: 220px;
  padding: var(--ks-s-4); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--ks-text);
  background: radial-gradient(90% 70% at 50% 100%, var(--t-bg2) 0%, var(--t-bg) 75%);
  border: 2px solid #fff; border-radius: var(--ks-r-xl); box-shadow: var(--ks-sh-1);
  transition: box-shadow var(--ks-dur-3) var(--ks-ease-out), transform var(--ks-dur-3) var(--ks-ease-out);
}
html.ks .ks-st-tile:hover { box-shadow: var(--ks-sh-3); }
.ks-st-tile__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.ks-st-tile__name { font-family: var(--ks-font-display); font-weight: 600; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.15; }
.ks-st-tile__sub { font-size: .875rem; color: var(--ks-muted); font-weight: 600; }
.ks-st-tile__art { position: absolute; inset: 24% 4% 8%; z-index: 1; }
.ks-st-tile__blob, .ks-st-tile__char { position: absolute; display: block; }
.ks-st-tile__blob { inset: 0; opacity: .8; transition: transform var(--ks-dur-3) var(--ks-ease-out); }
.ks-st-tile__char { width: 78%; aspect-ratio: 1; left: 11%; bottom: 0; filter: drop-shadow(0 8px 12px rgba(120, 60, 50, .14)); transition: transform var(--ks-dur-3) var(--ks-ease-spring); transform-origin: 50% 100%; }
.ks-st-tile__art svg { display: block; width: 100%; height: 100%; }
html.ks .ks-st-tile:hover .ks-st-tile__char { transform: translate3d(0, -6px, 0) scale(1.06) rotate(-3deg); }
html.ks .ks-st-tile:hover .ks-st-tile__blob { transform: scale(1.08) rotate(6deg); }
.ks-st-tile__go {
  position: absolute; z-index: 2; right: var(--ks-s-3); bottom: var(--ks-s-3); display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: var(--ks-r-pill); background: rgba(255, 255, 255, .92); color: var(--ks-primary-ink);
  font-family: var(--ks-font-display); font-weight: 600; font-size: .875rem; box-shadow: var(--ks-sh-1);
  opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity var(--ks-dur-2) var(--ks-ease-out), transform var(--ks-dur-2) var(--ks-ease-out);
}
.ks-st-tile__go .ks-st-ico { width: 1em; height: 1em; }
html.ks .ks-st-tile:hover .ks-st-tile__go, html.ks .ks-st-tile:focus-visible .ks-st-tile__go { opacity: 1; transform: none; }
@media (hover: none) { .ks-st-tile__go { opacity: 1; transform: none; } }
@media (max-width: 480px) { .ks-st-tile__go { display: none; } }

/* ================= Filters: one sticky bar (chips left, sort + filter right); search + price live in a popover / bottom sheet ================= */
.ks-st-shop { padding-top: var(--ks-s-6); }
.ks-st-barwrap { position: sticky; top: calc(var(--ks-header-h, 56px) + 8px); z-index: 30; margin-bottom: var(--ks-s-4); }
.ks-st-bar { position: relative; display: flex; align-items: center; gap: var(--ks-s-2); padding: 6px 6px 6px 10px; border-radius: var(--ks-r-pill); isolation: isolate; border: 1px solid var(--ks-border); box-shadow: var(--ks-sh-1); }
.ks-st-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 248, 241, .95); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.ks-st-chips { flex: 1 1 auto; min-width: 0; padding: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
.ks-st-chips .ks-chip { text-decoration: none; }
.ks-st-bar__tools { display: flex; align-items: center; gap: var(--ks-s-2); flex: none; }
.ks-st-sort { position: relative; display: block; }
.ks-st-sort .ks-st-ico { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ks-primary-ink); pointer-events: none; z-index: 1; }
.ks-st-sort .ks-select { min-height: 44px; height: 44px; padding: 0 36px 0 40px; border-radius: var(--ks-r-pill); border-width: 1.5px; font-family: var(--ks-font-display); font-weight: 600; font-size: .9375rem; background-color: var(--ks-surface); min-width: 0; width: auto; max-width: 220px; background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; }
.ks-st-fbtn { position: relative; flex: none; min-height: 44px; height: 44px; padding: 0 18px; }
.ks-st-fbtn .ks-st-ico { width: 18px; height: 18px; }
.ks-st-fbtn__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ks-primary); color: var(--ks-on-primary); font-size: .75rem; font-weight: 700; }

/* popover (desktop) */
.ks-st-fsheet { display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 31; width: min(460px, 100%); }
.ks-st-fsheet.is-open, .ks-st-fsheet:target { display: block; }
.ks-st-fsheet__backdrop { display: none; }
.ks-st-fform { display: grid; gap: var(--ks-s-4); padding: var(--ks-s-5); background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-r-lg); box-shadow: var(--ks-sh-3); animation: ks-st-pop-in var(--ks-dur-3) var(--ks-ease-spring) both; transform-origin: 100% 0; }
.ks-st-fform__head { display: none; }
.ks-st-fform .ks-field, .ks-st-fform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ks-st-fform .ks-label { display: block; margin-bottom: 6px; }
.ks-st-search { position: relative; }
.ks-st-search .ks-st-ico { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--ks-muted); pointer-events: none; }
.ks-st-search .ks-input { padding-left: 46px; }
.ks-st-price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--ks-s-2); }
.ks-st-price__dash { color: var(--ks-muted); }
.ks-st-f--actions { display: flex; gap: var(--ks-s-2); flex-wrap: wrap; }
.ks-st-f--actions .ks-btn { flex: 1 1 auto; }
@keyframes ks-st-pop-in { from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.96); } to { opacity: 1; transform: none; } }

/* mobile: icon-only sort + bottom sheet (:target works without JS; .is-open is set by store.js) */
@media (max-width: 899.98px) {
  .ks-st-sort .ks-select { width: 44px; padding: 0; color: transparent; background-image: none; }
  .ks-st-sort .ks-select option { color: var(--ks-text); }
  .ks-st-sort .ks-st-ico { left: 13px; }
  .ks-st-fsheet { position: fixed; inset: 0; z-index: 1080; width: auto; }
  .ks-st-fsheet__backdrop { display: block; position: absolute; inset: 0; background: rgba(59, 42, 51, .45); animation: ks-st-fade var(--ks-dur-2) var(--ks-ease-out) both; }
  .ks-st-fform {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 86svh; overflow-y: auto; overscroll-behavior: contain; gap: var(--ks-s-3);
    padding: var(--ks-s-4) var(--ks-gutter, 16px) calc(var(--ks-s-5) + env(safe-area-inset-bottom));
    background: var(--ks-bg); border: 0; border-radius: var(--ks-r-xl) var(--ks-r-xl) 0 0; box-shadow: 0 -12px 40px rgba(59, 42, 51, .2);
    animation: ks-st-sheet var(--ks-dur-3) var(--ks-ease-out) both; transform-origin: 50% 100%;
  }
  .ks-st-fform::before { content: ""; justify-self: center; width: 44px; height: 5px; border-radius: 5px; background: var(--ks-border-strong); margin-bottom: var(--ks-s-1); }
  .ks-st-fform__head { display: flex; align-items: center; justify-content: space-between; }
  .ks-st-fform__head h3 { font-family: var(--ks-font-display); font-size: 1.25rem; font-weight: 600; }
  html.ks body.ks-st-sheet-open { overflow: hidden; }
}
@media (min-width: 900px) { .ks-st-chips { -webkit-mask-image: none; mask-image: none; } .ks-st-bar { padding-right: 8px; } }
@keyframes ks-st-sheet { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes ks-st-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= Results / grid ================= */
.ks-st-results { min-height: 320px; transition: opacity var(--ks-dur-2) var(--ks-ease); }
.ks-st-results.is-loading { opacity: .5; pointer-events: none; }
.ks-st-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--ks-s-3); margin-bottom: var(--ks-s-3); flex-wrap: wrap; }
.ks-st-count { color: var(--ks-muted); font-weight: 700; font-size: .9375rem; margin: 0; }
.ks-st-meta .ks-link-arrow { min-height: 44px; font-size: .9375rem; }
.ks-st-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-s-3); }
@media (min-width: 640px) { .ks-st-grid { gap: var(--ks-s-4); } }
@media (min-width: 1024px) { .ks-st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ks-s-5); } }
@media (min-width: 1280px) { .ks-st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ks-st-grid__item { min-width: 0; display: flex; }
.ks-st-grid__item[hidden] { display: none; }
.ks-st-grid__item > * { flex: 1 1 auto; }
.ks-st-more { display: flex; justify-content: center; margin-top: var(--ks-s-6); }
.ks-st-more__n { font-weight: 600; opacity: .7; }
.ks-st-empty { margin-top: var(--ks-s-4); padding-block: var(--ks-s-8); border-radius: var(--ks-r-xl); background: var(--ks-wash); border: 2px dashed var(--ks-border-strong); }
.ks-st-empty .ks-empty__art { width: 180px; }
.ks-st-empty .ks-empty__title { font-size: 1.5rem; }

/* ================= Trust strip ================= */
.ks-st-trust { padding-block: var(--ks-s-6); }
.ks-st-trust__list { list-style: none; margin: 0; padding: var(--ks-s-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-s-5) var(--ks-s-4); background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-r-xl); box-shadow: var(--ks-sh-1); }
@media (min-width: 900px) { .ks-st-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: var(--ks-s-6); } }
.ks-st-trust__list li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ks-st-trust__list strong { font-family: var(--ks-font-display); font-weight: 600; font-size: 1.0625rem; margin-top: var(--ks-s-2); }
.ks-st-trust__list li > span:last-child { color: var(--ks-muted); font-size: .9375rem; line-height: 1.45; }
.ks-st-trust__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--ks-primary-tint); color: var(--ks-primary-ink); }
.ks-st-trust__ico .ks-st-ico { width: 24px; height: 24px; }

/* ================= How we pack ================= */
.ks-st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ks-s-4); counter-reset: none; }
@media (min-width: 900px) { .ks-st-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ks-s-5); } }
.ks-st-step { position: relative; display: flex; flex-direction: column; gap: var(--ks-s-2); padding: var(--ks-s-5); background: var(--ks-surface); border: 2px solid #fff; border-radius: var(--ks-r-xl); box-shadow: var(--ks-sh-1); }
.ks-st-step__num { position: absolute; top: var(--ks-s-4); left: var(--ks-s-4); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ks-primary); color: var(--ks-on-primary); font-family: var(--ks-font-display); font-weight: 700; box-shadow: 0 0 0 4px var(--ks-surface); }
.ks-st-step__art { position: relative; display: block; height: 150px; margin: calc(var(--ks-s-2) * -1) calc(var(--ks-s-2) * -1) var(--ks-s-2); border-radius: var(--ks-r-lg); background: var(--s-bg); overflow: hidden; }
.ks-st-step__blob { position: absolute; inset: 0; display: block; opacity: .8; }
.ks-st-step__char { position: absolute; display: block; height: 82%; aspect-ratio: 1; left: 50%; bottom: 6%; transform: translateX(-50%); transition: transform var(--ks-dur-3) var(--ks-ease-spring); }
.ks-st-step__art svg { display: block; width: 100%; height: 100%; }
html.ks .ks-st-step:hover .ks-st-step__char { transform: translateX(-50%) translateY(-4px) rotate(-4deg) scale(1.05); }
.ks-st-step__title { font-family: var(--ks-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.2; }
.ks-st-step__text { color: var(--ks-muted); margin: 0; }
.ks-st-step__stat { margin: var(--ks-s-2) 0 0; padding-top: var(--ks-s-3); border-top: 1px dashed var(--ks-border-strong); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--ks-muted); font-weight: 600; font-size: .9375rem; }
.ks-st-step__stat strong { font-family: var(--ks-font-display); font-size: 1.75rem; line-height: 1; color: var(--ks-primary); font-variant-numeric: tabular-nums; }

/* Small screens: keep everything inside 360px */
@media (max-width: 400px) { .ks-st-hero__cta .ks-btn { width: 100%; } .ks-st-tile { min-height: 200px; } }

/* hover lift for product cards (transform only; tilt from the engine still layers on top) */
@media (hover: hover) and (pointer: fine) {
  html.ks .ks-st-grid .ks-pcard:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--ks-sh-3); }
}
.ks-st-collections { padding-top: var(--ks-s-6); }

/* ================= Phones (<=767px): app-like store ================= */
.ks-st-qwrap { display: none; }
.ks-st-vsheet[hidden] { display: none; }
.ks-st-vsheet { display: grid; gap: var(--ks-s-4); padding-bottom: var(--ks-s-2); }
.ks-st-vsheet__label { margin: 0; font-family: var(--ks-font-display); font-weight: 600; color: var(--ks-muted); }
.ks-st-vsheet .ks-chip { cursor: pointer; }
.ks-st-vsheet .ks-chip.is-out { opacity: .5; text-decoration: line-through; }
.ks-st-vsheet .ks-chip:focus-within { outline: 3px solid var(--ks-focus, var(--ks-primary)); outline-offset: 2px; }
.ks-st-vsheet .ks-link-arrow { justify-self: center; }

@media (max-width: 767.98px) {
  /* chip bar follows the auto-hiding header */
  .ks-st-barwrap { top: calc(var(--ks-header-offset, 0px) + 8px); transition: top 240ms var(--ks-ease-out); }
  .ks-st-chips { scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
  .ks-st-chips .ks-chip { transition: background-color var(--ks-dur-2) var(--ks-ease), color var(--ks-dur-2) var(--ks-ease), transform var(--ks-dur-2) var(--ks-ease-spring); }

  /* filters live in a KSSheet: the in-page container never shows (no-JS :target keeps an inline fallback) */
  .ks-st-fsheet { position: static; inset: auto; display: none; width: auto; z-index: auto; }
  .ks-st-fsheet.is-open { display: none; }
  .ks-st-fsheet:target { display: block; margin-top: 8px; }
  .ks-st-fsheet__backdrop { display: none; }
  .ks-st-fform { position: static; max-height: none; overflow: visible; padding: var(--ks-s-4); background: var(--ks-surface); border: 1px solid var(--ks-border); border-radius: var(--ks-r-lg); box-shadow: none; animation: none; }
  .ks-st-fform::before { display: none; }
  .ks-st-fform__head { display: none; }
  .ks-sheet__body .ks-st-fform { padding: 0; border: 0; background: transparent; }

  /* 2-column grid, quick-add "+" on the photo, own add button hidden */
  .ks-st-grid { gap: 10px; }
  .ks-st-grid__item { position: relative; }
  .ks-st-grid .ks-pcard__foot .ks-pcard__add:not([disabled]) { display: none; }
  .ks-st-grid .ks-pcard__story { display: none; }
  .ks-st-qwrap { display: block; position: absolute; left: 8px; right: 8px; top: 8px; aspect-ratio: 4 / 5; pointer-events: none; z-index: 5; }
  .ks-st-qadd {
    position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--ks-btn-bg, var(--ks-primary)); color: var(--ks-on-primary); box-shadow: 0 6px 16px rgba(201, 60, 104, .35); cursor: pointer; pointer-events: auto;
    -webkit-tap-highlight-color: transparent; transition: transform var(--ks-dur-2) var(--ks-ease-spring), background-color var(--ks-dur-2) var(--ks-ease);
  }
  .ks-st-qadd:active { transform: scale(.88); }
  .ks-st-qadd svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform var(--ks-dur-2) var(--ks-ease-spring), opacity var(--ks-dur-1) var(--ks-ease); }
  .ks-st-qadd__ok { opacity: 0; transform: scale(.4) rotate(-40deg); }
  .ks-st-qadd.is-added { background: var(--ks-success, #2f9e6f); transform: scale(1.08); }
  .ks-st-qadd.is-added .ks-st-qadd__plus { opacity: 0; transform: scale(.4) rotate(90deg); }
  .ks-st-qadd.is-added .ks-st-qadd__ok { opacity: 1; transform: none; }
  .ks-st-meta { margin-bottom: var(--ks-s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .ks-st-qadd, .ks-st-qadd svg, .ks-st-barwrap { transition: none !important; }
}