/**
 * Showcase pages: Shopify app live preview (pattern pdfflipbook/shopify-preview), Iframe/Embed
 * preview (pdfflipbook/embed-preview), Support (pdfflipbook/support-main), Shopify install
 * (pdfflipbook/shopify-install) and About (pdfflipbook/about-main). Sections share the
 * class "pf-spage".
 * The feature cards use the Features page styles (features.css, loaded for .pf-fgrid).
 */

/* ---------- Section heads ---------- */
.pf-spage .pf-spage__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}
.pf-spage .pf-spage__head > * { margin: 0; }
.pf-spage .pf-spage__title { color: #0f2d35; font-size: clamp(32px, 1.6vw + 18px, 48px); }
.pf-spage .pf-spage__lead { max-width: 680px; color: var(--wp--preset--color--paragraph); font-size: 18px; line-height: 1.6; letter-spacing: -0.2px; }
.pf-spage .pf-spage__actions { gap: 12px; margin-top: 12px !important; }

/* ---------- Hero: the FlipBook in a soft frame ---------- */
.pf-spage-hero.pf-grid-bg { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f8fafc 100%), url("../../images/grid-hero.svg"); background-size: 100% 100%, 1920px auto; background-repeat: no-repeat, repeat-x; background-position: center, center top; }
.pf-spage .pf-spage__viewer {
	margin-top: clamp(40px, 4vw, 64px) !important;
	padding: 10px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 50px 90px -50px rgba(10, 26, 47, 0.45);
}
.pf-spage__viewer > * { margin: 0; }
/* The height comes from the iframe or shortcode (750, 800…); at most most of the screen */
.pf-spage__viewer iframe { display: block; width: 100%; max-height: 86vh; border: 0; border-radius: 12px; background: var(--wp--preset--color--neutral); }
.pf-btn-fullscreen .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; }
.pf-btn-fullscreen .wp-block-button__link::after { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 20px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 20px no-repeat; }

/* ---------- PDF viewer modes ---------- */
.pf-spage-viewers__grid.pf-spage-viewers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: clamp(40px, 4vw, 60px) !important; }
.pf-viewer-card.pf-viewer-card {
	position: relative;
	margin: 0;
	padding: 12px 12px 24px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: #fff;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s var(--pf-ease);
}
.pf-viewer-card:hover { border-color: #d2dae6; box-shadow: 0 24px 50px -24px rgba(10, 26, 47, 0.25); transform: translateY(-4px); }
.pf-viewer-card .pf-viewer-card__thumb { aspect-ratio: 1500 / 940; margin: 0; overflow: hidden; border-radius: 10px; background: var(--wp--preset--color--light); }
.pf-viewer-card__thumb a { display: block; height: 100%; }
/* The whole card opens the preview */
.pf-viewer-card__thumb a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.pf-viewer-card__thumb a:focus-visible { outline: none; }
.pf-viewer-card:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.pf-viewer-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--pf-ease); }
.pf-viewer-card:hover .pf-viewer-card__thumb img { transform: scale(1.03); }
.pf-viewer-card .pf-viewer-card__body { align-items: center; gap: 16px; margin-top: 20px !important; padding: 0 10px; }
.pf-viewer-card__text > * { margin: 0; }
.pf-viewer-card .pf-viewer-card__title { width: auto; margin: 0 !important; color: #0f2d35; font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 600; line-height: 1.4; letter-spacing: -0.4px; background: none; }
.pf-viewer-card .pf-viewer-card__desc { margin-top: 4px; color: var(--wp--preset--color--paragraph); font-size: 15px; line-height: 1.55; }
.pf-viewer-card .pf-viewer-card__cta {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 7px 14px 7px 16px;
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 999px;
	color: var(--wp--preset--color--brand);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.pf-viewer-card__cta::after { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("../../images/icons/angle-right.svg") center / 16px no-repeat; mask: url("../../images/icons/angle-right.svg") center / 16px no-repeat; transition: transform 0.3s var(--pf-ease); }
.pf-viewer-card:hover .pf-viewer-card__cta { background: var(--wp--preset--color--brand); color: #fff; }
.pf-viewer-card:hover .pf-viewer-card__cta::after { transform: translateX(2px); }

/* ---------- Features ---------- */
.pf-spage-features__grid.pf-fgrid { margin-top: clamp(40px, 4vw, 60px) !important; }
.pf-spage-features .pf-fcard.pf-fcard { min-height: 0; }
.pf-spage .pf-spage__more { margin-top: clamp(40px, 4vw, 56px) !important; }

/* ---------- Embed in 3 steps ---------- */
.pf-spage .pf-esteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 4vw, 60px) !important; counter-reset: none; }
.pf-estep.pf-estep {
	position: relative;
	margin: 0;
	padding: 32px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--light);
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s var(--pf-ease);
}
.pf-estep:hover { border-color: #d2dae6; box-shadow: 0 18px 40px -20px rgba(10, 26, 47, 0.2); transform: translateY(-3px); }
.pf-estep > * { margin: 0; }
.pf-estep .pf-estep__num {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font: 600 15px/1 var(--wp--preset--font-family--heading);
	letter-spacing: 0.02em;
}
.pf-estep .pf-estep__title { margin-top: 24px; color: #0f2d35; font-family: var(--wp--preset--font-family--heading); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.4px; }
.pf-estep .pf-estep__text { margin-top: 8px; color: var(--wp--preset--color--paragraph); font-family: var(--wp--preset--font-family--dm-sans); font-size: 16px; line-height: 1.55; }

/* A Code block with a Copy button (class "pf-code-copy", assets/js/copy-code.js) */
.pf-spage .pf-code-copy {
	position: relative;
	margin: 0;
	padding: 22px 120px 22px 24px;
	overflow-x: auto;
	border: 1px solid #1d2f45;
	border-radius: 14px;
	background: var(--wp--preset--color--neutral);
	color: #cfe9ef;
	font: 400 14px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	white-space: pre-wrap;
	word-break: break-all;
	box-shadow: 0 24px 50px -30px rgba(10, 26, 47, 0.6);
	transition: border-color 0.3s ease;
}
.pf-code-copy code { font: inherit; }
.pf-code-copy__btn {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font: 600 13px/18px var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.pf-code-copy__btn:hover { background: rgba(255, 255, 255, 0.16); }
.pf-code-copy__btn:focus-visible { outline: 2px solid var(--wp--preset--color--secondary); outline-offset: 2px; }
.pf-code-copy.is-copied { border-color: var(--wp--preset--color--secondary); }
.pf-code-copy.is-copied .pf-code-copy__btn { border-color: var(--wp--preset--color--secondary); background: var(--wp--preset--color--secondary); }

/* ---------- Support: help cards ---------- */
.pf-spage .pf-help-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5vw, 72px) !important; }
.pf-help-card.pf-help-card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 32px 28px 28px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: #fff;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s var(--pf-ease);
}
.pf-help-card:hover { border-color: #d2dae6; box-shadow: 0 24px 50px -24px rgba(10, 26, 47, 0.25); transform: translateY(-4px); }
.pf-help-card > * { margin: 0; }
.pf-help-card .pf-help-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--wp--preset--color--tag); transition: background-color 0.3s ease; }
.pf-help-card__icon img { display: block; width: 24px !important; height: 24px !important; }
.pf-help-card:hover .pf-help-card__icon { background: #d6e6ec; }
.pf-help-card .pf-help-card__title { margin-top: 24px; color: #0f2d35; font-family: var(--wp--preset--font-family--heading); font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.4px; }
.pf-help-card .pf-help-card__text { flex: 1; margin-top: 8px; color: var(--wp--preset--color--paragraph); font-family: var(--wp--preset--font-family--dm-sans); font-size: 16px; line-height: 1.55; }
.pf-help-card .pf-help-card__link { margin-top: 20px; font-size: 15px; font-weight: 600; }
.pf-help-card__link a { display: inline-flex; align-items: center; gap: 6px; color: var(--wp--preset--color--brand); text-decoration: none; }
/* The whole card is the link */
.pf-help-card__link a::before { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.pf-help-card__link a::after { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url("../../images/icons/angle-right.svg") center / 18px no-repeat; mask: url("../../images/icons/angle-right.svg") center / 18px no-repeat; transition: transform 0.3s var(--pf-ease); }
.pf-help-card:hover .pf-help-card__link a::after { transform: translateX(3px); }
.pf-help-card__link a:focus-visible { outline: none; }
.pf-help-card:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }

/* ---------- Support: FAQ groups ---------- */
.pf-support-faq .pf-support-faq__group { margin-top: clamp(40px, 4vw, 56px); }
.pf-support-faq .pf-support-faq__group + .pf-support-faq__group { margin-top: 40px; }
.pf-support-faq .pf-support-faq__heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px;
	color: var(--wp--preset--color--paragraph);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.pf-support-faq .pf-support-faq__heading::after { content: ""; flex: 1; height: 1px; background: var(--wp--preset--color--line); }
.pf-support-faq .pf-faq__item p a { color: var(--wp--preset--color--brand); text-decoration: underline; text-underline-offset: 3px; }
.pf-support-faq .pf-support-faq__more { margin-top: 48px; color: var(--wp--preset--color--paragraph); font-size: 16px; }
.pf-support-faq__more a { color: var(--wp--preset--color--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Shopify install (assets/js/shopify-install.js) ---------- */
.pf-spage .pf-install-card {
	margin-top: clamp(36px, 4vw, 52px) !important;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 40px 80px -48px rgba(10, 26, 47, 0.45);
}
.pf-install-card > * { margin: 0; }
.pf-install-form { display: flex; flex-direction: column; }
.pf-install-form__label { margin-bottom: 10px; color: var(--wp--preset--color--neutral); font: 600 15px/1.4 var(--wp--preset--font-family--body); }
.pf-install-form__field { position: relative; }
.pf-install-form__icon { position: absolute; top: 50%; left: 16px; width: 22px; height: 22px; margin-top: -11px; background: url("../../images/icons/shopify.svg") center / contain no-repeat; pointer-events: none; }
.pf-install-form .pf-install-form__input {
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	padding: 0 16px 0 50px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--neutral);
	font: 500 17px/1 var(--wp--preset--font-family--body);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.pf-install-form__input::placeholder { color: #9aa3ae; }
.pf-install-form__input:focus { border-color: var(--wp--preset--color--brand); outline: none; background: #fff; box-shadow: 0 0 0 4px rgba(9, 99, 126, 0.12); }
.pf-install-form.has-error .pf-install-form__input { border-color: #d14343; box-shadow: 0 0 0 4px rgba(209, 67, 67, 0.12); }
.pf-install-form .pf-install-form__hint { margin: 10px 0 0; color: var(--wp--preset--color--paragraph); font-size: 14px; line-height: 1.5; }
.pf-install-form .pf-install-form__error { margin: 8px 0 0; color: #c23636; font-size: 14px; font-weight: 500; line-height: 1.5; }
.pf-install-form .pf-install-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	margin-top: 24px;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--brand);
	color: #fff;
	font: 600 17px/1 var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.pf-install-form__submit::after { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url("../../images/icons/angle-right.svg") center / 20px no-repeat; mask: url("../../images/icons/angle-right.svg") center / 20px no-repeat; transition: transform 0.3s var(--pf-ease); }
.pf-install-form__submit:hover { background: var(--wp--preset--color--neutral); }
.pf-install-form__submit:hover::after { transform: translateX(3px); }
.pf-install-form__submit:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.pf-install-form.is-sending .pf-install-form__submit { opacity: 0.7; pointer-events: none; }
.pf-spage .pf-install-alt { margin-top: 24px !important; color: var(--wp--preset--color--paragraph); font-size: 14px; font-weight: 500; }
.pf-spage .pf-install-store { margin-top: 8px !important; color: var(--wp--preset--color--paragraph); font-size: 15px; }
.pf-install-store a { color: var(--wp--preset--color--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- About ---------- */
.pf-spage .pf-about-intro { max-width: 820px; margin: 28px auto 0 !important; color: var(--wp--preset--color--neutral); font-size: 19px; line-height: 1.7; letter-spacing: -0.2px; }
.pf-spage .pf-about-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 5vw, 72px) !important; }
.pf-about-step.pf-help-card:hover { transform: none; box-shadow: none; border-color: var(--wp--preset--color--line); }
/* ThemeNcode: the logo on a navy card with a soft teal glow */
.pf-about-brand.pf-about-brand {
	position: relative;
	justify-content: center;
	aspect-ratio: 1115 / 585;
	overflow: hidden;
	border-radius: 20px;
	background:
		radial-gradient(90% 80% at 50% 0%, rgba(14, 165, 164, 0.22), rgba(14, 165, 164, 0) 60%),
		linear-gradient(160deg, #13304d 0%, var(--wp--preset--color--neutral) 100%);
	box-shadow: 0 40px 80px -40px rgba(10, 26, 47, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.pf-about-brand .pf-about-brand__logo { position: relative; width: min(60%, 256px); margin: 0; transition: transform 0.5s var(--pf-ease); }
.pf-about-brand__logo a, .pf-about-brand__logo img { display: block; width: 100% !important; height: auto; }
.pf-about-brand:hover .pf-about-brand__logo { transform: scale(1.04); }
.pf-about-team__text > * { margin: 0; }
.pf-about-team__text > * + * { margin-top: 16px; }
.pf-about-team__text .pf-spage__tag { width: fit-content; margin-inline: 0 !important; }
.pf-spage .pf-about-team__text .pf-spage__title { margin-top: 16px; font-size: clamp(30px, 1.4vw + 16px, 40px); line-height: 1.2; }
.pf-about-team__text p:not(.pf-spage__tag) { color: var(--wp--preset--color--paragraph); font-size: 17px; line-height: 1.7; }
.pf-about-team__text .pf-about-team__actions { margin-top: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
	.pf-spage .pf-spage__lead { font-size: 16px; }
	.pf-spage .pf-spage__viewer { padding: 6px; border-radius: 14px; }
	.pf-spage__viewer iframe { height: min(560px, 75vh); border-radius: 9px; }
	.pf-spage .pf-esteps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pf-spage .pf-help-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pf-spage .pf-install-card { padding: 22px 18px; border-radius: 16px; }
	.pf-spage .pf-about-intro { font-size: 17px; text-align: left; }
	.pf-spage .pf-about-steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pf-help-card.pf-help-card { padding: 24px 22px; }
	.pf-help-card .pf-help-card__title { margin-top: 16px; font-size: 18px; }
	.pf-estep.pf-estep { padding: 24px 22px; }
	.pf-estep .pf-estep__title { margin-top: 16px; font-size: 18px; }
	.pf-spage .pf-code-copy { padding: 58px 18px 18px; font-size: 13px; }
	.pf-spage-viewers__grid.pf-spage-viewers__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.pf-viewer-card .pf-viewer-card__title { font-size: 20px; }
	/* 24 features: two compact cards per row instead of one long column */
	.pf-spage-features__grid.pf-fgrid.pf-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.pf-spage-features .pf-fcard.pf-fcard { padding: 20px 16px; }
	.pf-spage-features .pf-fcard .pf-fcard__icon { width: 44px; height: 44px; }
	.pf-spage-features .pf-fcard__icon img { width: 20px !important; height: 20px !important; }
	.pf-spage-features .pf-fcard .pf-fcard__title { margin-top: 16px; font-size: 16px; line-height: 1.35; letter-spacing: -0.2px; }
	.pf-spage-features .pf-fcard .pf-fcard__text { margin-top: 6px; font-size: 14px; line-height: 1.5; }
}
@media (max-width: 480px) {
	.pf-spage__actions .wp-block-button { width: 100%; }
	.pf-spage__actions .wp-block-button__link { justify-content: center; width: 100%; }
	.pf-viewer-card .pf-viewer-card__body { flex-wrap: wrap !important; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-viewer-card:hover, .pf-viewer-card:hover .pf-viewer-card__thumb img { transform: none; }
}