/* =========================================================
   Khuttwa drop sections: Dock (D1) · Timer (D3) · Deck (D4)
   ========================================================= */
khuttwa-drop { display: block; position: relative; }
.kd__head { margin-bottom: 16px; }
.kd__eyebrow { margin: 0 0 6px; font-size: 1.1rem; letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.kd__heading { margin: 0; }
.kd__sub { margin: 6px 0 0; opacity: .75; }
.kd__sub p { margin: 0; }
.kd-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .kd-ic { transform: scaleX(-1); }

/* Stage + slides */
.kd-stage { position: relative; height: var(--kd-h, 420px); border-radius: var(--kd-radius, 26px); overflow: hidden; background: var(--kd-stage, var(--kx-dark, #111)); color: var(--kd-text, #fff); isolation: isolate; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* no opacity fade on the slide: a half-transparent parent cuts the photo's "multiply" blend, so its white background flashed as a white box on every switch. The photo and the info animate in by themselves instead. */
.kd-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: none; }
.kd-slide.is-on { opacity: 1; visibility: visible; transition: none; }
.kd-slide__link { position: absolute; inset: 0; z-index: 1; }
.kd-photo { position: absolute; left: 50%; top: var(--kd-img-top, 46%); width: var(--kd-img-w, 78%); max-width: calc(var(--kd-h, 420px) * .56); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--kd-rot, 0deg)); pointer-events: none; }
.kd-photo img, .kd-photo svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.kd--tile .kd-photo { background: var(--kd-tile, var(--kx-tile, #F3EFE8)); border-radius: calc(var(--kd-radius, 26px) - 4px); padding: 6%; box-shadow: 0 24px 40px -24px rgba(0,0,0,.6); }
.kd--blend .kd-photo { mix-blend-mode: multiply; }
.kd--shadow .kd-photo img { filter: drop-shadow(0 26px 22px rgba(0,0,0,.35)); }
.kd-slide.kd-in .kd-photo { animation: kdPhoto .55s cubic-bezier(.2,.7,.2,1); }
.kd-slide.kd-in .kd-info { animation: kdUp .45s ease; }
@keyframes kdPhoto { from { opacity: 0; transform: translate(calc(-50% + 30px), -50%) rotate(calc(var(--kd-rot, 0deg) + 6deg)); } }
@keyframes kdUp { from { opacity: 0; transform: translateY(8px); } }
.kd-top { position: absolute; z-index: 3; top: 14px; inset-inline: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.kd-count { font-size: 1.1rem; letter-spacing: .2em; opacity: .7; }
.kd-badge { font-size: 1.1rem; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: var(--kd-badge, var(--kx-accent, #C9423B)); color: var(--kd-badge-text, #fff); line-height: 1.2; }
.kd-badge--new { background: var(--kd-text, var(--kx-paper, #fff)); color: var(--kd-stage, var(--kx-dark-ink, #111)); }

.kd-info { position: absolute; z-index: 2; inset-inline: 16px; bottom: var(--kd-info-bottom, 18px); }
.kd-title { display: block; font-size: var(--kd-title, 2rem); font-weight: 700; line-height: 1.2; color: inherit; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.kd-price { font-size: var(--kd-price, 2.2rem); font-weight: 800; white-space: nowrap; }
.kd-price.is-sale { color: var(--kd-sale, inherit); }
.kd-price s { font-size: .55em; font-weight: 400; opacity: .55; margin-inline-start: 6px; color: var(--kd-text, #fff); }
.kd-cart { position: relative; z-index: 3; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; min-width: 42px; padding: 0 14px; border-radius: 99px; border: 0; background: var(--kd-btn, var(--kx-paper, #fff)); color: var(--kd-btn-text, var(--kx-dark-ink, #111)); font: inherit; font-size: 1.3rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .25s ease; }
.kd-cart:active { transform: scale(.94); }
.kd-cart > svg { flex: none; }
.kd-cart .icon-load { position: absolute; opacity: 0; } .kd-cart.loading .icon-load { opacity: 1; } .kd-cart.loading .hidden-on-load { opacity: 0; }
.kd-form, .kd-form form { display: contents; margin: 0; }
.kd-cart--round { width: 42px; padding: 0; }

.kd-link { display: flex; justify-content: center; margin-top: 16px; }
.kd-link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-heading); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.kd-link--btn a { border: 1.5px solid var(--color-heading); border-radius: 99px; padding: 12px 26px; }

/* ---------- D1 · Dock ---------- */
.kd-dock-wrap { position: relative; z-index: 4; margin: calc(-1 * var(--kd-dock-overlap, 28px)) 18px 0; }
.kd-dock { display: flex; gap: 6px; padding: 8px; border-radius: 22px; background: var(--kd-dock, var(--kx-dark, #111)); box-shadow: 0 16px 30px -14px rgba(0,0,0,.6); overflow-x: auto; scrollbar-width: none; }
.kd-dock::-webkit-scrollbar { display: none; }
.kd-dock__it { flex: 1 0 var(--kd-dock-size, 56px); max-width: 90px; aspect-ratio: 1; padding: 4px; border: 0; border-radius: 14px; background: var(--kd-dock-item, var(--kx-item, #262320)); cursor: pointer; transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease; }
.kd-dock__it img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.kd-dock__it.is-on { background: var(--kd-dock-on, var(--kx-cream, #F3EDE3)); transform: translateY(-8px); }
.kd--dock .kd-stage { --kd-info-bottom: calc(var(--kd-dock-overlap, 28px) + 16px); }

/* ---------- D3 · Timer ---------- */
.kd-timer { position: absolute; z-index: 3; top: 14px; inset-inline: 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; }
.kd-timer[hidden] { display: none; }
.kd-timer__lab { font-size: 1.05rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.kd-timer__box { display: flex; gap: 4px; }
.kd-timer__box span { min-width: 34px; padding: 6px 6px 5px; text-align: center; border-radius: 10px; background: var(--kd-timer-bg, var(--kx-dark, #111)); color: var(--kd-timer-text, #fff); font-size: 1.3rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kd-timer__box small { display: block; font-size: .75rem; font-weight: 500; letter-spacing: .1em; opacity: .6; margin-top: 2px; }
.kd-ended-msg { display: none; }
.kd-ended .kd-ended-msg { display: inline; }
.kd-ended .kd-timer__box { display: none; }
.kd--timer .kd-info { inset-inline: 14px; bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 16px; background: var(--kd-glass, rgba(255,255,255,.78)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--kd-glass-text, var(--kx-dark-ink, #111)); }
.kd--timer .kd-title { font-size: 1.45rem; -webkit-line-clamp: 1; }
.kd--timer .kd-price { font-size: 1.4rem; color: var(--kd-sale, var(--kx-accent-ink, #C9423B)); }
.kd--timer .kd-price s { color: inherit; }
.kd--timer .kd-cart { background: var(--kd-btn, var(--kx-dark, #111)); color: var(--kd-btn-text, #fff); }
.kd-rail { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.kd-rail::-webkit-scrollbar { display: none; }
.kd-rail__it { flex: 0 0 var(--kd-rail-w, 30%); scroll-snap-align: start; padding: 0; border: 0; background: none; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.kd-rail__img { display: block; aspect-ratio: 1.1; border-radius: 14px; background: var(--kd-tile, var(--kx-tile, #F3EFE8)); overflow: hidden; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color .25s; }
.kd-rail__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.kd-rail__it.is-on .kd-rail__img { outline-color: var(--color-heading); }
.kd-rail__txt { display: flex; gap: 6px; align-items: baseline; margin-top: 6px; font-size: 1.1rem; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-rail__txt b { opacity: 1; color: var(--color-heading); }
.kd-rail__it.is-on .kd-rail__txt { opacity: 1; }
.kd-rail__bar { display: block; position: relative; height: 2px; margin-top: 6px; border-radius: 2px; background: rgba(var(--color-heading-rgb), .12); overflow: hidden; }
.kd-rail__bar::after { content: ""; position: absolute; inset: 0; background: var(--color-heading); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .kd-rail__bar::after { transform-origin: right; }
.kd-rail__it.is-on .kd-rail__bar::after { transform: scaleX(1); }
.kd-rail__it.is-on.kd-run .kd-rail__bar::after { animation: kdProg var(--kd-dur, 4s) linear forwards; }
.kd-noplay .kd-rail__it.is-on .kd-rail__bar::after, .kd-paused .kd-rail__it.is-on .kd-rail__bar::after { animation: none; transform: scaleX(1); }
@keyframes kdProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- D4 · Deck ---------- */
.kd-deck { position: relative; height: calc(var(--kd-h, 420px) + 30px); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.kd--deck .kd-slide { top: 30px; bottom: 0; height: auto; opacity: 1; visibility: visible; border-radius: var(--kd-radius, 26px); background: var(--kd-stage, #F5F0E8); color: var(--kd-text, var(--kx-dark-ink, #111)); overflow: hidden; box-shadow: 0 20px 34px -24px rgba(0,0,0,.45); transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease; transform-origin: 50% 0; will-change: transform; }
.kd--deck .kd-slide[data-pos="0"] { z-index: 4; cursor: grab; }
.kd--deck .kd-slide[data-pos="1"] { z-index: 3; transform: translateY(-14px) scale(.94); background: var(--kd-back1, #ECE4D6); }
.kd--deck .kd-slide[data-pos="2"] { z-index: 2; transform: translateY(-28px) scale(.88); background: var(--kd-back2, #E3D9C8); }
.kd--deck .kd-slide[data-pos="3"], .kd--deck .kd-slide[data-pos="x"] { z-index: 1; transform: translateY(-28px) scale(.84); opacity: 0; pointer-events: none; }
.kd--deck .kd-slide:not([data-pos="0"]) > * { opacity: 0; transition: opacity .2s ease; }
.kd--deck .kd-slide[data-pos="0"] > * { opacity: 1; transition: opacity .35s ease .1s; }
.kd--deck .kd-slide.is-flying { transition: transform .3s ease-in, opacity .3s ease-in; opacity: 0; }
.kd-num { position: absolute; z-index: 2; top: 12px; inset-inline-start: 16px; font-size: 4rem; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--kd-text, var(--kx-dark-ink, #111)) 12%, transparent); pointer-events: none; }
.kd--deck .kd-top { justify-content: flex-end; }
.kd--deck .kd-price { font-size: 1.6rem; color: var(--kd-sale, var(--kx-accent-ink, #C9423B)); }
.kd--deck .kd-price s { color: var(--kd-text, var(--kx-dark-ink, #111)); }
.kd--deck .kd-cart { background: var(--kd-btn, var(--kx-dark, #111)); color: var(--kd-btn-text, #fff); }
.kd-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.kd-dot { width: var(--kd-dot, 46px); height: var(--kd-dot, 46px); padding: 3px; border-radius: 50%; border: 2px solid #fff; background: var(--kd-tile, var(--kx-tile, #F3EFE8)); box-shadow: 0 0 0 1px var(--color-border, #e3e3e3); cursor: pointer; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; }
.kd-dot img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; mix-blend-mode: multiply; }
.kd-dot.is-on { box-shadow: 0 0 0 2px var(--color-heading); transform: scale(1.06); }
.kd-hint { text-align: center; font-size: 1.1rem; opacity: .5; margin: 8px 0 0; }

.kd-inner { max-width: var(--kd-max, 560px); margin-inline: auto; }
@media (prefers-reduced-motion: reduce) {
  .kd-slide, .kd-photo, .kd--deck .kd-slide { animation: none !important; transition: none !important; }
}
.kd--deck .kd-info { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kd--deck .kd-title { font-size: 1.8rem; }
.kd--deck .kd-price, .kd--timer .kd-price { display: block; margin-top: 3px; }
.kd--deck .kd-cart, .kd--timer .kd-cart { width: 44px; height: 44px; }
.kd-ended .kd-live { display: none; }