/*!
 * Arkishuz Storefront — layout, layering & overlays
 *
 * Hero stacking (per Oxfords reference):
 *   z1  .ark-hero__bg      studio light + vignette (one layer per category, cross-faded)
 *   z2  .ark-hero__words   massive category name
 *   z3  .ark-hero__stage   floating shoe cutout + grounded cast shadow
 *   z4  .ark-hero__ui      nav, copy, CTAs, swatches
 */

/* ==========================================================================
   Tokens
   ========================================================================== */

.ark-sf {
	--ark-ui: #f4ebdd;
	--ark-ui-muted: rgba(244, 235, 221, 0.72);
	--ark-gold: #c9a24d;
	--ark-accent: #e0b26a;              /* animated per hero category */
	--ark-word: rgba(236, 226, 222, 0.9);
	--ark-vignette: 0.78;

	--ark-paper: #f3eee6;
	--ark-card: #fbf8f3;
	--ark-ink: #1b1411;
	--ark-ink-muted: #6e625a;
	--ark-accent-ink: #8a4b22;
	--ark-line: rgba(27, 20, 17, 0.12);
	--ark-danger: #a1331f;

	--ark-f-display: "Saira Condensed", "Oswald", "Arial Narrow", sans-serif;
	--ark-f-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
	--ark-f-sans: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ark-pad: clamp(16px, 3.2vw, 48px);
	--ark-shoe-w: min(46vw, 900px);
	--ark-shoe-h: min(46vh, calc(var(--ark-shoe-w) * 0.62));
	--ark-floor: 21vh;
	--ark-shoe-x: 55%;
	--ark-word-chars: 7;
	--ark-word-y: -7vh;
	--ark-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	position: relative;
	font-family: var(--ark-f-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ark-sf--portal {
	display: contents;
}

.ark-sf *,
.ark-sf *::before,
.ark-sf *::after {
	box-sizing: border-box;
}

/* Neutralise theme button/link styles (e.g. Hello Elementor pink buttons).
   :where() keeps this at (0,2,0) so it beats theme rules like button:hover (0,1,1)
   while component rules declared later still win. */
.ark-sf :where(button),
.ark-sf :where(button):hover,
.ark-sf :where(button):focus {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
	line-height: inherit;
	box-shadow: none;
	cursor: pointer;
}

.ark-sf a {
	color: inherit;
	text-decoration: none;
}

.ark-sf img {
	max-width: 100%;
	height: auto;
	border: 0;
	box-shadow: none;
}

/* :where() keeps this reset at (0,1,0) so component classes declared later win. */
.ark-sf :where(h1, h2, h3, p, figure, blockquote, dl, dt, dd, ul, ol) {
	margin: 0;
	padding: 0;
}

.ark-sf :focus-visible {
	outline: 2px solid var(--ark-gold);
	outline-offset: 3px;
}

.ark-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

html.ark-lock,
html.ark-lock body {
	overflow: hidden;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ark-sf .ark-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	font-family: var(--ark-f-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background-color 0.35s var(--ark-ease), color 0.35s var(--ark-ease), border-color 0.35s var(--ark-ease), transform 0.35s var(--ark-ease);
}

.ark-sf .ark-btn svg {
	transition: transform 0.35s var(--ark-ease);
}

.ark-sf .ark-btn:hover svg {
	transform: translateX(3px);
}

.ark-sf .ark-btn--primary {
	background-color: var(--ark-accent);
	color: #140d0a;
}

.ark-sf .ark-btn--primary:hover {
	background-color: var(--ark-ui);
	color: #140d0a;
}

.ark-sf .ark-btn--ghost {
	border: 1px solid rgba(244, 235, 221, 0.42);
	color: var(--ark-ui);
}

.ark-sf .ark-btn--ghost:hover {
	border-color: var(--ark-ui);
	background-color: rgba(244, 235, 221, 0.1);
	color: var(--ark-ui);
}

.ark-sf .ark-btn--text {
	padding: 0 8px;
	color: var(--ark-ui-muted);
	text-decoration: underline;
	text-decoration-color: rgba(244, 235, 221, 0.35);
	text-underline-offset: 5px;
}

.ark-sf .ark-btn--text:hover {
	color: var(--ark-ui);
	text-decoration-color: var(--ark-accent);
}

.ark-sf .ark-btn--dark,
.ark-sf button.ark-btn--dark {
	background-color: var(--ark-ink);
	color: var(--ark-paper);
}

.ark-sf .ark-btn--dark:hover,
.ark-sf button.ark-btn--dark:hover {
	background-color: #000;
	color: var(--ark-paper);
}

.ark-btn__mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	line-height: 1.3;
}

.ark-btn__label {
	display: inline-block;
}

/* ==========================================================================
   Hero — shell
   ========================================================================== */

.ark-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	overflow: hidden;
	background: #0c0605;
	color: var(--ark-ui);
	isolation: isolate;
}

.ark-hero__pin {
	position: absolute;
	inset: 0;
}

/* z1 — background ------------------------------------------------------ */

.ark-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
}

.ark-hero__bg-layer {
	position: absolute;
	inset: -4%;
	background:
		/* soft key light behind the shoe */
		radial-gradient(48% 44% at 50% 36%, color-mix(in oklab, var(--glow) 82%, #fff 18%) 0%, color-mix(in oklab, var(--glow) 55%, transparent) 38%, transparent 72%),
		/* light pooling on the studio floor */
		radial-gradient(58% 20% at 50% calc(100% - var(--ark-floor) + 3%), color-mix(in oklab, var(--glow) 85%, #fff 6%) 0%, transparent 72%),
		/* sweep: wall → horizon → floor → dark foreground */
		linear-gradient(180deg,
			var(--base) 0%,
			color-mix(in oklab, var(--base) 55%, var(--glow)) calc(100% - var(--ark-floor) - 6%),
			color-mix(in oklab, var(--base) 40%, var(--glow)) calc(100% - var(--ark-floor)),
			color-mix(in oklab, var(--base) 70%, var(--glow)) calc(100% - var(--ark-floor) + 8%),
			var(--base) 100%);
	will-change: opacity;
}

.ark-hero__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 78% 72% at 50% 44%, transparent 32%, rgba(0, 0, 0, calc(var(--ark-vignette) * 0.92)) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, transparent 20%, transparent 74%, rgba(0, 0, 0, 0.5) 100%);
	pointer-events: none;
}

.ark-hero__grain {
	position: absolute;
	inset: 0;
	opacity: 0.09;
	mix-blend-mode: overlay;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* z2 — massive words --------------------------------------------------- */

.ark-hero__words {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	pointer-events: none;
}

.ark-sf .ark-hero__word {
	grid-area: 1 / 1;
	display: flex;
	justify-content: center;
	padding: 0.06em 0.04em 0.02em;
	overflow: hidden;
	font-family: var(--ark-f-display);
	font-size: min(calc(90vw / (var(--ark-word-chars) * 0.5)), 54vh);
	font-weight: 800;
	line-height: 0.84;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--ark-word);
	transform: translateY(var(--ark-word-y));
	user-select: none;
}

.ark-char {
	display: inline-block;
	will-change: transform;
}

/* z3 — shoe stage ------------------------------------------------------ */

.ark-hero__stage {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.ark-hero__shoe {
	position: absolute;
	left: var(--ark-shoe-x);
	bottom: var(--ark-floor);
	width: max-content; /* shrink-to-fit would otherwise cap the shoe at the space right of left: */
	translate: -50% 0;
	margin: 0;
}

.ark-hero__fit {
	position: relative;
	display: block;
	line-height: 0;
}

.ark-hero__lift {
	position: relative;
	z-index: 1;
	display: block;
	will-change: transform, opacity;
}

.ark-sf .ark-hero__img,
.ark-hero__lift .ark-placeholder {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--ark-shoe-w);
	max-height: var(--ark-shoe-h);
	margin-bottom: -1.5%;
}

.ark-hero__lift .ark-placeholder {
	width: var(--ark-shoe-w);
	color: rgba(0, 0, 0, 0.55);
}

/* grounded soft cast shadow (stays on the floor while the shoe moves) */
.ark-hero__shadow {
	position: absolute;
	left: 4%;
	right: 2%;
	bottom: -5%;
	height: 16%;
	z-index: 0;
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 45%, transparent 72%);
	filter: blur(6px);
	will-change: transform, opacity;
}

.ark-hero__shadow::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 6%;
	top: 38%;
	height: 26%;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	filter: blur(5px);
}

.ark-sf--float .ark-hero__img {
	animation: ark-float 6s ease-in-out infinite;
}

.ark-sf--float .ark-hero__shadow {
	animation: ark-shadow 6s ease-in-out infinite;
}

@keyframes ark-float {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	50% { translate: 0 -2.2%; rotate: -0.7deg; }
}

@keyframes ark-shadow {
	0%, 100% { scale: 1 1; opacity: 1; }
	50% { scale: 0.93 0.9; opacity: 0.82; }
}

/* z4 — UI -------------------------------------------------------------- */

.ark-hero__ui {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

.ark-hero__ui > * {
	pointer-events: auto;
}

.ark-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: calc(var(--ark-pad) * 0.7) var(--ark-pad);
}

.ark-sf .ark-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ark-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.34em;
	text-transform: uppercase;
}

.ark-nav__brand img {
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.ark-nav__links {
	display: flex;
	gap: clamp(18px, 2.6vw, 40px);
	margin-left: auto;
}

.ark-sf .ark-nav__links a {
	position: relative;
	padding: 6px 0;
	color: var(--ark-ui-muted);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	transition: color 0.3s;
}

.ark-sf .ark-nav__links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--ark-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.45s var(--ark-ease);
}

.ark-sf .ark-nav__links a:hover {
	color: var(--ark-ui);
}

.ark-sf .ark-nav__links a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.ark-nav__end {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ark-sf .ark-nav__cart {
	height: 40px;
	padding: 0 18px;
	border: 1px solid rgba(244, 235, 221, 0.36);
	border-radius: 999px;
	color: var(--ark-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.ark-sf .ark-nav__cart:hover {
	background-color: var(--ark-ui);
	border-color: var(--ark-ui);
	color: #140d0a;
}

.ark-nav__cart.is-bump {
	animation: ark-bump 0.6s var(--ark-ease);
}

@keyframes ark-bump {
	30% { transform: scale(1.12); }
}

.ark-sf .ark-nav__toggle {
	display: none;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(244, 235, 221, 0.36);
	border-radius: 50%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.ark-nav__toggle i {
	display: block;
	width: 16px;
	height: 1.5px;
	background: var(--ark-ui);
	transition: transform 0.3s;
}

.ark-nav__toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3.25px) rotate(45deg); }
.ark-nav__toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3.25px) rotate(-45deg); }

/* meta (top-right) */
.ark-hero__meta {
	position: absolute;
	top: calc(var(--ark-pad) * 0.7 + 78px);
	right: var(--ark-pad);
	display: grid;
	justify-items: end;
	gap: 10px;
	text-align: right;
}

.ark-hero__count {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--ark-f-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ark-ui-muted);
}

.ark-hero__count b {
	font-size: 38px;
	line-height: 1;
	color: var(--ark-ui);
	font-variant-numeric: tabular-nums;
}

.ark-hero__progress {
	position: relative;
	display: block;
	width: 132px;
	height: 1px;
	background: rgba(244, 235, 221, 0.24);
}

.ark-hero__progress i {
	position: absolute;
	inset: 0;
	background: var(--ark-accent);
	transform-origin: left center;
	transform: scaleX(0);
}

.ark-hero__tagline {
	max-width: 22ch;
	font-family: var(--ark-f-serif);
	font-size: 20px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ark-ui);
}

/* copy (bottom-left) */
.ark-hero__copy {
	position: absolute;
	left: var(--ark-pad);
	bottom: var(--ark-pad);
	width: min(340px, calc(100% - var(--ark-pad) * 2));
}

.ark-eyebrow {
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ark-accent);
}

.ark-sf .ark-hero__title {
	font-family: var(--ark-f-serif);
	font-size: clamp(2rem, 3.1vw, 3.1rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--ark-ui);
}

.ark-hero__text {
	margin-top: 14px;
	max-width: 36ch;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ark-ui-muted);
}

.ark-hero__actions {
	width: max-content;
	max-width: calc(100vw - var(--ark-pad) * 2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

/* swatches (bottom-right) */
.ark-hero__swatches {
	position: absolute;
	right: var(--ark-pad);
	bottom: var(--ark-pad);
	display: flex;
	gap: 4px;
}

.ark-sf .ark-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 10px 10px 4px;
	color: var(--ark-ui-muted);
}

.ark-swatch__dot {
	position: relative;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--sw) 70%, #fff 30%), var(--sw) 70%);
	box-shadow: 0 0 0 1px rgba(244, 235, 221, 0.4), 0 4px 10px rgba(0, 0, 0, 0.35);
	transition: transform 0.45s var(--ark-ease), box-shadow 0.45s var(--ark-ease);
}

.ark-swatch__label {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: color 0.3s;
}

.ark-sf .ark-swatch:hover .ark-swatch__label,
.ark-sf .ark-swatch.is-active .ark-swatch__label {
	color: var(--ark-ui);
}

.ark-sf .ark-swatch:hover .ark-swatch__dot {
	transform: scale(1.12);
}

.ark-sf .ark-swatch.is-active .ark-swatch__dot {
	transform: scale(1.18);
	box-shadow: 0 0 0 2px #0c0605, 0 0 0 3.5px var(--sw-accent), 0 6px 14px rgba(0, 0, 0, 0.4);
}

/* scroll hint */
.ark-hero__hint {
	position: absolute;
	left: 50%;
	bottom: calc(var(--ark-pad) * 0.6);
	display: grid;
	justify-items: center;
	gap: 10px;
	translate: -50% 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--ark-ui-muted);
	transition: opacity 0.5s;
}

.ark-hero__hint i {
	position: relative;
	display: block;
	width: 1px;
	height: 38px;
	overflow: hidden;
	background: rgba(244, 235, 221, 0.2);
}

.ark-hero__hint i::after {
	content: "";
	position: absolute;
	left: 0;
	top: -40%;
	width: 1px;
	height: 40%;
	background: var(--ark-ui);
	animation: ark-hint 1.8s var(--ark-ease) infinite;
}

@keyframes ark-hint {
	to { top: 100%; }
}

.ark-sf.is-scrolled .ark-hero__hint {
	opacity: 0;
}

/* ==========================================================================
   Shop
   ========================================================================== */

.ark-shop {
	position: relative;
	z-index: 1;
	padding: clamp(28px, 4vw, 56px) var(--ark-pad) clamp(64px, 8vw, 128px);
	background: var(--ark-paper);
	color: var(--ark-ink);
	scroll-margin-top: 0;
}

.ark-shop__head,
.ark-shop__body {
	max-width: 1480px;
	margin: 0 auto;
}

.ark-crumbs {
	display: flex;
	gap: 8px;
	font-size: 12px;
	color: var(--ark-ink-muted);
}

.ark-sf .ark-crumbs a:hover {
	color: var(--ark-ink);
}

.ark-crumbs [aria-current] {
	color: var(--ark-ink);
	font-weight: 600;
}

.ark-shop__titlebar {
	display: grid;
	grid-template-columns: 272px 1fr;
	align-items: end;
	gap: 40px;
	margin-top: 18px;
}

.ark-sf .ark-shop__title {
	font-family: var(--ark-f-serif);
	font-size: clamp(2.4rem, 3.8vw, 3.6rem);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.01em;
	color: var(--ark-ink);
}

.ark-search {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ark-line);
	color: var(--ark-ink-muted);
	transition: border-color 0.3s;
}

.ark-search:focus-within {
	border-color: var(--ark-ink);
	color: var(--ark-ink);
}

.ark-sf .ark-search input {
	flex: 1;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--ark-f-serif);
	font-size: clamp(1.7rem, 2.8vw, 2.6rem);
	font-weight: 500;
	color: var(--ark-ink);
	outline: none;
}

.ark-sf .ark-search input::placeholder {
	color: rgba(27, 20, 17, 0.26);
}

.ark-shop__body {
	display: grid;
	grid-template-columns: 272px 1fr;
	align-items: start;
	gap: 40px;
	margin-top: 36px;
}

/* filters -------------------------------------------------------------- */

.ark-filters {
	position: sticky;
	top: 96px;
	max-height: calc(100vh - 112px);
	overflow: auto;
	padding: 8px 22px 22px;
	background: color-mix(in oklab, var(--ark-ink) 5%, var(--ark-paper));
	border-radius: 6px;
	scrollbar-width: thin;
}

.ark-filters__head {
	display: none;
}

.ark-filters__head h3 {
	font-family: var(--ark-f-serif);
	font-size: 1.8rem;
	font-weight: 600;
}

.ark-sort {
	display: grid;
	gap: 6px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ark-line);
}

.ark-sort label,
.ark-filter summary {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ark-ink);
}

.ark-sf .ark-sort select {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ark-line);
	border-radius: 4px;
	background: var(--ark-card);
	color: var(--ark-ink);
	font: 500 13px/1 var(--ark-f-sans);
}

.ark-filter {
	border-bottom: 1px solid var(--ark-line);
}

.ark-filter summary {
	position: relative;
	display: block;
	padding: 18px 20px 18px 0;
	list-style: none;
	cursor: pointer;
}

.ark-filter summary::-webkit-details-marker {
	display: none;
}

.ark-filter summary::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.3s;
}

.ark-filter[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.ark-filter__body {
	padding-bottom: 18px;
}

.ark-sf .ark-filter input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.ark-checks {
	display: grid;
	gap: 4px;
}

.ark-check {
	position: relative;
	display: grid;
	grid-template-columns: 18px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	font-size: 14px;
	cursor: pointer;
}

.ark-check__box {
	position: relative;
	width: 18px;
	height: 18px;
	border: 1.5px solid rgba(27, 20, 17, 0.4);
	border-radius: 4px;
	transition: background-color 0.2s, border-color 0.2s;
}

.ark-check__box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--ark-paper);
	border-bottom: 2px solid var(--ark-paper);
	transform: rotate(45deg) scale(0);
	transition: transform 0.25s var(--ark-ease);
}

.ark-check input:checked + .ark-check__box {
	background: var(--ark-ink);
	border-color: var(--ark-ink);
}

.ark-check input:checked + .ark-check__box::after {
	transform: rotate(45deg) scale(1);
}

.ark-check input:focus-visible + .ark-check__box {
	outline: 2px solid var(--ark-gold);
	outline-offset: 2px;
}

.ark-check em {
	font-size: 12px;
	font-style: normal;
	color: var(--ark-ink-muted);
}

.ark-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ark-pill,
.ark-size,
.ark-color {
	position: relative;
	cursor: pointer;
}

.ark-pill span {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid var(--ark-line);
	border-radius: 999px;
	background: var(--ark-card);
	font-size: 13px;
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ark-sizes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.ark-size span {
	display: grid;
	place-items: center;
	height: 40px;
	border: 1px solid var(--ark-line);
	border-radius: 4px;
	background: var(--ark-card);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ark-pill:hover span,
.ark-size:hover span {
	border-color: var(--ark-ink);
}

.ark-pill input:checked + span,
.ark-size input:checked + span {
	background: var(--ark-ink);
	border-color: var(--ark-ink);
	color: var(--ark-paper);
}

.ark-pill input:focus-visible + span,
.ark-size input:focus-visible + span {
	outline: 2px solid var(--ark-gold);
	outline-offset: 2px;
}

.ark-colors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 12px;
}

.ark-color {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.ark-color__dot {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.25s;
}

.ark-color input:checked + .ark-color__dot {
	box-shadow: 0 0 0 2px var(--ark-paper), 0 0 0 3.5px var(--ark-ink);
}

.ark-color input:checked ~ .ark-color__name {
	font-weight: 700;
}

.ark-color input:focus-visible + .ark-color__dot {
	outline: 2px solid var(--ark-gold);
	outline-offset: 4px;
}

/* dual price range */
.ark-range {
	--l: 0%;
	--r: 0%;
	position: relative;
	height: 28px;
}

.ark-range__track {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 2px;
	background: var(--ark-line);
	transform: translateY(-50%);
}

.ark-range__track i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--l);
	right: var(--r);
	background: var(--ark-ink);
}

.ark-sf .ark-range input[type="range"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.ark-range input[type="range"]::-webkit-slider-runnable-track { background: none; border: 0; }
.ark-range input[type="range"]::-moz-range-track { background: none; border: 0; }

.ark-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid var(--ark-ink);
	border-radius: 50%;
	background: var(--ark-paper);
	pointer-events: auto;
	cursor: grab;
}

.ark-range input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid var(--ark-ink);
	border-radius: 50%;
	background: var(--ark-paper);
	pointer-events: auto;
	cursor: grab;
}

.ark-range__values {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.ark-filters__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 18px;
}

.ark-sf .ark-link {
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--ark-ink);
}

.ark-sf .ark-filters__apply,
.ark-filters__scrim {
	display: none;
}

/* toolbar + chips */
.ark-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	min-height: 36px;
	margin-bottom: 18px;
}

.ark-sf .ark-filters-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border: 1px solid var(--ark-ink);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

.ark-results {
	font-size: 13px;
	font-weight: 600;
	color: var(--ark-ink-muted);
}

.ark-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ark-sf .ark-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--ark-ink);
	color: var(--ark-paper);
	font-size: 12px;
	font-weight: 600;
}

.ark-sf .ark-chip:hover {
	background: #000;
	color: var(--ark-paper);
}

.ark-chip span {
	font-size: 15px;
	line-height: 1;
	opacity: 0.7;
}

/* grid + cards --------------------------------------------------------- */

.ark-sf .ark-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	list-style: none;
}

.ark-card {
	position: relative;
	list-style: none;
}

.ark-card[hidden] {
	display: none;
}

.ark-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 22px 22px 20px;
	border-radius: 6px;
	background: var(--ark-card);
	box-shadow: 0 0 0 1px var(--ark-line);
	transition: transform 0.55s var(--ark-ease), box-shadow 0.55s var(--ark-ease);
}

.ark-card.is-armed .ark-card__inner,
.ark-card:has(.ark-card__hit:focus-visible) .ark-card__inner {
	transform: translateY(-8px);
	box-shadow: 0 0 0 1px transparent, 0 34px 50px -30px rgba(52, 28, 12, 0.42), 0 10px 18px -12px rgba(52, 28, 12, 0.14);
}

.ark-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding-right: 4px;
}

.ark-sf .ark-card__name {
	font-family: var(--ark-f-sans);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ark-ink);
}

.ark-sf .ark-card__hit {
	text-align: left;
	font-weight: inherit;
}

/* stretched hit area: whole card opens the detail view */
.ark-card__hit::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 6px;
}

.ark-sf .ark-card__hit:focus-visible {
	outline: none;
}

.ark-sf .ark-card__hit:focus-visible::after {
	outline: 2px solid var(--ark-gold);
	outline-offset: 3px;
}

.ark-card__sub {
	margin-top: 3px;
	font-size: 12.5px;
	color: var(--ark-ink-muted);
}

.ark-card__badge {
	flex: none;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ark-accent-ink);
	transition: opacity 0.3s;
}

.ark-sf .ark-card__dots {
	position: absolute;
	right: 22px;
	top: 64px;
	display: flex;
	gap: 5px;
	list-style: none;
}

.ark-card__dots li {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.ark-card__media {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	margin: 22px -4px 16px;
}

.ark-card__media img,
.ark-card__media .ark-placeholder {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 16px 12px rgba(48, 26, 10, 0.2));
	transform-origin: 50% 70%;
	transition: transform 0.8s var(--ark-ease);
}

.ark-card__media .ark-placeholder {
	color: rgba(27, 20, 17, 0.18);
	filter: none;
}

.ark-card.is-armed .ark-card__media img,
.ark-card:has(.ark-card__hit:focus-visible) .ark-card__media img {
	transform: scale(1.13) rotate(-4deg) translateY(-3%);
}

.ark-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	margin-top: auto;
}

.ark-card__designer {
	display: grid;
	gap: 3px;
	font-size: 12.5px;
	font-weight: 600;
}

.ark-label {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ark-ink-muted);
}

.ark-card__price {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.ark-card__plus {
	position: absolute;
	right: 16px;
	top: 16px;
	z-index: 2;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ark-ink);
	opacity: 0;
	transform: scale(0.5) rotate(-90deg);
	transition: opacity 0.35s, transform 0.5s var(--ark-ease);
}

.ark-card__plus::before,
.ark-card__plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 1.5px;
	background: var(--ark-paper);
	transform: translate(-50%, -50%);
}

.ark-card__plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ark-card.is-armed .ark-card__plus,
.ark-card:has(.ark-card__hit:focus-visible) .ark-card__plus {
	opacity: 1;
	transform: scale(1) rotate(0);
}

.ark-card.is-armed .ark-card__badge,
.ark-card:has(.ark-card__hit:focus-visible) .ark-card__badge {
	opacity: 0;
}

.ark-empty {
	padding: 80px 20px;
	text-align: center;
}

.ark-empty p {
	margin-bottom: 20px;
	font-family: var(--ark-f-serif);
	font-size: 1.8rem;
}

/* ==========================================================================
   Product detail — 50/50 split
   ========================================================================== */

.ark-detail {
	--ip: clamp(24px, 4.6vw, 84px);
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--ark-paper);
	color: var(--ark-ink);
	font-family: var(--ark-f-sans);
}

.ark-detail[hidden],
.ark-bag[hidden] {
	display: none !important;
}

.ark-detail__media {
	position: relative;
	z-index: 2;
	min-height: 0;
	background: #120c09;
}

.ark-detail__life {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.ark-detail__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 30%;
	background: linear-gradient(transparent, rgba(8, 5, 3, 0.62));
	pointer-events: none;
}

.ark-detail__rings {
	position: absolute;
	right: -64px;
	top: 16%;
	z-index: 3;
	width: 128px;
	height: 128px;
	fill: none;
	stroke: var(--ark-gold);
	stroke-width: 1.3;
	overflow: visible;
	pointer-events: none;
}

.ark-detail__rings circle {
	stroke-dasharray: 620;
	stroke-dashoffset: 0;
}

.ark-sf .ark-detail__back {
	position: absolute;
	left: var(--ark-pad);
	top: var(--ark-pad);
	z-index: 4;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background-color: rgba(14, 9, 7, 0.72);
	color: var(--ark-paper);
	backdrop-filter: blur(6px);
	transition: background-color 0.3s, color 0.3s;
}

.ark-sf .ark-detail__back:hover {
	background-color: var(--ark-gold);
	color: var(--ark-ink);
}

.ark-detail__pager {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 22px;
	padding-left: var(--ark-pad);
	color: var(--ark-paper);
}

.ark-detail__index {
	display: inline-flex;
	white-space: nowrap;
	align-items: baseline;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(243, 238, 230, 0.7);
	font-variant-numeric: tabular-nums;
}

.ark-detail__index b {
	font-size: 22px;
	font-weight: 800;
	color: var(--ark-paper);
}

.ark-detail__bar {
	position: relative;
	flex: 0 1 140px;
	height: 2px;
	background: rgba(243, 238, 230, 0.24);
}

.ark-detail__bar i {
	position: absolute;
	inset: 0;
	background: var(--ark-gold);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.6s var(--ark-ease);
}

.ark-detail__nav {
	display: flex;
	margin-left: auto;
}

.ark-sf .ark-detail__nav button {
	min-width: 92px;
	height: 68px;
	padding: 0 18px;
	background-color: #0f0a08;
	color: var(--ark-paper);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background-color 0.3s, color 0.3s;
}

.ark-sf .ark-detail__nav button + button {
	background-color: rgba(15, 10, 8, 0.8);
}

.ark-sf .ark-detail__nav button:hover {
	background-color: var(--ark-gold);
	color: var(--ark-ink);
}

.ark-detail__info {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(28px, 5vh, 64px) var(--ip) 0;
}

.ark-sf .ark-detail__close {
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ark-line);
	border-radius: 50%;
	font-size: 22px;
	line-height: 1;
	transition: background-color 0.3s, color 0.3s, transform 0.4s var(--ark-ease);
}

.ark-sf .ark-detail__close:hover {
	background-color: var(--ark-ink);
	color: var(--ark-paper);
	transform: rotate(90deg);
}

.ark-detail__content {
	flex: 1;
	padding-bottom: 12px;
}

.ark-detail__eyebrow {
	display: flex;
	gap: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ark-ink-muted);
}

.ark-detail__badge {
	color: var(--ark-accent-ink);
}

.ark-sf .ark-detail__title {
	margin-top: 12px;
	padding-right: 48px;
	font-family: var(--ark-f-serif);
	font-size: clamp(2.6rem, 4.4vw, 4.6rem);
	font-weight: 600;
	line-height: 0.94;
	letter-spacing: -0.015em;
	color: var(--ark-ink);
}

.ark-detail__subtitle {
	margin-top: 8px;
	font-size: clamp(1rem, 1.35vw, 1.3rem);
	font-weight: 700;
	color: var(--ark-accent-ink);
}

.ark-detail__product {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px;
	margin: clamp(8px, 2.4vh, 28px) 0;
}

.ark-detail__product img {
	width: 100%;
	max-height: min(30vh, 320px);
	object-fit: contain;
	filter: drop-shadow(0 22px 16px rgba(48, 26, 10, 0.22));
}

.ark-detail__colors {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-self: start;
	padding-top: 8px;
}

.ark-sf .ark-detail__colors button {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
	transition: box-shadow 0.25s, transform 0.25s;
}

.ark-sf .ark-detail__colors button:hover {
	transform: scale(1.12);
}

.ark-sf .ark-detail__colors button[aria-checked="true"] {
	box-shadow: 0 0 0 2px var(--ark-paper), 0 0 0 3.5px var(--ark-ink);
}

.ark-detail__meta {
	display: grid;
	grid-template-columns: 1.2fr 1fr auto;
	align-items: end;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--ark-line);
	border-bottom: 1px solid var(--ark-line);
}

.ark-detail__meta dt {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ark-ink-muted);
}

.ark-detail__meta dd {
	margin-top: 5px;
	font-size: 14px;
	font-weight: 600;
}

.ark-detail__price-wrap {
	text-align: right;
}

.ark-sf .ark-detail__price {
	font-size: clamp(1.6rem, 2.2vw, 2.1rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.ark-detail__sizes {
	margin-top: 22px;
}

.ark-detail__sizes-head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ark-detail__size-msg {
	letter-spacing: 0.02em;
	text-transform: none;
	font-weight: 600;
	color: var(--ark-danger);
}

.ark-detail__size-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
	gap: 8px;
}

.ark-sf .ark-detail__size-grid button {
	height: 46px;
	border: 1px solid var(--ark-line);
	border-radius: 4px;
	background-color: var(--ark-card);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ark-sf .ark-detail__size-grid button:hover {
	border-color: var(--ark-ink);
	background-color: var(--ark-card);
}

.ark-sf .ark-detail__size-grid button[aria-checked="true"] {
	background-color: var(--ark-ink);
	border-color: var(--ark-ink);
	color: var(--ark-paper);
}

.ark-detail__size-grid.is-error {
	animation: ark-shake 0.45s;
}

@keyframes ark-shake {
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}

.ark-detail__desc {
	margin-top: 20px;
	max-width: 54ch;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ark-ink-muted);
}

.ark-sf .ark-detail__add {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex: none;
	height: 78px;
	margin: 18px calc(var(--ip) * -1) 0;
	background-color: var(--ark-ink);
	color: var(--ark-paper);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background-color 0.35s;
}

.ark-sf .ark-detail__add:hover {
	background-color: #000;
	color: var(--ark-paper);
}

.ark-detail__add-plus {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ark-gold);
	color: var(--ark-ink);
	font-size: 18px;
	letter-spacing: 0;
	transition: transform 0.5s var(--ark-ease);
}

.ark-sf .ark-detail__add:hover .ark-detail__add-plus {
	transform: rotate(90deg);
}

.ark-sf .ark-detail__add.is-added {
	background-color: var(--ark-accent-ink);
}

/* ==========================================================================
   Bag drawer + toast
   ========================================================================== */

.ark-bag {
	position: fixed;
	inset: 0;
	z-index: 100001;
	color: var(--ark-ink);
	font-family: var(--ark-f-sans);
}

.ark-bag__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 6, 4, 0.5);
}

.ark-bag__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(430px, 100%);
	background: var(--ark-paper);
	box-shadow: -30px 0 60px -30px rgba(0, 0, 0, 0.4);
}

.ark-bag__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	border-bottom: 1px solid var(--ark-line);
}

.ark-bag__head h2 {
	font-family: var(--ark-f-serif);
	font-size: 1.9rem;
	font-weight: 600;
}

.ark-sf .ark-bag__close {
	width: 40px;
	height: 40px;
	border: 1px solid var(--ark-line);
	border-radius: 50%;
	font-size: 20px;
}

.ark-sf .ark-bag__items {
	flex: 1;
	overflow-y: auto;
	padding: 4px 24px;
	list-style: none;
}

.ark-bag__item {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ark-line);
}

.ark-bag__item img {
	width: 84px;
	height: 64px;
	padding: 6px;
	border-radius: 4px;
	background: var(--ark-card);
	object-fit: contain;
}

.ark-bag__item h3 {
	font-size: 14px;
	font-weight: 700;
}

.ark-bag__item p {
	margin-top: 3px;
	font-size: 12px;
	color: var(--ark-ink-muted);
}

.ark-bag__item strong {
	display: block;
	text-align: right;
	font-size: 14px;
}

.ark-sf .ark-bag__remove {
	margin-top: 6px;
	font-size: 11px;
	text-decoration: underline;
	color: var(--ark-ink-muted);
}

.ark-bag__empty {
	padding: 40px 24px;
	font-family: var(--ark-f-serif);
	font-size: 1.4rem;
	color: var(--ark-ink-muted);
}

.ark-bag__empty[hidden] {
	display: none;
}

.ark-bag__foot {
	padding: 22px 24px 24px;
	border-top: 1px solid var(--ark-line);
}

.ark-bag__total {
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 600;
}

.ark-bag__total strong {
	font-size: 18px;
	font-weight: 800;
}

.ark-sf .ark-bag__checkout {
	width: 100%;
	height: 56px;
	margin-top: 16px;
	border-radius: 0;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ark-toast {
	position: fixed;
	left: 50%;
	bottom: 104px; /* clears the detail pager and add-to-bag bar */
	z-index: 100002;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 20px 8px 8px;
	border-radius: 999px;
	background: var(--ark-ink);
	color: var(--ark-paper);
	font: 600 13px/1.2 var(--ark-f-sans);
	box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 24px);
	transition: opacity 0.4s, transform 0.5s var(--ark-ease), visibility 0.4s;
	pointer-events: none;
}

.ark-toast:empty {
	padding: 0;
}

.ark-toast img {
	width: 44px;
	height: 32px;
	padding: 3px;
	border-radius: 999px;
	background: var(--ark-paper);
	object-fit: contain;
}

.ark-toast.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) and (min-width: 768px) and (orientation: landscape) {
	.ark-sf {
		--ark-shoe-w: 44vw;
		--ark-shoe-x: 61%;
	}

	.ark-hero__copy {
		width: 300px;
	}
}

@media (max-width: 1100px) and (min-width: 768px) and (orientation: portrait) {
	.ark-sf {
		--ark-shoe-w: 78vw;
		--ark-shoe-h: 30vh;
		--ark-shoe-x: 50%;
		--ark-floor: 40vh;
		--ark-word-y: -9vh;
	}

	.ark-hero__copy {
		bottom: calc(var(--ark-pad) + 76px);
		width: min(420px, calc(100% - var(--ark-pad) * 2));
	}

	.ark-hero__swatches {
		left: var(--ark-pad);
		justify-content: space-between;
	}

	.ark-hero__hint {
		display: none;
	}
}

@media (max-width: 1100px) {
	.ark-shop__titlebar,
	.ark-shop__body {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.ark-filters {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 99990;
		width: min(360px, 88vw);
		max-height: none;
		padding: 0 22px 22px;
		border-radius: 0;
		background: var(--ark-paper);
		transform: translateX(-102%);
		transition: transform 0.5s var(--ark-ease);
		visibility: hidden;
	}

	.ark-filters.is-open {
		transform: none;
		visibility: visible;
	}

	.ark-filters__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18px 0 10px;
		background: var(--ark-paper);
	}

	.ark-sf .ark-filters__close {
		width: 40px;
		height: 40px;
		border: 1px solid var(--ark-line);
		border-radius: 50%;
		font-size: 20px;
	}

	.ark-filters__foot {
		position: sticky;
		bottom: -22px;
		margin: 0 -22px -22px;
		padding: 16px 22px;
		background: var(--ark-paper);
		border-top: 1px solid var(--ark-line);
	}

	.ark-sf .ark-filters__apply {
		display: inline-flex;
		border-radius: 999px;
	}

	.ark-filters__scrim {
		position: fixed;
		inset: 0;
		z-index: 99989;
		display: block;
		background: rgba(10, 6, 4, 0.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s, visibility 0.4s;
	}

	.ark-filters.is-open ~ .ark-filters__scrim,
	.ark-shop__body.has-filters-open .ark-filters__scrim {
		opacity: 1;
		visibility: visible;
	}

	.ark-sf .ark-filters-toggle {
		display: inline-flex;
	}
}

@media (max-width: 900px) {
	.ark-detail {
		grid-template-columns: 1fr;
		grid-template-rows: 44vh auto;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ark-detail__info {
		overflow: visible;
	}

	.ark-detail__rings {
		right: 16px;
		top: auto;
		bottom: 84px;
		width: 72px;
		height: 72px;
	}

	.ark-sf .ark-detail__nav button {
		height: 56px;
		min-width: 76px;
	}

	.ark-detail__bar {
		display: none;
	}
}

@media (max-width: 767px) {
	.ark-sf {
		--ark-shoe-w: 92vw;
		--ark-shoe-h: 30vh;
		--ark-floor: 41vh;
		--ark-shoe-x: 50%;
		--ark-word-y: -9vh;
	}

	.ark-nav__links {
		position: absolute;
		top: calc(100% - 6px);
		right: var(--ark-pad);
		flex-direction: column;
		gap: 0;
		min-width: 200px;
		padding: 10px 20px;
		border-radius: 14px;
		background: rgba(12, 7, 6, 0.9);
		backdrop-filter: blur(12px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
	}

	.ark-nav__links.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.ark-sf .ark-nav__links a {
		padding: 12px 0;
		font-size: 15px;
	}

	.ark-sf .ark-nav__toggle {
		display: inline-flex;
	}

	.ark-sf .ark-nav__brand span {
		letter-spacing: 0.24em;
	}

	.ark-hero__meta,
	.ark-hero__hint {
		display: none;
	}

	.ark-hero__copy {
		bottom: calc(var(--ark-pad) + 64px);
	}

	.ark-sf .ark-hero__title {
		font-size: 1.9rem;
	}

	.ark-hero__text {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 13px;
	}

	.ark-hero__actions {
		margin-top: 18px;
	}

	.ark-sf .ark-btn {
		height: 42px;
		padding: 0 16px;
	}

	.ark-hero__swatches {
		left: var(--ark-pad);
		justify-content: space-between;
	}

	.ark-sf .ark-swatch {
		padding: 8px 4px 2px;
	}

	.ark-swatch__label {
		font-size: 9.5px;
		letter-spacing: 0.1em;
	}

	.ark-sf .ark-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.ark-card__inner {
		padding: 14px 14px 14px;
	}

	.ark-sf .ark-card__name {
		font-size: 14px;
	}

	.ark-card__badge,
	.ark-card__designer .ark-label {
		display: none;
	}

	.ark-sf .ark-card__dots {
		right: 14px;
		top: auto;
		bottom: 56px;
	}

	.ark-card__media {
		margin: 12px -4px 10px;
	}

	.ark-card__price {
		font-size: 16px;
	}

	.ark-card__designer {
		font-size: 11px;
	}

	.ark-detail__meta {
		grid-template-columns: 1fr 1fr;
	}

	.ark-detail__price-wrap {
		grid-column: 1 / -1;
		text-align: left;
	}

	.ark-sf .ark-detail__add {
		height: 64px;
	}
}

@media (max-height: 700px) and (min-width: 768px) {
	.ark-hero__text {
		display: none;
	}

	.ark-hero__meta {
		top: calc(var(--ark-pad) * 0.7 + 60px);
	}
}

@media (max-height: 620px) and (max-width: 767px) {
	.ark-hero__text,
	.ark-eyebrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ark-sf--float .ark-hero__img,
	.ark-sf--float .ark-hero__shadow,
	.ark-hero__hint i::after {
		animation: none;
	}

	.ark-card__inner,
	.ark-card__media img {
		transition: none;
	}
}

/* ==========================================================================
   Shop page — light sticky navigation (Arkishuz Shop widget)
   ========================================================================== */

.ark-page {
	min-height: 100vh;
	background: var(--ark-paper);
}

.ark-sf .ark-nav--light {
	position: sticky;
	top: 0;
	z-index: 60;
	padding: 16px var(--ark-pad);
	background: color-mix(in oklab, var(--ark-paper) 86%, transparent);
	border-bottom: 1px solid var(--ark-line);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.ark-sf .ark-nav--light .ark-nav__brand {
	color: var(--ark-ink);
}

.ark-sf .ark-nav--light .ark-nav__links a {
	color: var(--ark-ink-muted);
}

.ark-sf .ark-nav--light .ark-nav__links a:hover,
.ark-sf .ark-nav--light .ark-nav__links a[aria-current="page"] {
	color: var(--ark-ink);
}

.ark-sf .ark-nav__links a[aria-current="page"]::after {
	transform: scaleX(1);
}

.ark-sf .ark-nav--light .ark-nav__links a::after {
	background: var(--ark-ink);
}

.ark-sf .ark-nav--light .ark-nav__cart {
	border-color: var(--ark-ink);
	background-color: var(--ark-ink);
	color: var(--ark-paper);
}

.ark-sf .ark-nav--light .ark-nav__cart:hover {
	border-color: #000;
	background-color: #000;
	color: var(--ark-paper);
}

.ark-sf .ark-nav--light .ark-nav__toggle {
	border-color: var(--ark-line);
}

.ark-nav--light .ark-nav__toggle i {
	background: var(--ark-ink);
}

@media (max-width: 1100px) {
	.ark-filters {
		top: 0;
		max-height: none;
	}
}

@media (max-width: 767px) {
	.ark-sf .ark-nav--light {
		padding: 12px var(--ark-pad);
	}

	.ark-nav--light .ark-nav__links {
		top: calc(100% + 6px);
		background: var(--ark-paper);
		box-shadow: 0 24px 40px -20px rgba(27, 20, 17, 0.35), 0 0 0 1px var(--ark-line);
	}
}

/* ==========================================================================
   Craft page (Arkishuz Craft widget)
   Base styles are the static, stacked layout (mobile / reduced motion / editor);
   .ark-process--pinned switches the process to the pinned desktop split.
   ========================================================================== */

.ark-sf {
	--ark-espresso: #100a08;
}

.ark-craft {
	background: var(--ark-espresso);
	color: var(--ark-ui);
	overflow-x: clip;
}

.ark-sf .ark-craft-title {
	max-width: 18ch;
	font-family: var(--ark-f-serif);
	font-size: clamp(2.4rem, 4.4vw, 4.4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
	color: inherit;
}

.ark-craft-head {
	display: grid;
	gap: 6px;
	max-width: 1480px;
	margin: 0 auto clamp(40px, 5vw, 72px);
}

/* intro ------------------------------------------------------------------ */

.ark-craft-intro {
	position: relative;
	display: grid;
	align-items: end;
	height: 100vh;
	height: 100svh;
	min-height: 620px;
	padding: 0 var(--ark-pad);
	overflow: hidden;
	isolation: isolate;
}

.ark-craft-intro__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.ark-sf .ark-craft-intro__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 60% 40%;
	transform-origin: 60% 40%;
	will-change: transform;
}

.ark-craft-intro__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(12, 7, 5, 0.9) 0%, rgba(12, 7, 5, 0.5) 45%, rgba(12, 7, 5, 0) 75%),
		linear-gradient(0deg, rgba(12, 7, 5, 0.92) 0%, rgba(12, 7, 5, 0) 50%),
		linear-gradient(180deg, rgba(12, 7, 5, 0.55) 0%, rgba(12, 7, 5, 0) 22%);
}

.ark-craft-intro .ark-nav {
	z-index: 3;
}

.ark-craft-intro__copy {
	position: relative;
	z-index: 2;
	max-width: 820px;
	padding-bottom: clamp(56px, 11vh, 120px);
}

.ark-sf .ark-craft-intro__title {
	font-family: var(--ark-f-display);
	font-size: clamp(3.8rem, 10.5vw, 11rem);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--ark-word);
}

.ark-line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.03em;
}

.ark-line__inner {
	display: block;
	will-change: transform;
}

.ark-craft-intro__text {
	max-width: 46ch;
	margin-top: 26px;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.7;
	color: var(--ark-ui-muted);
}

.ark-craft-intro__hint {
	left: auto;
	right: var(--ark-pad);
	bottom: clamp(56px, 11vh, 120px);
	translate: none;
}

/* manifesto --------------------------------------------------------------- */

.ark-manifesto {
	padding: clamp(96px, 15vw, 220px) var(--ark-pad);
}

.ark-sf .ark-manifesto__text {
	max-width: 1180px;
	margin: 0 auto;
	font-family: var(--ark-f-serif);
	font-size: clamp(2rem, 4.3vw, 4.3rem);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--ark-ui);
}

/* process: static (base) ------------------------------------------------ */

.ark-process__pin {
	padding: clamp(80px, 10vw, 140px) var(--ark-pad);
}

.ark-process__head {
	display: grid;
	gap: 6px;
	margin-bottom: 48px;
}

.ark-process__media,
.ark-process__rail {
	display: none;
}

.ark-sf .ark-process__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 56px 32px;
	list-style: none;
}

.ark-step {
	position: relative;
	list-style: none;
}

.ark-sf .ark-step__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	margin-bottom: 22px;
	object-fit: cover;
	border-radius: 3px;
}

.ark-step__num {
	display: block;
	font-family: var(--ark-f-display);
	font-size: clamp(3.2rem, 6vw, 6.4rem);
	font-weight: 800;
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in oklab, var(--ark-gold) 85%, transparent);
}

.ark-sf .ark-step__title {
	margin: 10px 0 14px;
	font-family: var(--ark-f-serif);
	font-size: clamp(1.9rem, 3vw, 3.1rem);
	font-weight: 600;
	line-height: 1.02;
	color: var(--ark-ui);
}

.ark-step__text {
	max-width: 44ch;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ark-ui-muted);
}

.ark-step__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 22px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ark-gold);
}

.ark-step__meta::before {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
}

/* process: pinned desktop split ---------------------------------------- */

.ark-process--pinned .ark-process__pin {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	grid-template-rows: auto 1fr auto;
	column-gap: clamp(40px, 5vw, 96px);
	height: 100vh;
	min-height: 640px;
	padding: clamp(88px, 12vh, 128px) var(--ark-pad) clamp(36px, 6vh, 64px);
	overflow: hidden;
}

.ark-process--pinned .ark-process__head {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.ark-sf .ark-process--pinned .ark-process__steps {
	position: relative;
	display: block;
	grid-column: 1;
	grid-row: 2;
	align-self: stretch;
}

.ark-process--pinned .ark-step {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	translate: 0 -50%;
}

.ark-sf .ark-process--pinned .ark-step__img {
	display: none;
}

.ark-process--pinned .ark-process__rail {
	display: flex;
	grid-column: 1;
	grid-row: 3;
	align-items: center;
	gap: 18px;
	font-family: var(--ark-f-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ark-ui-muted);
}

.ark-process__count b {
	font-size: 30px;
	color: var(--ark-ui);
	font-variant-numeric: tabular-nums;
}

.ark-process__bar {
	position: relative;
	width: 180px;
	height: 1px;
	background: rgba(244, 235, 221, 0.2);
}

.ark-process__bar i {
	position: absolute;
	inset: 0;
	background: var(--ark-gold);
	transform-origin: left center;
	transform: scaleX(0);
}

.ark-process--pinned .ark-process__media {
	position: relative;
	display: block;
	grid-column: 2;
	grid-row: 1 / span 3;
	overflow: hidden;
	border-radius: 3px;
	background: #1a120e;
}

.ark-process__img {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
}

.ark-sf .ark-process__img img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	will-change: transform;
}

/* materials ------------------------------------------------------------- */

.ark-materials {
	padding: clamp(96px, 12vw, 170px) var(--ark-pad);
	background: var(--ark-paper);
	color: var(--ark-ink);
}

.ark-materials .ark-eyebrow,
.ark-care .ark-eyebrow {
	color: var(--ark-accent-ink);
}

.ark-sf .ark-materials__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	max-width: 1480px;
	margin: 0 auto;
	list-style: none;
}

.ark-material {
	list-style: none;
}

.ark-material__swatch {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 3px;
	background: #2a1d16;
}

.ark-sf .ark-material__swatch img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.4s var(--ark-ease);
}

.ark-material:hover .ark-material__swatch img {
	transform: scale(1.12);
}

.ark-material__num {
	position: absolute;
	top: 16px;
	left: 18px;
	font-family: var(--ark-f-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(255, 246, 236, 0.92);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.ark-sf .ark-material__name {
	margin: 20px 0 8px;
	font-family: var(--ark-f-serif);
	font-size: clamp(1.5rem, 2vw, 1.9rem);
	font-weight: 600;
	color: var(--ark-ink);
}

.ark-material__text {
	max-width: 34ch;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ark-ink-muted);
}

/* numbers --------------------------------------------------------------- */

.ark-numbers {
	padding: clamp(72px, 9vw, 128px) var(--ark-pad);
}

.ark-numbers__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 0;
	max-width: 1480px;
	margin: 0 auto;
}

.ark-number {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 12px;
	padding: 6px 0 6px clamp(18px, 2.4vw, 32px);
	border-left: 1px solid rgba(244, 235, 221, 0.16);
}

.ark-sf .ark-number__value {
	font-family: var(--ark-f-display);
	font-size: clamp(3.4rem, 6.2vw, 6.6rem);
	font-weight: 800;
	line-height: 0.9;
	color: var(--ark-ui);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ark-number__label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ark-ui-muted);
}

/* workshop quote -------------------------------------------------------- */

.ark-workshop {
	position: relative;
	display: grid;
	align-items: end;
	justify-items: end;
	min-height: clamp(600px, 108vh, 1020px);
	padding: var(--ark-pad);
	overflow: hidden;
	isolation: isolate;
}

.ark-workshop__media {
	position: absolute;
	inset: -10% 0;
	z-index: -2;
}

.ark-sf .ark-workshop__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ark-workshop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(0deg, rgba(12, 7, 5, 0.7) 0%, rgba(12, 7, 5, 0) 55%),
		linear-gradient(180deg, var(--ark-espresso) 0%, rgba(12, 7, 5, 0) 18%);
}

.ark-workshop__quote {
	max-width: 640px;
	margin: 0 0 clamp(20px, 5vh, 64px);
	padding: clamp(28px, 3.6vw, 52px);
	border-left: 2px solid var(--ark-gold);
	background: rgba(16, 10, 8, 0.74);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.ark-workshop__mark {
	display: block;
	width: 38px;
	height: 28px;
	margin-bottom: 18px;
	fill: var(--ark-gold);
}

.ark-sf .ark-workshop__quote blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.ark-sf .ark-workshop__quote blockquote p {
	font-family: var(--ark-f-serif);
	font-size: clamp(1.5rem, 2.4vw, 2.3rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.28;
	color: var(--ark-ui);
}

.ark-workshop__quote figcaption {
	display: grid;
	gap: 4px;
	margin-top: 24px;
}

.ark-workshop__quote strong {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ark-ui);
}

.ark-workshop__quote figcaption span {
	font-size: 13px;
	color: var(--ark-ui-muted);
}

/* care ------------------------------------------------------------------ */

.ark-care {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(40px, 6vw, 120px);
	padding: clamp(96px, 12vw, 170px) max(var(--ark-pad), calc((100% - 1480px) / 2));
	background: var(--ark-paper);
	color: var(--ark-ink);
}

.ark-care__intro {
	position: sticky;
	top: 48px;
	display: grid;
	gap: 6px;
}

.ark-care__text {
	max-width: 44ch;
	margin-top: 18px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--ark-ink-muted);
}

.ark-sf .ark-care__list {
	border-bottom: 1px solid var(--ark-line);
	list-style: none;
}

.ark-care__item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 12px;
	padding: 30px 0;
	border-top: 1px solid var(--ark-line);
	list-style: none;
}

.ark-care__num {
	font-family: var(--ark-f-display);
	font-size: 24px;
	font-weight: 800;
	color: var(--ark-accent-ink);
}

.ark-sf .ark-care__item h3 {
	font-family: var(--ark-f-serif);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 600;
	line-height: 1.1;
	color: var(--ark-ink);
}

.ark-care__item p {
	max-width: 52ch;
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ark-ink-muted);
}

/* closing CTA ----------------------------------------------------------- */

.ark-craft-cta {
	display: grid;
	justify-items: center;
	padding: clamp(120px, 16vw, 230px) var(--ark-pad);
	overflow: hidden;
	text-align: center;
	background: radial-gradient(60% 70% at 50% 42%, #6d1a20 0%, #2a0709 55%, #120405 100%);
}

.ark-sf .ark-craft-cta__title {
	margin: 16px 0 44px;
	font-family: var(--ark-f-display);
	font-size: clamp(4rem, 13vw, 13.5rem);
	font-weight: 800;
	line-height: 0.84;
	text-transform: uppercase;
	color: var(--ark-word);
}

.ark-craft-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* craft responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
	.ark-sf .ark-materials__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 44px;
	}

	.ark-numbers__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ark-care {
		grid-template-columns: 1fr;
	}

	.ark-care__intro {
		position: static;
	}
}

@media (max-width: 767px) {
	.ark-craft-intro__hint {
		display: none;
	}

	.ark-craft-intro__shade {
		background:
			linear-gradient(0deg, rgba(12, 7, 5, 0.95) 0%, rgba(12, 7, 5, 0.55) 55%, rgba(12, 7, 5, 0.2) 100%),
			linear-gradient(180deg, rgba(12, 7, 5, 0.6) 0%, rgba(12, 7, 5, 0) 25%);
	}

	.ark-sf .ark-materials__grid {
		gap: 36px 14px;
	}

	.ark-material__text {
		font-size: 13px;
	}

	.ark-care__item {
		grid-template-columns: 48px 1fr;
	}

	.ark-workshop {
		justify-items: stretch;
		min-height: 640px;
	}
}

/* ==========================================================================
   Card interaction: hover only on real pointers; touch uses tap-to-arm
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	.ark-card:hover .ark-card__inner {
		transform: translateY(-8px);
		box-shadow: 0 0 0 1px transparent, 0 34px 50px -30px rgba(52, 28, 12, 0.42), 0 10px 18px -12px rgba(52, 28, 12, 0.14);
	}

	.ark-card:hover .ark-card__media img {
		transform: scale(1.13) rotate(-4deg) translateY(-3%);
	}

	.ark-card:hover .ark-card__plus {
		opacity: 1;
		transform: scale(1) rotate(0);
	}

	.ark-card:hover .ark-card__badge {
		opacity: 0;
	}
}

.ark-card.is-armed .ark-card__inner {
	transform: translateY(-8px);
	box-shadow: 0 0 0 1.5px var(--ark-ink), 0 34px 50px -30px rgba(52, 28, 12, 0.42);
}

.ark-card.is-armed .ark-card__plus {
	opacity: 0;
}

/* touch: the armed card shows a hint that the next tap opens the product */
.ark-card.is-armed .ark-card__inner::after {
	content: attr(data-tap-hint) "  →";
	position: absolute;
	left: 50%;
	top: 44%;
	z-index: 2;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--ark-ink);
	color: var(--ark-paper);
	font: 700 11px/1 var(--ark-f-sans);
	letter-spacing: 0.06em;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	pointer-events: none;
	animation: ark-hint-in 0.35s var(--ark-ease) both;
}

@keyframes ark-hint-in {
	from { opacity: 0; transform: translate(-50%, -30%); }
}

.ark-card.is-leaving .ark-card__inner {
	transform: translateY(-4px) scale(0.97);
	opacity: 0.75;
	transition-duration: 0.3s;
}

.ark-card__hit {
	-webkit-tap-highlight-color: transparent;
}

.ark-toast.is-error {
	background: var(--ark-danger);
}

.ark-toast.is-error:empty,
.ark-toast.is-error span:only-child {
	padding-left: 12px;
}

/* ==========================================================================
   Detail dialog gallery (manual products)
   ========================================================================== */

.ark-detail__gallery {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
}

.ark-detail__gallery::-webkit-scrollbar {
	display: none;
}

.ark-detail__slide {
	position: relative;
	height: 100%;
	margin: 0;
	overflow: hidden;
	scroll-snap-align: start;
}

.ark-sf .ark-detail__slide img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ark-detail__slide--studio,
.ark-product__slide--studio {
	display: grid;
	place-items: center;
	background: radial-gradient(70% 60% at 50% 45%, #fbf8f3 0%, #efe7db 60%, #e2d7c8 100%);
}

.ark-sf .ark-detail__slide--studio img,
.ark-sf .ark-product__slide--studio img {
	width: 82%;
	height: auto;
	max-height: 80%;
	object-fit: contain;
	filter: drop-shadow(0 30px 24px rgba(48, 26, 10, 0.25));
}

.ark-detail__dots {
	position: absolute;
	left: var(--ark-pad);
	top: 50%;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 8px;
	transform: translateY(-50%);
	pointer-events: none;
}

.ark-detail__dots i,
.ark-product__dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
	transition: height 0.4s var(--ark-ease), width 0.4s var(--ark-ease), background-color 0.3s;
}

.ark-detail__dots i.is-active {
	height: 24px;
	background: var(--ark-gold);
}

/* ==========================================================================
   Product page (WooCommerce single product)
   Same split design as the detail dialog; the left gallery scrolls with the
   page while the right details panel stays fixed.
   ========================================================================== */

body.ark-product-body {
	margin: 0;
	background: var(--ark-paper, #f3eee6);
}

.ark-sf--product {
	--ark-nav-h: 73px;
	--ark-top: var(--wp-admin--admin-bar--height, 0px);
	--ark-bottom: 0px; /* set by JS when a fixed bottom banner (e.g. WooCommerce "Coming soon" notice) is present */
	--ip: clamp(24px, 4.6vw, 84px);
	--ark-view: calc(100vh - var(--ark-nav-h) - var(--ark-top) - var(--ark-bottom));
	background: var(--ark-paper);
	color: var(--ark-ink);
}

@supports (height: 100svh) {
	.ark-sf--product {
		--ark-view: calc(100svh - var(--ark-nav-h) - var(--ark-top) - var(--ark-bottom));
	}
}

.ark-sf .ark-page--product .ark-nav--light {
	top: var(--ark-top);
	height: var(--ark-nav-h);
}

.ark-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

/* left: gallery ---------------------------------------------------------- */

.ark-product__gallery {
	position: relative;
	min-width: 0;
	background: #120c09;
}

.ark-product__track {
	display: block;
	outline: none;
}

.ark-product__slide {
	position: relative;
	height: var(--ark-view);
	min-height: 520px;
	margin: 0;
	overflow: hidden;
}

.ark-sf .ark-product__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* overlay pinned over the left half: back button, dots, rings, pager */
.ark-product__overlay {
	position: fixed;
	left: 0;
	top: calc(var(--ark-nav-h) + var(--ark-top));
	bottom: var(--ark-bottom);
	z-index: 5;
	width: 50%;
	pointer-events: none;
}

.ark-product__overlay::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 26%;
	background: linear-gradient(transparent, rgba(8, 5, 3, 0.6));
	pointer-events: none;
}

.ark-product__overlay > * {
	pointer-events: auto;
}

.ark-sf .ark-product__back {
	display: grid;
	place-items: center;
}

.ark-product__overlay .ark-detail__dots {
	pointer-events: auto;
}

.ark-product__overlay .ark-detail__dots i {
	cursor: pointer;
}

.ark-sf .ark-product__rings {
	pointer-events: none;
}

.ark-sf .ark-detail__nav a {
	display: inline-grid;
	place-items: center;
	min-width: 92px;
	height: 68px;
	padding: 0 18px;
	background-color: #0f0a08;
	color: var(--ark-paper);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background-color 0.3s, color 0.3s;
}

.ark-sf .ark-detail__nav a + a {
	background-color: rgba(15, 10, 8, 0.8);
}

.ark-sf .ark-detail__nav a:hover {
	background-color: var(--ark-gold);
	color: var(--ark-ink);
}

/* right: fixed details ---------------------------------------------------- */

.ark-sf .ark-product__info {
	position: sticky;
	top: calc(var(--ark-nav-h) + var(--ark-top));
	z-index: 1;
	height: var(--ark-view);
	min-height: 520px;
	min-width: 0;
	background: var(--ark-paper);
}

.ark-sf .ark-product .ark-detail__title {
	padding-right: 0;
}

.ark-sf .ark-product__add {
	margin-bottom: 0;
}

.ark-sf .ark-product__add:disabled {
	cursor: progress;
	opacity: 0.85;
}

.ark-sf .ark-detail__size-grid button.is-unavailable {
	color: var(--ark-ink-muted);
	text-decoration: line-through;
	opacity: 0.5;
}

@media (max-width: 900px) {
	.ark-sf--product {
		--ark-nav-h: 65px;
		--ip: var(--ark-pad);
	}

	.ark-product {
		grid-template-columns: 1fr;
	}

	.ark-product__track {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ark-product__track::-webkit-scrollbar {
		display: none;
	}

	.ark-product__slide {
		flex: 0 0 100%;
		height: 56vh;
		height: 56svh;
		min-height: 360px;
		scroll-snap-align: start;
	}

	.ark-product__overlay {
		position: absolute;
		inset: 0;
		width: 100%;
	}

	.ark-sf .ark-product__info {
		position: static;
		height: auto;
		min-height: 0;
		overflow: visible;
		padding-top: 24px;
	}

	.ark-sf .ark-detail__nav a {
		height: 56px;
		min-width: 76px;
	}

	.ark-sf .ark-product__add {
		position: sticky;
		bottom: var(--ark-bottom);
		z-index: 10;
		height: 64px;
	}
}

/* detail dialog gallery becomes a horizontal swipe on phones */
@media (max-width: 900px) {
	.ark-detail__gallery {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
	}

	.ark-detail__slide {
		flex: 0 0 100%;
	}

	.ark-detail__dots {
		top: auto;
		left: 50%;
		bottom: 70px;
		flex-direction: row;
		transform: translateX(-50%);
	}

	.ark-detail__dots i.is-active {
		width: 24px;
		height: 6px;
	}
}


/* ==========================================================================
   Contact page (Arkishuz Contact widget)
   ========================================================================== */

.ark-contact {
	background: var(--ark-espresso);
	color: var(--ark-ui);
	overflow-x: clip;
}

.ark-contact-intro {
	height: 82vh;
	height: 82svh;
	min-height: 560px;
}

.ark-contact-main {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(40px, 6vw, 120px);
	padding: clamp(80px, 10vw, 150px) max(var(--ark-pad), calc((100% - 1480px) / 2));
	background: var(--ark-paper);
	color: var(--ark-ink);
}

.ark-contact-main .ark-craft-head {
	margin: 0;
}

.ark-contact-details {
	display: grid;
	gap: 26px;
	margin-top: 34px;
}

.ark-contact-details dt,
.ark-contact-hours h3 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ark-accent-ink);
}

.ark-sf .ark-contact-details dd {
	margin-top: 6px;
	font-family: var(--ark-f-serif);
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--ark-ink);
}

.ark-sf .ark-contact-details a {
	text-decoration: underline;
	text-decoration-color: var(--ark-line);
	text-underline-offset: 6px;
	transition: text-decoration-color 0.3s;
}

.ark-sf .ark-contact-details a:hover {
	text-decoration-color: var(--ark-accent-ink);
}

.ark-contact-hours {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--ark-line);
}

.ark-sf .ark-contact-hours ul {
	margin: 14px 0 0;
	list-style: none;
}

.ark-contact-hours li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--ark-line);
	font-size: 15px;
	list-style: none;
}

.ark-contact-hours li span:last-child {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ark-contact-form {
	padding: clamp(28px, 4vw, 56px);
	border-radius: 6px;
	background: var(--ark-card);
	box-shadow: 0 0 0 1px var(--ark-line), 0 40px 70px -50px rgba(52, 28, 12, 0.35);
	scroll-margin-top: 24px;
}

.ark-sf .ark-contact-form__title {
	font-family: var(--ark-f-serif);
	font-size: clamp(2rem, 3vw, 2.6rem);
	font-weight: 600;
	line-height: 1;
	color: var(--ark-ink);
}

.ark-sf .ark-contact-form__text {
	margin: 10px 0 28px;
	font-size: 14px;
	color: var(--ark-ink-muted);
}

/* WPForms inside the Arkishuz form card */
.ark-sf .ark-contact-form .wpforms-container {
	margin: 0 !important;
	--wpforms-field-border-radius: 0;
	--wpforms-field-background-color: transparent;
	--wpforms-field-text-color: var(--ark-ink);
	--wpforms-label-color: var(--ark-ink);
	--wpforms-button-background-color: var(--ark-ink);
	--wpforms-button-text-color: var(--ark-paper);
	--wpforms-button-border-radius: 999px;
}

.ark-sf .ark-contact-form .wpforms-form .wpforms-field {
	padding: 0 0 22px !important;
}

.ark-sf .ark-contact-form .wpforms-form .wpforms-field-label {
	margin-bottom: 8px !important;
	font: 700 11px/1.4 var(--ark-f-sans) !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase;
	color: var(--ark-ink) !important;
}

.ark-sf .ark-contact-form .wpforms-form .wpforms-required-label {
	color: var(--ark-accent-ink) !important;
}

.ark-sf .ark-contact-form .wpforms-form input[type="text"],
.ark-sf .ark-contact-form .wpforms-form input[type="email"],
.ark-sf .ark-contact-form .wpforms-form input[type="tel"],
.ark-sf .ark-contact-form .wpforms-form select,
.ark-sf .ark-contact-form .wpforms-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
	min-height: 48px;
	padding: 10px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(27, 20, 17, 0.28) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font: 500 16px/1.4 var(--ark-f-sans) !important;
	color: var(--ark-ink) !important;
	transition: border-color 0.3s;
}

.ark-sf .ark-contact-form .wpforms-form textarea {
	min-height: 130px;
	resize: vertical;
}

.ark-sf .ark-contact-form .wpforms-form input:focus,
.ark-sf .ark-contact-form .wpforms-form select:focus,
.ark-sf .ark-contact-form .wpforms-form textarea:focus {
	border-bottom-color: var(--ark-ink) !important;
	outline: none;
}

.ark-sf .ark-contact-form .wpforms-form .wpforms-field-sublabel {
	font-size: 12px !important;
	color: var(--ark-ink-muted) !important;
}

.ark-sf .ark-contact-form .wpforms-form button[type="submit"],
.ark-sf .ark-contact-form .wpforms-form .wpforms-submit {
	height: 54px !important;
	padding: 0 34px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--ark-ink) !important;
	color: var(--ark-paper) !important;
	font: 700 13px/1 var(--ark-f-sans) !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	transition: background-color 0.3s !important;
}

.ark-sf .ark-contact-form .wpforms-form button[type="submit"]:hover {
	background: #000 !important;
}

.ark-sf .ark-contact-form .wpforms-confirmation-container-full {
	padding: 22px 24px !important;
	border: 0 !important;
	border-left: 3px solid var(--ark-gold) !important;
	border-radius: 0 !important;
	background: var(--ark-paper) !important;
	color: var(--ark-ink) !important;
	font-size: 15px;
}

.ark-contact-services {
	padding: 0 max(var(--ark-pad), calc((100% - 1480px) / 2)) clamp(96px, 12vw, 160px);
	background: var(--ark-paper);
	color: var(--ark-ink);
}

.ark-sf .ark-contact-services ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
	list-style: none;
}

.ark-contact-service {
	padding-top: 28px;
	border-top: 1px solid var(--ark-ink);
	list-style: none;
}

.ark-sf .ark-contact-service h3 {
	margin: 12px 0 10px;
	font-family: var(--ark-f-serif);
	font-size: clamp(1.6rem, 2.2vw, 2rem);
	font-weight: 600;
	color: var(--ark-ink);
}

.ark-contact-service p {
	margin-bottom: 18px;
	max-width: 40ch;
	font-size: 15px;
	line-height: 1.7;
	color: var(--ark-ink-muted);
}

@media (max-width: 1000px) {
	.ark-contact-main {
		grid-template-columns: 1fr;
	}

	.ark-sf .ark-contact-services ul {
		grid-template-columns: 1fr;
	}
}