/* =========================================================
   Khuttwa new arrivals: Just landed · Spotlight
   ========================================================= */
.kn__head .kn__eyebrow { margin: 0 0 6px; font-size: 1.1rem; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.kn__head h2 { margin: 0; }
.kn__sub { margin: 6px 0 0; opacity: .75; }
.kn__sub p { margin: 0; }
.kn-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .kn-ic { transform: scaleX(-1); }
.kn-more { display: flex; justify-content: center; margin-top: 20px; }
.kn-more a { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--color-heading); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.kn-more--btn a { border: 0; background: var(--kn-btn, var(--kx-dark, #111)); color: var(--kn-btn-text, #fff); border-radius: 99px; padding: 13px 24px; }

/* Card */
.kn-card { box-sizing: border-box; position: relative; height: 100%; display: flex; flex-direction: column; background: var(--kc-card-bg, var(--kx-paper, #fff)); border: 1px solid var(--kc-border, var(--color-border)); border-radius: var(--kn-radius, 20px); padding: 8px; color: var(--color-heading); }
.kn-media { position: relative; aspect-ratio: var(--kn-ratio, 1); background: var(--kc-media-bg, var(--kx-tile, #F3F1EC)); border-radius: calc(var(--kn-radius, 20px) - 5px); overflow: hidden; }
.kn-link { position: absolute; inset: 0; z-index: 2; }
.kn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--kn-fit, contain); padding: var(--kn-pad, 6%); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.kn-card:hover .kn-img { transform: scale(1.05); }
.kn-ph { opacity: .35; }
.kn-stamp { position: absolute; z-index: 3; top: 10px; inset-inline-start: 10px; background: var(--kn-stamp, #E7B429); color: var(--kn-stamp-text, var(--kx-dark-ink, #111)); font-size: 1rem; font-weight: 900; letter-spacing: .1em; padding: 5px 9px; border-radius: 8px; transform: rotate(-8deg); pointer-events: none; }
.kn-stamp--pill { transform: none; border-radius: 99px; }
.kn-heart { position: absolute; z-index: 3; top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--kx-paper, #fff); color: var(--kx-dark-ink, #111); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.kn-heart.active { background: var(--kx-dark, #111); color: #fff; }
.kn-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 10px 3px 2px; margin-top: auto; }
.kn-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kn-title { font-size: var(--kc-title-size-m, 1.35rem); font-weight: 600; line-height: 1.3; color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kn-price { font-size: 1.35rem; font-weight: 700; white-space: nowrap; }
.kn-price.is-sale { color: var(--kc-price-sale, var(--kx-accent-ink, #C9423B)); }
.kn-price s { font-size: .85em; font-weight: 400; color: var(--kc-price-compare, #999); margin-inline-start: 5px; }
.kn-ago { display: flex; align-items: center; gap: 5px; font-size: 1.05rem; color: var(--kn-ago, #14854E); margin-top: 2px; }
.kn-ago[hidden] { display: none; }
.kn-ago i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; animation: knPulse 1.4s infinite; }
@keyframes knPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.kd-cart.kn-cart { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-border); background: transparent; color: var(--color-heading); display: grid; place-items: center; padding: 0; cursor: pointer; transition: all .3s ease; }
.kd-cart.kn-cart > * { grid-area: 1 / 1; }
.kd-cart.kn-cart span { display: none; }
.kn-card:hover .kd-cart.kn-cart, .kd-cart.kn-cart:hover { background: var(--kx-dark, #111); color: #fff; border-color: var(--kx-dark-ink, #111); }
.kd-cart.kn-cart .icon-load { opacity: 0; } .kd-cart.kn-cart.loading .icon-load { opacity: 1; } .kd-cart.kn-cart.loading .hidden-on-load { opacity: 0; }
.kd-cart.kn-cart .kd-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.kd-form, .kd-form form { display: contents; margin: 0; }

/* ---------- Just landed ---------- */
.kn-mq { overflow: hidden; background: var(--kn-mq-bg, var(--kx-dark, #111)); color: var(--kn-mq-text, #fff); padding: 11px 0; margin: 18px 0; }
.kn-mq--tilt { transform: rotate(-1.5deg); margin-inline: -10px; }
.kn-mq__t { display: flex; width: max-content; animation: knMq var(--kn-mq-speed, 14s) linear infinite; }
.kn-mq__t span { padding-inline-end: 22px; font-weight: 800; font-size: 1.3rem; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.kn-mq__t em { font-style: normal; color: var(--kn-mq-accent, #E7B429); padding-inline-end: 22px; }
[dir="rtl"] .kn-mq__t { animation-direction: reverse; }
@keyframes knMq { to { transform: translateX(-50%); } }
.kn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--kn-per, 4), minmax(0, 1fr)); gap: var(--kn-gap, 16px); }
@media (max-width: 1024px) { .kn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .kn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .kn-mq { margin-inline: calc(var(--kh-gut, 15px) * -1); } .kn-mq--tilt { margin-inline: -20px; } }
.kn-anim .kn-grid > li { opacity: 0; }
.kn-anim .kn-grid > li.is-in { animation: knLand .7s cubic-bezier(.2,.8,.2,1) forwards; }
.kn-anim .kn-grid > li .kn-stamp { transform: rotate(-8deg) scale(0); }
.kn-anim .kn-grid > li .kn-stamp--pill { transform: scale(0); }
.kn-anim .kn-grid > li.is-in .kn-stamp { animation: knStamp .45s cubic-bezier(.2,1.6,.4,1) .45s forwards; }
.kn-anim .kn-grid > li.is-in .kn-stamp--pill { animation-name: knStampP; }
@keyframes knLand { 0% { opacity: 0; transform: translateY(-40px) rotate(-3deg); } 60% { opacity: 1; transform: translateY(6px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes knStamp { to { transform: rotate(-8deg) scale(1); } }
@keyframes knStampP { to { transform: scale(1); } }

/* ---------- Spotlight ---------- */
.kn-flow { position: relative; height: var(--kn-flow-h, 400px); perspective: 900px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: var(--kn-flow-bg, radial-gradient(60% 55% at 50% 45%, var(--kx-paper, #fff) 0%, var(--kx-cream, #F3EDE3) 55%, #E6DCCB 100%)); border-radius: var(--kn-flow-radius, 0); margin-top: 18px; }
.kn-glow { position: absolute; left: 50%; top: 0; width: calc(var(--kn-card-w, 210px) * 1.3); height: 100%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(255,255,255,.95), transparent 72%); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%); opacity: .55; pointer-events: none; animation: knFlick 3s ease-in-out infinite; }
@keyframes knFlick { 50% { opacity: .32; } }
.kn-fc { position: absolute; left: 50%; top: 26px; width: var(--kn-card-w, 210px); margin-inline-start: calc(var(--kn-card-w, 210px) / -2); transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease, filter .5s ease; cursor: pointer; }
[dir="rtl"] .kn-fc { left: auto; right: 50%; }
.kn-fc[data-p="0"] { transform: translateX(0) translateZ(60px); z-index: 5; cursor: default; }
.kn-fc[data-p="1"] { transform: translateX(var(--kn-off, 150px)) translateZ(-60px) rotateY(-35deg); z-index: 4; filter: brightness(.93); }
.kn-fc[data-p="-1"] { transform: translateX(calc(var(--kn-off, 150px) * -1)) translateZ(-60px) rotateY(35deg); z-index: 4; filter: brightness(.93); }
.kn-fc[data-p="2"] { transform: translateX(calc(var(--kn-off, 150px) * 1.8)) translateZ(-180px) rotateY(-45deg); z-index: 3; opacity: var(--kn-far, 0); }
.kn-fc[data-p="-2"] { transform: translateX(calc(var(--kn-off, 150px) * -1.8)) translateZ(-180px) rotateY(45deg); z-index: 3; opacity: var(--kn-far, 0); }
.kn-fc[data-p="x"] { transform: translateZ(-320px); opacity: 0; z-index: 1; pointer-events: none; }
.kn-fc:not([data-p="0"]) .kn-link, .kn-fc:not([data-p="0"]) .kn-heart, .kn-fc:not([data-p="0"]) .kd-cart, .kn-fc:not([data-p="0"]) a { pointer-events: none; }
.kn-float .kn-fc[data-p="0"] .kn-img { animation: knFloat 3.2s ease-in-out infinite; }
@keyframes knFloat { 50% { transform: translateY(-8px) rotate(-5deg); } }
.kn-flow-info { text-align: center; margin-top: 12px; min-height: 44px; }
.kn-flow-info b { display: block; font-size: 1.7rem; color: var(--color-heading); }
.kn-flow-info span { font-size: 1.35rem; font-weight: 700; }
.kn-flow-info span.is-sale { color: var(--kc-price-sale, var(--kx-accent-ink, #C9423B)); }
.kn-flow-info s { opacity: .5; font-weight: 400; margin-inline-start: 6px; }
.kn-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.kn-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 9px; background: rgba(var(--color-heading-rgb), .18); cursor: pointer; transition: width .35s ease, background .35s ease; }
.kn-dots button.is-on { width: 22px; background: var(--color-heading); }
@media (min-width: 768px) {
  .kn-flow { --kn-off: calc(var(--kn-card-w, 210px) * 1.05); --kn-far: 1; }
}
@media (prefers-reduced-motion: reduce) { .kn-anim .kn-grid > li { opacity: 1 !important; animation: none !important; } .kn-mq__t, .kn-glow, .kn-img { animation: none !important; } }