/* Futprints Card Configurator - demo design system */
:root {
	--fc-ink: #070b16;
	--fc-ink-2: #0d1424;
	--fc-panel: #141d33;
	--fc-line: rgba(245, 196, 81, .22);
	--fc-gold: #f5c451;
	--fc-gold-deep: #c9971f;
	--fc-gold-pale: #fff3cd;
	--fc-text: #eef2fb;
	--fc-muted: #97a3c0;
	--fc-radius: 16px;
	--fc-shadow: 0 24px 60px -24px rgba(0, 0, 0, .75);
	--fc-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.fc-section {
	font-family: var(--fc-font);
	/* Full-bleed is handled by the block theme: the wrapper carries .alignfull,
	   which core pairs with .has-global-padding to cancel the root padding.
	   A 100vw breakout loses to core's "margin-inline: auto !important". */
	max-width: none;
}
.fc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.fc-eyebrow {
	display: inline-block; letter-spacing: .18em; text-transform: uppercase;
	font-size: 12px; font-weight: 700; color: var(--fc-gold);
	border: 1px solid var(--fc-line); border-radius: 999px; padding: 7px 16px;
}
.fc-h1 { font-size: clamp(2.4rem, 5.5vw, 4.1rem); line-height: 1.04; letter-spacing: -.03em; margin: 22px 0 18px; font-weight: 800; }
.fc-h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; font-weight: 800; }
.fc-lede { font-size: 1.13rem; line-height: 1.65; color: var(--fc-muted); max-width: 56ch; margin: 0 0 28px; }
.fc-gold-text {
	background: linear-gradient(103deg, var(--fc-gold-pale), var(--fc-gold) 45%, var(--fc-gold-deep));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons */
.fc-btn {
	display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
	padding: 15px 30px; border-radius: 999px; font-weight: 700; font-size: 1rem;
	text-decoration: none; border: 0; transition: transform .16s ease, box-shadow .16s ease;
}
.fc-btn--gold {
	background: linear-gradient(135deg, var(--fc-gold-pale), var(--fc-gold) 40%, var(--fc-gold-deep));
	color: #2a1d00; box-shadow: 0 12px 30px -10px rgba(245, 196, 81, .65);
}
.fc-btn--ghost { background: transparent; color: var(--fc-text); border: 1px solid rgba(255,255,255,.22); }
.fc-btn:hover { transform: translateY(-2px); }
.fc-btn:focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 3px; }

/* ---------- Landing page ---------- */
.fc-hero {
	background:
		radial-gradient(1100px 620px at 78% 8%, rgba(245, 196, 81, .20), transparent 62%),
		radial-gradient(760px 520px at 12% 88%, rgba(58, 104, 255, .18), transparent 60%),
		linear-gradient(168deg, var(--fc-ink), var(--fc-ink-2));
	color: var(--fc-text); padding: 84px 0 92px; overflow: hidden;
}
.fc-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.fc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.fc-trust { display: flex; flex-wrap: wrap; gap: 26px; color: var(--fc-muted); font-size: .9rem; }
.fc-trust span { display: flex; align-items: center; gap: 8px; }
.fc-trust svg { width: 17px; height: 17px; fill: var(--fc-gold); flex: none; }

.fc-hero__stage { display: flex; justify-content: center; align-items: center; gap: 18px; perspective: 1400px; }
.fc-hero__stage .fc-card { transform: rotateY(-14deg) rotateX(4deg); }
.fc-hero__stage .fc-card:nth-child(1) { transform: rotateY(-20deg) rotateX(5deg) translateX(28px) scale(.84); opacity: .72; }
.fc-hero__stage .fc-card:nth-child(3) { transform: rotateY(-8deg) rotateX(5deg) translateX(-28px) scale(.84); opacity: .72; }

.fc-band { background: var(--fc-ink-2); color: var(--fc-text); padding: 76px 0; }
.fc-band--light { background: #f7f8fc; color: #0d1424; }
.fc-band--light .fc-lede { color: #55607a; }
.fc-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.fc-head .fc-lede { margin-inline: auto; }

.fc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; counter-reset: step; }
.fc-step {
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
	border-radius: var(--fc-radius); padding: 32px 28px; position: relative;
}
.fc-band--light .fc-step { background: #fff; border-color: #e6e9f2; box-shadow: 0 12px 34px -26px rgba(13,20,36,.5); }
.fc-step::before {
	counter-increment: step; content: counter(step, decimal-leading-zero);
	font-size: 2.6rem; font-weight: 800; line-height: 1;
	background: linear-gradient(135deg, var(--fc-gold-pale), var(--fc-gold-deep));
	-webkit-background-clip: text; background-clip: text; color: transparent;
	display: block; margin-bottom: 14px;
}
.fc-step h3 { font-size: 1.2rem; margin: 0 0 8px; font-weight: 700; }
.fc-step p { margin: 0; color: var(--fc-muted); line-height: 1.62; font-size: .97rem; }
.fc-band--light .fc-step p { color: #55607a; }

.fc-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fc-feature { text-align: center; padding: 26px 18px; }
.fc-feature strong { display: block; font-size: 1.9rem; font-weight: 800; margin-bottom: 6px; }
.fc-feature span { color: var(--fc-muted); font-size: .93rem; }

.fc-faq { max-width: 820px; margin: 0 auto; }
.fc-faq details {
	border-bottom: 1px solid #e6e9f2; padding: 20px 4px;
}
.fc-faq summary {
	cursor: pointer; font-weight: 700; font-size: 1.06rem; list-style: none;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.fc-faq summary::-webkit-details-marker { display: none; }
.fc-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--fc-gold-deep); line-height: 1; }
.fc-faq details[open] summary::after { content: "\2212"; }
.fc-faq p { color: #55607a; line-height: 1.68; margin: 12px 0 0; max-width: 68ch; }

.fc-cta {
	background: linear-gradient(135deg, #11182b, #1d2740);
	color: var(--fc-text); border-radius: 22px; padding: 56px 48px; text-align: center;
	border: 1px solid var(--fc-line);
}

/* ---------- Card built on the real template artwork ----------
   Every element is positioned as a percentage of the template, so the same
   coordinates can drive a print-resolution render later. */
.fc-card {
	position: relative; flex: none;
	width: 300px; max-width: 100%;
	aspect-ratio: 1016 / 1417;
	container-type: inline-size;
	font-family: "Barlow Condensed", var(--fc-font);
	color: #4a3708;
	filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .5));
	transition: transform .3s ease;
}
.fc-card__bg {
	position: absolute; inset: 0;
	background: var(--fc-template) center / contain no-repeat;
}
/* Ink colour and artwork per design are emitted from the PHP registry, so the
   canvas snapshot and the on-screen card cannot drift apart. */
.fc-thumb {
	display: block; width: 100%; height: auto; border-radius: 6px;
	box-shadow: 0 4px 12px -6px rgba(13, 20, 36, .5);
}

.fc-card__meta {
	position: absolute; left: 6%; top: 10%; width: 22%;
	display: flex; flex-direction: column; align-items: center; line-height: 1;
}
.fc-card__rating { font-size: 17cqw; font-weight: 700; letter-spacing: -.02em; }
.fc-card__pos { font-size: 7.4cqw; font-weight: 600; margin-top: .5cqw; }
.fc-card__rule { width: 8cqw; height: 1px; background: currentColor; opacity: .55; margin: 2.6cqw 0; }
.fc-card__tag {
	font-size: 4.4cqw; font-weight: 600; letter-spacing: .02em; text-align: center;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.fc-card__photo {
	position: absolute; left: 30%; right: 3%; top: 4%; height: 48%;
	overflow: hidden; display: grid; place-items: center;
}
.fc-card__photo img {
	position: absolute; inset: 0; display: block;
	width: 100%; height: 100%; min-height: 100%;
	object-fit: cover;
	/* Bias upward so heads survive the crop. */
	object-position: center 22%;
}
.fc-card__photo span {
	font-family: var(--fc-font); font-size: 3.4cqw; letter-spacing: .14em;
	text-transform: uppercase; opacity: .45; text-align: center;
}

.fc-card__name {
	position: absolute; left: 8%; right: 8%; top: 54.5%;
	text-align: center; font-size: 10cqw; font-weight: 700; line-height: 1;
	text-transform: uppercase; letter-spacing: -.005em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.fc-card__stats {
	position: absolute; left: 11%; right: 9%; top: 66%;
	display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr);
	grid-auto-flow: column; row-gap: 1cqw;
}
.fc-card__stats::after {
	content: ""; position: absolute; left: 50%; top: 6%; bottom: 6%;
	width: 1px; background: currentColor; opacity: .4;
}
.fc-card__stat {
	display: flex; align-items: baseline; justify-content: center; gap: .35em;
	font-size: 8.4cqw; font-weight: 700; line-height: 1;
}
.fc-card__stat b { font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-card__stat i { font-style: normal; font-weight: 600; }

/* ---------- Cut-out marker ----------
   Mirrors the photo box coordinates rather than living inside it, because the
   preview script replaces the photo container's contents on every upload. */
.fc-cut {
	position: absolute; left: 30%; right: 3%; top: 4%; height: 48%;
	z-index: 3; pointer-events: none;
}
.fc-cut[hidden] { display: none !important; }

.fc-cut__frame {
	position: absolute; inset: 0; width: 100%; height: 100%; display: block;
	filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9));
}
.fc-cut__outline {
	fill: none; stroke: #fff; stroke-width: 2.6;
	stroke-dasharray: 7 4.5; stroke-linejoin: round;
	animation: fc-ants 2.6s linear infinite;
}
/* Everything outside the silhouette is what gets cut away. */
.fc-cut__scrim { fill: rgba(8, 12, 24, .5); }
@keyframes fc-ants { to { stroke-dashoffset: -23; } }

.fc-cut__badge {
	position: absolute; top: -11px; right: -11px;
	width: 34px; height: 34px; border-radius: 50%; padding: 0;
	display: grid; place-items: center; cursor: help; pointer-events: auto;
	background: #fff; color: #1d2740;
	border: 2px solid var(--fc-gold-deep);
	box-shadow: 0 3px 10px rgba(13, 20, 36, .38);
}
.fc-cut__icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.fc-cut__sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.fc-cut__tip {
	position: absolute; top: 30px; right: 0; width: 216px; z-index: 4;
	background: #10182b; color: #f2f5fc; font-family: var(--fc-font);
	font-size: .78rem; line-height: 1.45; font-weight: 500;
	padding: 10px 13px; border-radius: 9px; text-align: left;
	box-shadow: 0 10px 26px rgba(8, 12, 24, .45);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.fc-cut__tip::before {
	content: ""; position: absolute; top: -5px; right: 14px;
	width: 10px; height: 10px; background: inherit; transform: rotate(45deg);
}
.fc-cut__badge:hover + .fc-cut__tip,
.fc-cut__badge:focus-visible + .fc-cut__tip,
.fc-cut:hover .fc-cut__tip {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.fc-cut__badge:focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 2px; }

.fc-cfg__cutnote {
	display: flex; align-items: center; justify-content: center; gap: 7px;
	margin: 8px 0 0; font-size: .8rem; color: #4b5568; font-weight: 600;
}
.fc-cfg__cutnote[hidden] { display: none !important; }
.fc-cfg__cutnote .fc-cut__icon { width: 15px; height: 15px; color: var(--fc-gold-deep); flex: none; }

@media (prefers-reduced-motion: reduce) {
	.fc-cut__outline { animation: none; }
	.fc-cut__tip { transition: none; }
}

/* ---------- Product page configurator ---------- */
/* The product gallery block is removed on card products; without this its
   now-empty flex column would still hold half the row. */
.futprints-card-product .wp-block-columns.alignwide { display: block; }
.futprints-card-product .wp-block-columns.alignwide > .wp-block-column { width: 100%; }
.futprints-card-product .wp-block-woocommerce-product-image-gallery { display: none; }

.futprints-card-configurator {
	border: 0; margin: 0 0 28px; padding: 0; font-family: var(--fc-font);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 320px);
	gap: 26px; align-items: start;
}
.fc-cfg__col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.futprints-card-configurator legend { display: none; }
.fc-cfg__panel {
	background: #fff; border: 1px solid #e6e9f2; border-radius: var(--fc-radius);
	padding: 22px; box-shadow: 0 18px 44px -34px rgba(13,20,36,.55);
}
.fc-cfg__title { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7b869f; margin: 0 0 16px; }


.fc-cfg__designs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.fc-design { position: relative; }
.fc-design input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-design span {
	display: block; text-align: center; cursor: pointer; border-radius: 12px;
	border: 2px solid #e6e9f2; padding: 10px 6px; font-size: .8rem; font-weight: 700;
	color: #39415a; transition: border-color .15s ease, transform .15s ease;
}
.fc-design span::before {
	content: ""; display: block; height: 62px; border-radius: 7px; margin-bottom: 8px;
	background: var(--fc-template) center top / 100% auto no-repeat;
}
.fc-design input:checked + span { border-color: var(--fc-gold-deep); transform: translateY(-2px); }
.fc-design input:focus-visible + span { outline: 3px solid var(--fc-gold); outline-offset: 2px; }

.fc-field { margin-bottom: 14px; }
.fc-field:last-child { margin-bottom: 0; }
.fc-field label, .fc-cfg__panel > .fc-grid label { display: block; font-size: .82rem; font-weight: 700; color: #39415a; margin-bottom: 6px; }
.futprints-card-configurator .fc-field select,
.futprints-card-configurator .fc-field input[type="text"],
.futprints-card-configurator .fc-field input[type="number"] {
	width: 100%; box-sizing: border-box; min-height: 46px; height: 46px;
	padding: 0 13px; margin: 0; line-height: 1.2;
	border: 1px solid #d9dfec; border-radius: 10px;
	font-size: .95rem; font-family: inherit; background: #fbfcff; color: #0d1424;
}
.futprints-card-configurator .fc-field select {
	-webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2339415a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 13px center; background-size: 12px 8px;
}
.fc-field select:focus,
.fc-field input:focus { outline: 0; border-color: var(--fc-gold-deep); box-shadow: 0 0 0 3px rgba(245,196,81,.28); }
.fc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.fc-grid > .fc-field { margin-bottom: 0; }
.fc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fc-upload {
	border: 2px dashed #cfd7e8; border-radius: 12px; padding: 22px; text-align: center;
	background: #fbfcff; cursor: pointer; display: block; transition: border-color .15s ease, background .15s ease;
}
.fc-upload:hover { border-color: var(--fc-gold-deep); background: #fffdf5; }
.fc-upload input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fc-upload strong { display: block; font-size: .98rem; color: #0d1424; margin-bottom: 4px; }
.fc-upload small { color: #778199; font-size: .82rem; line-height: 1.5; display: block; }
.fc-upload[data-state="ready"] { border-style: solid; border-color: #2e9e6b; background: #f2fbf7; }

.fc-range + .fc-range { margin-top: 16px; }
.fc-range label {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	font-size: .84rem; font-weight: 700; color: #39415a; margin-bottom: 7px;
}
.fc-range output {
	font-size: 1.02rem; font-weight: 800; color: var(--fc-gold-deep);
	font-variant-numeric: tabular-nums;
}
.fc-range input[type="range"] {
	-webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0;
	background: #e4e9f3; border-radius: 99px; accent-color: var(--fc-gold-deep); cursor: pointer;
}
.fc-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
	background: linear-gradient(150deg, var(--fc-gold-pale), var(--fc-gold) 45%, var(--fc-gold-deep));
	border: 2px solid #fff; box-shadow: 0 2px 6px rgba(20, 26, 46, .3); cursor: pointer;
}
.fc-range input[type="range"]::-moz-range-thumb {
	width: 20px; height: 20px; border-radius: 50%;
	background: var(--fc-gold-deep); border: 2px solid #fff; cursor: pointer;
}
.fc-range input[type="range"]:focus-visible { outline: 3px solid var(--fc-gold); outline-offset: 4px; }
.fc-range--lead output { font-size: 1.7rem; }
.fc-range--lead input[type="range"] { height: 8px; }

.fc-cfg__preview { position: sticky; top: 28px; text-align: center; }
.fc-cfg__preview .fc-card { width: 100%; max-width: 300px; margin: 0 auto 14px; }
.fc-cfg__hint { font-size: .8rem; color: #778199; margin: 0; }

@media (max-width: 980px) {
	.fc-hero__grid { grid-template-columns: 1fr; }
	.fc-hero__stage { margin-top: 20px; }
	.fc-hero__stage .fc-card:nth-child(1), .fc-hero__stage .fc-card:nth-child(3) { display: none; }
	.fc-hero__stage .fc-card { transform: none; }
	.fc-steps, .fc-feature-grid { grid-template-columns: 1fr 1fr; }
	.futprints-card-configurator { grid-template-columns: 1fr; }
	.fc-cfg__preview { position: static; order: -1; }
	.fc-cfg__col { gap: 18px; }
}
@media (max-width: 620px) {
	.fc-cfg__panel { padding: 18px; }
	.futprints-card-configurator { gap: 18px; }
	.fc-steps, .fc-feature-grid, .fc-cfg__designs { grid-template-columns: 1fr 1fr; }
	.fc-stats-row { grid-template-columns: repeat(3, 1fr); }
	.fc-grid, .fc-grid--3 { grid-template-columns: 1fr; }
}