/*
 * Kings Marketplace — motion layer.
 *
 * Two easing curves only:
 *   --ent  decelerating, for reveals and hovers
 *   --chr  symmetrical, for header and bars
 *
 * Nothing here hides content unless the .km-js class is present, and that
 * class is added by motion.js on its first line. If the script never runs,
 * every rule below that could hide something is simply inert.
 */

:root {
	--ent: cubic-bezier(.16, 1, .3, 1);
	--chr: cubic-bezier(.65, 0, .35, 1);
}

/* Off-screen slide-ins would otherwise widen the document. `clip` is used
   rather than `hidden` because `hidden` makes the body a scroll container
   and silently kills position:sticky on the header. */
body { overflow-x: clip; }

/* =========================================================
   1. Scroll reveal
   ========================================================= */

.km-js .reveal {
	opacity: 0;
	transform: translateY(34px);
	will-change: opacity, transform;
}

.km-js .reveal--left  { transform: translate3d(-56px, 14px, 0) scale(.965); }
.km-js .reveal--right { transform: translate3d(56px, 14px, 0) scale(.965); }

.km-js .reveal.is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity .9s var(--ent), transform 1.05s var(--ent);
	transition-delay: var(--reveal-delay, 0ms);
}

.km-js .reveal--left.is-revealed,
.km-js .reveal--right.is-revealed {
	transition: opacity .9s var(--ent), transform 1.15s var(--ent);
	transition-delay: var(--reveal-delay, 0ms);
}

/* Once it has played, drop the transition and release the compositor layer
   so we aren't holding a GPU layer per element for the life of the page. */
.km-js .reveal[data-motion-done] {
	transition: none;
	will-change: auto;
}

/* Media slides behind its own frame rather than past the layout. */
.km-js .reveal img,
.km-js .reveal picture,
.km-js .reveal figure { display: block; }

.km-js .reveal-frame { overflow: hidden; }

/* =========================================================
   2. Header tuck + floating bar
   ========================================================= */

.km-header-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
	transition: transform .5s var(--chr);
}

/* 101% so the bottom border travels off too, leaving no hairline. */
.km-header-wrap.is-tucked { transform: translateY(-101%); }

.km-bar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 55;
	padding: 14px 24px;
	pointer-events: none;          /* wrapper is click-through */
	transform: translateY(-130%);
	visibility: hidden;
	transition: transform .5s var(--chr), visibility .5s var(--chr);
}

.km-bar.is-showing { transform: none; visibility: visible; }

.km-bar__inner {
	pointer-events: auto;          /* the card itself is interactive */
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 16px 12px 20px;
	background: var(--paper-2, #F7F7F5);
	border: 1px solid var(--line, #D3D3C7);
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
}

.km-bar__thumb {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 10px;
	object-fit: cover;
	background: var(--paper-3, #E3E4DD);
}

.km-bar__text { min-width: 0; flex: 1 1 auto; }

.km-bar__name {
	display: block;
	font-family: var(--font-head, "Oswald", sans-serif);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	line-height: 1.25;
	/* The name finishes. An ellipsis here hid the pack size, which is
	   the part that tells two otherwise identical products apart. */
	white-space: normal;
	overflow-wrap: break-word;
	color: var(--ink, #0E1A2B);
}

.km-bar__price {
	display: block;
	font-family: var(--font-mono, monospace);
	font-size: 13px;
	color: var(--text-soft, #545F6D);
	margin-top: 1px;
}
.km-bar__price del { opacity: .55; margin-right: 6px; }

.km-bar__cta { flex: 0 0 auto; }

@media (max-width: 640px) {
	.km-bar { padding: 10px 12px; }
	.km-bar__inner { gap: 12px; padding: 10px 12px; border-radius: 14px; }
	.km-bar__thumb { width: 36px; height: 36px; flex-basis: 36px; }
	.km-bar__name { font-size: 13px; }

	/*
	 * Two buttons and a product name do not fit across a phone. Held on
	 * one line the buttons took their width first and left the name 53
	 * pixels, which broke "Kings Marketplace" mid-word into KINGS /
	 * MARKETP / LACE. The name gets the full width and the buttons drop
	 * to a row of their own underneath.
	 */
	.km-bar__inner { flex-wrap: wrap; row-gap: 10px; }
	.km-bar__thumb { order: 1; }
	/* flex-basis:100% is what actually forces the break. With a basis of
	   0 the browser still judged all three small enough to share one
	   line and then shrank the name to 64px. */
	.km-bar__text { order: 2; flex: 1 1 100%; }
	.km-bar__cta {
		order: 3;
		flex: 1 1 0;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

/* =========================================================
   3. Buttons — pill + sheen
   ========================================================= */

.btn,
.km-bar__cta,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: 100px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .38s var(--ent), background-color .38s var(--ent), color .38s var(--ent);
}

.btn::after,
.km-bar__cta::after,
.woocommerce a.button::after,
.woocommerce button.button::after,
.woocommerce input.button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;                    /* above the fill, behind the label */
	pointer-events: none;
	background: linear-gradient(115deg,
		transparent 18%,
		rgba(255, 255, 255, .30) 44%,
		rgba(255, 255, 255, .30) 56%,
		transparent 82%);
	transform: translateX(-130%);
	transition: transform .75s var(--ent);
}

.btn:hover::after,
.btn:focus-visible::after,
.km-bar__cta:hover::after,
.km-bar__cta:focus-visible::after,
.woocommerce a.button:hover::after,
.woocommerce button.button:hover::after,
.woocommerce input.button:hover::after { transform: translateX(130%); }

.btn:hover,
.km-bar__cta:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { transform: translateY(-2px) scale(1.012); }

/* A white sheen is invisible on a light button, so those get a dark one. */
.btn-outline::after,
.btn-ghost::after,
.km-bar__cta.btn-outline::after {
	background: linear-gradient(115deg,
		transparent 18%,
		rgba(14, 26, 43, .12) 44%,
		rgba(14, 26, 43, .12) 56%,
		transparent 82%);
}

.btn svg { transition: transform .38s var(--ent); }
.btn:hover svg { transform: translateX(4px); }

/* Direction has to match meaning. */
.btn[data-icon="back"]:hover svg { transform: translateX(-4px); }
.btn[data-icon="static"]:hover svg,
.btn[data-icon="lock"]:hover svg { transform: none; }

.btn[disabled],
.btn.is-disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
	transform: none;
}
.btn[disabled]::after,
.btn.is-disabled::after,
.woocommerce a.button.disabled::after,
.woocommerce button.button:disabled::after { display: none; }

/* =========================================================
   4. Review marquee
   ========================================================= */

.km-marquee { margin: 0; padding: 0; }

.km-marquee__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.km-marquee__track {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: km-scroll var(--duration, 40s) linear infinite;
}

.km-marquee__track--reverse { animation-direction: reverse; }

/* -50% is seamless only because the item list is rendered exactly twice. */
@keyframes km-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.km-marquee__viewport:hover .km-marquee__track,
.km-marquee__viewport:focus-within .km-marquee__track { animation-play-state: paused; }

.km-review {
	flex: 0 0 auto;
	width: 320px;
	background: var(--paper-2, #F7F7F5);
	border: 1px solid var(--line, #D3D3C7);
	border-radius: 14px;
	padding: 18px 20px;
}

.km-review__stars { color: var(--amber, #C6902E); letter-spacing: .12em; font-size: 13px; }
.km-review__body  { margin: 8px 0 10px; font-size: 14.5px; line-height: 1.55; }
.km-review__who   { font-family: var(--font-mono, monospace); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft, #545F6D); }

/* =========================================================
   5. Cart drawer
   ========================================================= */

.km-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(14, 26, 43, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s var(--chr), visibility .4s var(--chr);
}
.km-scrim.is-open { opacity: 1; visibility: visible; }

.km-panel {
	position: fixed;
	right: 0;
	top: 0;
	height: 100%;
	width: min(430px, 100%);
	z-index: 95;
	display: flex;
	flex-direction: column;
	background: var(--paper-2, #F7F7F5);
	border-radius: 26px 0 0 26px;
	box-shadow: -18px 0 50px rgba(16, 24, 40, .22);
	transform: translateX(100%);
	transition: transform .52s var(--ent);
}
.km-panel.is-open { transform: translateX(0); }

.km-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px 14px;
	border-bottom: 1px solid var(--line, #D3D3C7);
	flex: 0 0 auto;
}

.km-panel__head h2 {
	margin: 0;
	font-family: var(--font-head, "Oswald", sans-serif);
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.km-panel__close {
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--text-soft, #545F6D);
	padding: 4px 6px;
	border-radius: 6px;
}
.km-panel__close:hover { color: var(--ink, #0E1A2B); }

/* min-height:0 lets this actually shrink inside the flex column, and
   overscroll-behavior stops the page behind scrolling at the list end. */
.km-panel__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 22px;
}

.km-panel__foot {
	flex: 0 0 auto;
	padding: 16px 22px 22px;
	border-top: 1px solid var(--line, #D3D3C7);
}

.km-panel__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 12px;
	font-family: var(--font-mono, monospace);
}

.km-panel__empty { color: var(--text-soft, #545F6D); text-align: center; padding: 40px 0; }

.km-cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line, #D3D3C7); }
.km-cart-line img { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; flex: 0 0 54px; }
.km-cart-line__name { font-weight: 600; font-size: 14px; }
.km-cart-line__meta { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text-soft, #545F6D); margin-top: 3px; }

@media (max-width: 520px) {
	.km-panel { border-radius: 0; }
}

/* =========================================================
   6. Page transitions
   ========================================================= */

.km-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 120;
	background: linear-gradient(90deg, var(--amber, #C6902E), var(--amber-deep, #93691F));
	opacity: 0;
	pointer-events: none;
}
.km-progress.is-running { opacity: 1; transition: width .5s var(--chr); }

.km-js.is-leaving body { opacity: .4; transition: opacity .26s var(--chr); }

.km-js .km-enter {
	animation: km-enter .62s var(--ent) both;
}

@keyframes km-enter {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* =========================================================
   Reduced motion — everything above goes quiet
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.km-js .reveal,
	.km-js .reveal--left,
	.km-js .reveal--right {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		will-change: auto;
	}

	.km-header-wrap,
	.km-bar,
	.km-panel,
	.km-scrim { transition: none !important; }

	.km-header-wrap.is-tucked { transform: none; }

	.btn::after,
	.km-bar__cta::after,
	.woocommerce a.button::after,
	.woocommerce button.button::after,
	.woocommerce input.button::after { display: none; }

	.btn:hover,
	.km-bar__cta:hover,
	.woocommerce a.button:hover { transform: none; }
	.btn:hover svg { transform: none; }

	.km-marquee__track { animation: none; }
	.km-marquee__viewport {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.km-progress { display: none; }
	.km-js.is-leaving body { opacity: 1; transition: none; }
	.km-js .km-enter { animation: none; }
}

/* =========================================================
   7. Counting numbers
   ========================================================= */

/* Tabular figures so the element keeps its width while the digits run —
   without this the surrounding layout twitches on every frame. */
.km-count,
.km-js .num { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	/* Counters simply show their final value; motion.js never starts them. */
	.km-count { font-variant-numeric: normal; }
}

/* =========================================================
   Cart drawer — quantity controls and totals
   ========================================================= */

.km-cart-line{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line, #D3D3C7); }
.km-cart-line.is-busy{ opacity:.5; pointer-events:none; }
.km-cart-line img{ width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--line, #D3D3C7); border-radius:8px; flex:0 0 64px; padding:6px; }
.km-cart-line__body{ flex:1 1 auto; min-width:0; }
.km-cart-line__name{ font-weight:600; font-size:14px; line-height:1.3; }
.km-cart-line__price{ font-family:var(--font-mono, monospace); font-size:12px; color:var(--text-soft, #545F6D); margin-top:3px; }
.km-cart-line__row{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.km-cart-line__total{ font-family:var(--font-mono, monospace); font-weight:600; font-size:14px; margin-left:auto; }
.km-cart-line__remove{ border:0; background:transparent; font-family:var(--font-mono, monospace); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute, #838C97); cursor:pointer; padding:4px 0; }
.km-cart-line__remove:hover{ color:var(--alert, #A23B2E); }

/* Tick boxes: Select all / Remove selected / Clear cart, and one box per line. */
.km-cart-tools{ display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; padding:2px 0 10px; border-bottom:1px solid var(--line, #D3D3C7); }
.km-cart-tools[hidden]{ display:none; }
.km-cart-tools__all{ display:inline-flex; align-items:center; gap:8px; margin-right:auto; font-size:14px; font-weight:600; cursor:pointer; }
.km-cart-tools__btn{ border:0; background:transparent; padding:4px 0; font-family:var(--font-mono, monospace); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft, #545F6D); cursor:pointer; }
.km-cart-tools__btn:hover:not([disabled]){ color:var(--ink, #0E1A2B); }
.km-cart-tools__btn--clear:hover:not([disabled]){ color:var(--alert, #A23B2E); }
.km-cart-tools__btn[disabled]{ opacity:.4; cursor:not-allowed; }
.km-cart-tools__all input,
.km-cart-line__pick{ width:20px; height:20px; margin:0; flex:0 0 20px; accent-color:var(--amber, #C6902E); cursor:pointer; }
.km-cart-line__pick{ align-self:center; }
.km-cart-confirm{ padding:12px 14px; margin-bottom:4px; border:1px solid var(--alert, #A23B2E); border-radius:12px; background:rgba(162,59,46,0.06); }
.km-cart-confirm[hidden]{ display:none; }
.km-cart-confirm p{ margin:0 0 10px; font-weight:600; font-size:14px; }
.km-cart-confirm__actions{ display:flex; gap:10px; }
.km-cart-confirm__actions .btn{ flex:1 1 0; justify-content:center; }
.km-panel.is-busy .km-panel__body,
.km-panel.is-busy .km-panel__foot{ opacity:.55; pointer-events:none; }
.km-panel__actions .btn.is-disabled{ opacity:.45; cursor:not-allowed; }
.km-panel__note--picks{ margin-top:10px; }
.km-panel__note--picks[hidden]{ display:none; }
.km-panel__totals[hidden]{ display:none; }
.km-panel__wish{
	position:relative; margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
	width:44px; height:44px; border-radius:999px; color:var(--text-soft, #545F6D);
}
.km-panel__wish:hover{ background:rgba(224,69,123,.08); color:#E0457B; }
.km-panel__wish svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; }
.km-panel__wish-n{
	position:absolute; top:4px; right:2px; min-width:17px; height:17px; padding:0 4px; border-radius:999px;
	background:#E0457B; color:#fff; font-family:var(--font-mono, monospace); font-size:10px; font-weight:700;
	display:flex; align-items:center; justify-content:center;
}
.km-panel__wish-n[hidden]{ display:none; }

.km-qty{ display:inline-flex; align-items:center; border:1px solid var(--line, #D3D3C7); border-radius:100px; background:#fff; }
.km-qty__btn{ width:32px; height:32px; border:0; background:transparent; font-size:18px; line-height:1; cursor:pointer; color:var(--ink, #0E1A2B); border-radius:100px; }
.km-qty__btn:hover:not([disabled]){ background:var(--paper-3, #E3E4DD); }
.km-qty__btn[disabled]{ opacity:.35; cursor:not-allowed; }
/* The count is a box you can type in. It keeps the flat, borderless
   look inside the pill so the line still reads as one control. */
.km-qty__n{
	width:44px;
	min-width:44px;
	height:30px;
	padding:0 2px;
	text-align:center;
	font-family:var(--font-mono, monospace);
	font-size:14px;
	font-variant-numeric:tabular-nums;
	color:var(--ink, #0E1A2B);
	background:transparent;
	border:0;
	border-radius:8px;
	appearance:none;
	-moz-appearance:textfield;
}
.km-qty__n::-webkit-outer-spin-button,
.km-qty__n::-webkit-inner-spin-button{ appearance:none; margin:0; }
.km-qty__n:hover{ background:rgba(198,144,46,0.10); }
.km-qty__n:focus{
	outline:none;
	background:rgba(198,144,46,0.16);
	box-shadow:inset 0 0 0 2px var(--amber, #C6902E);
}
.km-cart-line.is-busy{ opacity:.55; pointer-events:none; }

.km-panel__totals{ margin-bottom:14px; }
.km-panel__total{ display:flex; justify-content:space-between; align-items:baseline; padding:6px 0; font-size:14px; color:var(--text-soft, #545F6D); }
.km-panel__total--grand{ border-top:1px solid var(--line, #D3D3C7); margin-top:6px; padding-top:12px; font-size:16px; color:var(--ink, #0E1A2B); }
.km-panel__total--grand strong{ font-family:var(--font-mono, monospace); font-size:20px; }
.km-panel__note{ margin:6px 0 0; font-size:12px; color:var(--text-mute, #838C97); }
.km-panel__actions{ display:flex; gap:10px; }
.km-panel__actions .btn{ flex:1 1 0; justify-content:center; text-align:center; }

/* =========================================================
   Phone — iPhone and Safari
   ========================================================= */

/* The drawer is full height on a phone. 100% measures the layout
   viewport, which on iOS includes the strip behind the toolbars, so the
   footer with Checkout in it sat below the fold. dvh measures what can
   actually be seen. */
@supports ( height: 100dvh ){
	.km-panel{ height:100dvh; }
}

/* Clear of the home indicator. */
@supports ( padding: max(0px) ){
	.km-panel__foot{ padding-bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px)); }
}

.km-panel__body{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

@media ( pointer: coarse ), ( max-width: 900px ){
	/* 16px, or Safari zooms the page when the field is tapped and stays
	   zoomed for everything after it. */
	.km-qty__n{ font-size:16px; width:52px; min-width:52px; height:36px; }
	.km-qty__btn{ min-width:44px; min-height:44px; }
	.km-panel__close{ min-width:44px; min-height:44px; }
	.km-cart-line__remove{ min-height:36px; }
	.km-cart-tools__btn{ min-height:44px; }
	.km-cart-tools__all{ min-height:44px; }
	.km-cart-tools__all input,
	.km-cart-line__pick{ width:24px; height:24px; flex-basis:24px; }
}

/* Long names finish rather than being cut. */
.km-cart-line__name{ overflow-wrap:break-word; }
.km-bar__name{ overflow-wrap:break-word; }