/* Base page styles — what the old WordPress theme used to provide, plus the
   layout glue for the separate .fyp "roots" (announcement, header, sections,
   builder, footer). */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
	margin: 0;
	background: #FBF5EA;
	color: #241A10;
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

/* The header root is a direct child of <body>, so it stays stuck for the
   whole page (on the old site it let go when the builder section began). */
.fyp-root-header { position: sticky; top: 0; z-index: 1000; background: transparent !important; background-image: none !important; }
.fyp-root-header .fyp-header { position: relative; }

/* Generic content pages (policies, blog, style pages) */
.fyp .prose { max-width: 760px; margin: 0 auto; padding: 56px 22px 80px; }
.fyp .prose h1 { font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 900; margin: 0 0 10px; }
.fyp .prose h2 { font-size: 1.45rem; margin: 40px 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.fyp .prose h3 { font-size: 1.15rem; margin: 28px 0 10px; }
.fyp .prose p, .fyp .prose ul, .fyp .prose ol { margin: 0 0 16px; color: var(--ink2); font-size: 1.04rem; }
.fyp .prose ul, .fyp .prose ol { padding-left: 22px; }
.fyp .prose li { margin: 0 0 6px; }
.fyp .prose a { color: var(--coral); }
.fyp .prose blockquote { margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid var(--gold); background: var(--paper); border-radius: 10px; }
.fyp .prose img { border-radius: 14px; margin: 10px 0 20px; }
.fyp .crumbs { font-size: .88rem; color: var(--ink2); margin-bottom: 18px; }
.fyp .crumbs a { color: var(--ink2); }
.fyp .muted { color: var(--ink2); }

/* Text section block */
.fyp .fyp-sec-text { padding: 72px 0; }
.fyp .text-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.fyp .text-grid.img-left { grid-template-columns: .9fr 1.1fr; }
.fyp .text-grid.img-left .text-media { order: -1; }
.fyp .text-grid.no-media { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.fyp .text-body p, .fyp .text-body ul, .fyp .text-body ol { margin: 0 0 14px; color: var(--ink2); font-size: 1.05rem; }
.fyp .text-body ul, .fyp .text-body ol { padding-left: 22px; }
.fyp .text-body h3 { margin: 22px 0 8px; font-size: 1.2rem; }
.fyp .text-body a { color: var(--coral); }
.fyp .text-media img { border-radius: var(--r); box-shadow: var(--shadow); width: 100%; }
.fyp .fyp-sec-text h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 900; margin: 12px 0 16px; }
@media (max-width: 860px) {
	.fyp .text-grid, .fyp .text-grid.img-left { grid-template-columns: 1fr; gap: 28px; }
	.fyp .text-grid.img-left .text-media { order: 0; }
}

/* Cards used on the style index + blog index */
.fyp .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.fyp .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; display: block; }
.fyp .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fyp .card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.fyp .card .card-body { padding: 16px 18px 20px; }
.fyp .card h3 { font-size: 1.15rem; margin-bottom: 4px; }
.fyp .card p { color: var(--ink2); font-size: .95rem; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Builder on phones: the swipeable style row (and the render cards) must
   scroll inside their column, never widen the page. The old WordPress theme
   hid this with overflow on <body>; fix the cause, keep a clip as a net. */
.fyp-pb-grid > * { min-width: 0; }
.fyp-pb .fyp-styles, #fyp-portrait-zone, .fyp-render-grid { max-width: 100%; }
html, body { overflow-x: clip; }

/* Light logo on the dark footer */
.fyp .fyp-footer .logo .logo-light { height: 48px; width: auto; max-width: 240px; }
@media (max-width: 600px) { .fyp .fyp-footer .logo .logo-light { height: 44px; } }

/* Never stack the site "Free Preview" bar on top of the builder's order bar */
body.fyp-in-studio .fyp .fyp-mobile-bar { transform: translateY(110%) !important; }

/* Builder: one clear "selected" look for every option card (size, gallery
   size, finish). Light coral card, dark text, orange price — always readable. */
html body .fyp-pb .fyp-size-lbl.on .fyp-size-btn,
html body .fyp-pb .fyp-gw-size-lbl.on .fyp-size-btn { border-color: var(--fyp-orange); background: #FFF1E8; color: var(--fyp-dark); box-shadow: 0 4px 14px -6px rgba(228, 87, 46, .4); }
html body .fyp-pb .fyp-size-lbl.on .fyp-size-name,
html body .fyp-pb .fyp-gw-size-lbl.on .fyp-size-name { color: var(--fyp-dark); font-weight: 800; }
html body .fyp-pb .fyp-size-lbl.on .fyp-size-price,
html body .fyp-pb .fyp-gw-size-lbl.on .fyp-size-price { color: var(--fyp-orange2); font-weight: 800; }
html body .fyp-pb .fyp-size-lbl.on .fyp-size-desc,
html body .fyp-pb .fyp-gw-size-lbl.on .fyp-size-desc { color: var(--fyp-mid); }
html body .fyp-pb .fyp-type-lbl.on .fyp-type-card { border: 2px solid var(--fyp-orange); background: #FFF1E8; box-shadow: 0 4px 14px -6px rgba(228, 87, 46, .4); }
html body .fyp-pb .fyp-type-lbl.on .fyp-type-name { color: var(--fyp-dark); font-weight: 800; }
html body .fyp-pb .fyp-type-lbl.on .fyp-type-desc { color: var(--fyp-mid); }
html body .fyp-pb .fyp-frame-lbl.on .fyp-frame-name,
html body .fyp-pb .fyp-bg-lbl.on .fyp-bg-name { color: var(--fyp-dark); font-weight: 800; }

/* Builder audit — shorter on phones */
#fyp-offer-card { position: static !important; margin: 14px 16px 6px; }
html body .fyp-pb .fyp-step-next-btn { display: none !important; } /* name + style now show together */
@media (max-width: 900px) {
	html body .fyp-pb .fyp-type-toggle { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	html body .fyp-pb .fyp-type-thumb,
	html body .fyp-pb .fyp-type-thumb-placeholder { height: 64px; font-size: 26px; }
	html body .fyp-pb .fyp-type-desc { display: none; }
	html body .fyp-pb .fyp-type-name { font-size: 13px; padding: 8px 4px 10px; line-height: 1.2; }
	html body .fyp-pb .fyp-type-price { margin: -6px 0 8px; }
	html body .fyp-pb .fyp-sizes { grid-template-columns: repeat(2, 1fr); }
	html body .fyp-pb .fyp-size-btn { padding: 12px 8px; }
	html body .fyp-pb .fyp-size-name { font-size: 14px; }
	html body .fyp-pb .fyp-pb-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Hero v2: headline + slider + buttons. On desktop the slider sits on the
   right; on phones it moves right under the headline so the before/after is
   on the first screen, with the main button straight after it. */
.fyp .hero-v2 { grid-template-areas: "top media" "bottom media"; grid-template-rows: auto 1fr; row-gap: 0; }
.fyp .hero-v2 .hero-top { grid-area: top; align-self: end; }
.fyp .hero-v2 .ba-wrap { grid-area: media; align-self: center; }
.fyp .hero-v2 .hero-bottom { grid-area: bottom; align-self: start; }
@media (max-width: 920px) {
	.fyp .hero { padding: 26px 0 56px; }
	.fyp .hero-v2 { grid-template-areas: "top" "media" "bottom"; grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 22px; }
	.fyp .hero-v2 .hero-top { text-align: center; }
	.fyp .hero-v2 .hero-top .eyebrow { font-size: .7rem; padding: 6px 12px; }
	.fyp .hero-v2 h1 { font-size: clamp(2.1rem, 9.4vw, 2.9rem); margin: 12px 0 0; }
	.fyp .hero-v2 .ba-wrap { width: min(100%, 360px); margin: 0 auto; }
	.fyp .hero-v2 .ba-wrap .float-chip { font-size: .74rem; padding: 7px 11px; }
	.fyp .hero-v2 .ba-wrap .fc1 { left: -6px; top: -12px; }
	.fyp .hero-v2 .ba-wrap .fc2 { right: -6px; }
	.fyp .hero-v2 .hero-bottom { text-align: center; }
	.fyp .hero-v2 p.lead { font-size: 1.02rem; margin: 6px auto 18px; }
	.fyp .hero-v2 .cta-row { justify-content: center; flex-direction: column; align-items: stretch; gap: 10px; }
	.fyp .hero-v2 .cta-row .btn { width: 100%; }
	.fyp .hero-v2 .cta-row .btn-ghost { background: none; border: none; padding: 6px; text-decoration: underline; font-size: .95rem; }
	.fyp .hero-v2 .trust-row { justify-content: center; gap: 6px 14px; font-size: .85rem; }
	.fyp .hero-v2 .rating-line { justify-content: center; flex-wrap: wrap; font-size: .88rem; }
}
@media (max-width: 920px) {
	.fyp .hero-v2 .ba-wrap { width: min(100%, 300px); }
	.fyp .hero-v2 .hero-bottom { display: flex; flex-direction: column; }
	.fyp .hero-v2 .hero-bottom .cta-row { order: -1; margin-bottom: 16px; }
	.fyp .hero-v2 .hero-bottom .lead { margin-top: 0; }
}
@media (max-width: 920px) {
	.fyp .hero-v2 .ba-label { font-size: .58rem; padding: 4px 8px; letter-spacing: .06em; }
}

/* Saved preview cards: remove button */
.fyp-pb .fyp-render-card { position: relative; }
.fyp-pb .fyp-render-rm { position: absolute; top: 8px; left: 8px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(28, 23, 18, .72); color: #fff; font-size: 14px; line-height: 30px; text-align: center; cursor: pointer; z-index: 3; padding: 0; }
.fyp-pb .fyp-render-rm:hover { background: #c0392b; }
#fyp-sticky-thumb { cursor: pointer; }
.fyp .style-thumb { cursor: pointer; }
.fyp .style-card h3 a { color: inherit; text-decoration: none; }
.fyp .style-card h3 a:hover { text-decoration: underline; }

/* Preview actions: main button, then "Another style / Another photo" side by side */
.fyp-pb .fyp-again-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 420px; }
.fyp-pb .fyp-again-row .fyp-try-style-btn { width: 100%; margin: 0; padding: 12px 8px; font-size: 14px; font-weight: 700; }
.fyp .hero-single { aspect-ratio: 4 / 5; overflow: hidden; }
.fyp .hero-single img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "The whole journey" steps — compact, modern rows on phones */
@media (max-width: 560px) {
	html body .fyp .fyp-sec-how { padding: 56px 0 48px; }
	html body .fyp .fyp-sec-how .sec-head { margin-bottom: 26px; }
	html body .fyp .steps { gap: 10px; }
	html body .fyp .step {
		display: grid; grid-template-columns: 52px 1fr; grid-template-areas: "ico title" "ico text";
		column-gap: 14px; row-gap: 2px; align-items: start; padding: 14px 16px 15px; border-radius: 16px;
		box-shadow: 0 2px 10px rgba(60, 40, 10, .05);
	}
	html body .fyp .step:hover { transform: none; }
	html body .fyp .step .ico {
		grid-area: ico; width: 52px; height: 52px; margin: 0; border-radius: 15px;
		background: linear-gradient(145deg, #FFF4E2, #FCE7D2); display: grid; place-items: center; font-size: 1.45rem;
	}
	html body .fyp .step .num {
		position: absolute; top: 9px; left: 52px; width: 22px; height: 22px; border-radius: 50%;
		background: var(--coral); color: #fff; -webkit-text-stroke: 0; font-family: var(--f-body);
		font-size: .7rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--paper);
	}
	html body .fyp .step h3 { grid-area: title; font-size: 1.02rem; margin: 3px 0 0; padding-right: 74px; line-height: 1.25; }
	html body .fyp .step p { grid-area: text; font-size: .88rem; line-height: 1.45; }
	html body .fyp .step .time-chip { top: 14px; right: 14px; font-size: .64rem; padding: 3px 8px; }
	html body .fyp .fyp-sec-how .wrap > div[style*="margin-top:38px"] { margin-top: 22px !important; }
}

/* Footer: brand + 4 link columns */
@media (min-width: 821px) { html body .fyp .foot-grid { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; } }

/* Step 02 style cards: smaller on phones — about 2½ visible, so it's obvious there are more */
@media (max-width: 600px) {
	html body .fyp .fyp-styles-carousel .style-grid { grid-auto-columns: 42%; gap: 10px; }
	html body .fyp .fyp-styles-carousel .style-thumb { aspect-ratio: 4 / 5; }
	html body .fyp .fyp-styles-carousel .style-card .body { padding: 10px 8px 12px; }
	html body .fyp .fyp-styles-carousel .style-card h3 { font-size: .95rem; }
	html body .fyp .fyp-styles-carousel .style-card p { font-size: .74rem; margin: 2px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	html body .fyp .fyp-styles-carousel .try-btn { font-size: .74rem; padding: 7px 10px; }
	html body .fyp .fyp-styles-carousel .style-card .tag { font-size: .58rem; padding: 3px 7px; top: 8px; left: 8px; }
}

/* "Your style" bar above the upload box (style picked before a photo is uploaded) */
html body .fyp-pb .fyp-chosen-style { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 0 0 12px; border: 2px solid var(--fyp-orange); background: #FFF1E8; border-radius: 14px; box-shadow: 0 6px 18px -10px rgba(228, 87, 46, .5); animation: fypChosenIn .35s ease; }
html body .fyp-pb .fyp-chosen-style[hidden] { display: none; }
html body .fyp-pb .fyp-chosen-style img { width: 44px; height: 55px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #fff; }
html body .fyp-pb .fyp-chosen-txt { flex: 1; min-width: 0; line-height: 1.25; }
html body .fyp-pb .fyp-chosen-txt small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fyp-mid); font-weight: 700; }
html body .fyp-pb .fyp-chosen-txt b { font-size: 15px; color: var(--fyp-dark); }
html body .fyp-pb #fyp-chosen-change { background: none; border: none; color: var(--fyp-orange2); font-weight: 800; text-decoration: underline; cursor: pointer; font-size: 13px; padding: 6px; }
@keyframes fypChosenIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }