/**
 * REME 9.6.2 — Fandom Classics / Fandom Noir storefront polish.
 *
 * Every rule is scoped to the rfc-* row classes that only the two fandom demos use,
 * so no other demo, template bank or user page is affected by this file.
 * Verified against the rendered demo markup at 1440px and at mobile widths.
 */

/* ----------------------------------------------------------------- hero */
.rfc-hero .rm-hero { --rm-hero-h: 600px !important; }
.rfc-hero .rm-hero-shade {
	background: linear-gradient(180deg, rgba(8,6,18,.72) 0%, rgba(8,6,18,.30) 38%, rgba(8,6,18,.55) 72%, rgba(8,6,18,.88) 100%) !important;
	opacity: 1 !important;
}
/* Centre vignette: the supplied artwork is bright and busy behind the headline. */
.rfc-hero .rm-hero-slide::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(8,6,18,.62), transparent 70%);
}
.rfc-hero .rm-hero-content { position: relative; z-index: 3; }
.rfc-hero .rm-hero-box { max-width: 780px; }
.rfc-hero .rm-hero-title {
	font-size: clamp(38px, 4.4vw, 64px) !important;
	line-height: 1.02 !important;
	letter-spacing: -.025em !important;
	text-shadow: 0 2px 30px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
}
.rfc-hero .rm-text { font-size: 17px; opacity: .95; text-shadow: 0 1px 14px rgba(0,0,0,.65); }
.rfc-hero .rm-btns { margin-top: 26px; }

/* --------------------------------------------------- home three-column band
 * Column widths come from flex ratios, not percentages: the builder adds a gap
 * between columns, so percentage widths that sum to 100% wrap the last column
 * onto its own line. Ratios leave the gap out of the calculation. */
.rfc-three-col > .rmb-row-in { flex-wrap: nowrap !important; gap: 34px !important; align-items: flex-start; }
.rfc-three-col > .rmb-row-in > .rmb-col { width: auto !important; min-width: 0; }
.rfc-three-col > .rmb-row-in > .rmb-col:nth-child(1) { flex: 32 1 0; }
.rfc-three-col > .rmb-row-in > .rmb-col:nth-child(2) { flex: 27 1 0; }
.rfc-three-col > .rmb-row-in > .rmb-col:nth-child(3) { flex: 36 1 0; }
@media (max-width: 1100px) {
	.rfc-three-col > .rmb-row-in { flex-wrap: wrap !important; }
	.rfc-three-col > .rmb-row-in > .rmb-col { flex: 1 1 100% !important; }
}

/* ------------------------------------------------- section heading + view all */
.rfc-three-col .rmb-col-in,
.rfc-products .rmb-col-in,
.rfc-posts .rmb-col-in,
.rfc-videos .rmb-col-in,
.rfc-categories .rmb-col-in { position: relative; }

.rfc-three-col .rmw-adv-heading,
.rfc-products .rmw-adv-heading,
.rfc-posts .rmw-adv-heading,
.rfc-videos .rmw-adv-heading,
.rfc-categories .rmw-adv-heading { margin-bottom: 0; }

.rfc-three-col .rmw-adv-heading .rm-title,
.rfc-products .rmw-adv-heading .rm-title,
.rfc-posts .rmw-adv-heading .rm-title,
.rfc-videos .rmw-adv-heading .rm-title,
.rfc-categories .rmw-adv-heading .rm-title {
	font-size: 15px !important; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	text-align: left !important; width: auto !important; max-width: none !important;
}
/* The heading inner is a column flex box centred by default. */
.rfc-three-col .rpa-ah-in,
.rfc-products .rpa-ah-in,
.rfc-posts .rpa-ah-in,
.rfc-videos .rpa-ah-in,
.rfc-categories .rpa-ah-in {
	align-items: flex-start !important; justify-content: flex-start !important;
	flex-direction: column; text-align: left !important;
	padding-left: 30px; position: relative;
}
.rfc-three-col .rpa-ah-in > *,
.rfc-products .rpa-ah-in > *,
.rfc-posts .rpa-ah-in > *,
.rfc-videos .rpa-ah-in > *,
.rfc-categories .rpa-ah-in > * { margin-left: 0 !important; margin-right: 0 !important; }

.rfc-three-col .rpa-sep,
.rfc-products .rpa-sep,
.rfc-posts .rpa-sep,
.rfc-videos .rpa-sep,
.rfc-categories .rpa-sep {
	width: 42px !important; max-width: 42px !important;
	margin: 10px 0 0 0 !important; align-self: flex-start !important;
}
.rfc-three-col .rmw-adv-heading .rm-container,
.rfc-products .rmw-adv-heading .rm-container,
.rfc-posts .rmw-adv-heading .rm-container,
.rfc-videos .rmw-adv-heading .rm-container,
.rfc-categories .rmw-adv-heading .rm-container { text-align: left !important; padding-right: 84px; }

/* section icon */
.rfc-three-col .rpa-ah-in::before,
.rfc-products .rpa-ah-in::before,
.rfc-posts .rpa-ah-in::before,
.rfc-videos .rpa-ah-in::before,
.rfc-categories .rpa-ah-in::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px;
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.rfc-three-col > .rmb-row-in > .rmb-col:nth-child(1) .rpa-ah-in::before,
.rfc-posts .rpa-ah-in::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236C3BD4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203l1.9%205.8H20l-4.7%203.4%201.8%205.8L12%2014.6%206.9%2018l1.8-5.8L4%208.8h6.1z%22%2F%3E%3C%2Fsvg%3E"); }
.rfc-three-col > .rmb-row-in > .rmb-col:nth-child(2) .rpa-ah-in::before,
.rfc-videos .rpa-ah-in::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236C3BD4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%224%22%20width%3D%2220%22%20height%3D%2216%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M10%209l5%203-5%203z%22%2F%3E%3C%2Fsvg%3E"); }
.rfc-three-col > .rmb-row-in > .rmb-col:nth-child(3) .rpa-ah-in::before,
.rfc-products .rpa-ah-in::before,
.rfc-categories .rpa-ah-in::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236C3BD4%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%207h12l-1%2013H7z%22%2F%3E%3Cpath%20d%3D%22M9%207a3%203%200%200%201%206%200%22%2F%3E%3C%2Fsvg%3E"); }

/* "View all" sits on the heading line, right aligned */
.rfc-three-col .rmw-adv-button,
.rfc-products .rmw-adv-button,
.rfc-posts .rmw-adv-button,
.rfc-videos .rmw-adv-button,
.rfc-categories .rmw-adv-button {
	position: absolute !important; top: 2px; right: 0;
	width: auto !important; margin-top: 0 !important; z-index: 4;
}
.rfc-three-col .rmw-adv-button .rm-container,
.rfc-products .rmw-adv-button .rm-container,
.rfc-posts .rmw-adv-button .rm-container,
.rfc-videos .rmw-adv-button .rm-container,
.rfc-categories .rmw-adv-button .rm-container { padding: 0 !important; text-align: right !important; }
.rfc-three-col .rmw-adv-button .rm-btn,
.rfc-products .rmw-adv-button .rm-btn,
.rfc-posts .rmw-adv-button .rm-btn,
.rfc-videos .rmw-adv-button .rm-btn,
.rfc-categories .rmw-adv-button .rm-btn {
	background: none !important; border: 0 !important; box-shadow: none !important;
	padding: 0 !important; min-height: 0 !important; outline: none !important;
	color: var(--rm-primary, #6C3BD4) !important; font-weight: 700; font-size: 13px; text-decoration: none;
}
.rfc-three-col .rmw-adv-button .rm-btn:hover,
.rfc-products .rmw-adv-button .rm-btn:hover,
.rfc-posts .rmw-adv-button .rm-btn:hover,
.rfc-videos .rmw-adv-button .rm-btn:hover,
.rfc-categories .rmw-adv-button .rm-btn:hover { text-decoration: underline; }
.rfc-three-col .rmw-adv-button .rm-btn svg,
.rfc-products .rmw-adv-button .rm-btn svg,
.rfc-posts .rmw-adv-button .rm-btn svg,
.rfc-videos .rmw-adv-button .rm-btn svg,
.rfc-categories .rmw-adv-button .rm-btn svg { display: none; }

/* strip the widgets' own inner heading / top padding so column tops line up */
.rfc-three-col .rrx-head { display: none !important; }
.rfc-three-col .rrx-projects,
.rfc-three-col .rrx-projects .rm-container,
.rfc-three-col .rmw-posts-grid .rm-container,
.rfc-three-col .rmw-products-grid .rm-container { padding-top: 0 !important; }

/* ----------------------------------------------------------------- cards */
.rfc-three-col .rm-card,
.rfc-posts .rm-card,
.rfc-three-col .rm-pcard,
.rfc-products .rm-pcard {
	background: #fff; border: 1px solid rgba(20,16,40,.10); border-radius: 14px; overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.rfc-three-col .rm-card:hover,
.rfc-posts .rm-card:hover,
.rfc-three-col .rm-pcard:hover,
.rfc-products .rm-pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,16,40,.13); }
.rfc-three-col .rm-pcard-media img,
.rfc-products .rm-pcard-media img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
/* this storefront takes orders through the cart, not WhatsApp */
.rfc-three-col .rm-pcard a[href*="wa.me"],
.rfc-products .rm-pcard a[href*="wa.me"] { display: none !important; }

/* compact, height-balanced columns (matches the approved reference composition) */
.rfc-three-col .rm-grid.rm-posts { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 14px !important; }
.rfc-three-col .rm-grid.rm-products { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 12px !important; }
@media (max-width: 1100px) {
	.rfc-three-col .rm-grid.rm-posts { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
	.rfc-three-col .rm-grid.rm-products { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 760px) {
	.rfc-three-col .rm-grid.rm-posts { grid-template-columns: 1fr !important; }
	.rfc-three-col .rm-grid.rm-products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
.rfc-three-col .rm-post { font-size: 12px; }
.rfc-three-col .rm-post h3,
.rfc-three-col .rm-post .rm-card-title { font-size: 13px !important; line-height: 1.3 !important; margin: 6px 0 4px !important; }
.rfc-three-col .rm-post p {
	font-size: 11.5px !important; line-height: 1.45 !important;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rfc-three-col .rm-post img { aspect-ratio: 16/10; object-fit: cover; }
.rfc-three-col .rm-pcard .rm-pcard-body { padding: 8px 9px 10px !important; }
.rfc-three-col .rm-pcard-title,
.rfc-three-col .rm-pcard h3 { font-size: 11.5px !important; line-height: 1.3 !important; }
.rfc-three-col .rm-pcard-cat { font-size: 9.5px !important; letter-spacing: .06em; }
.rfc-three-col .rm-price { font-size: 12.5px !important; font-weight: 800; }
.rfc-three-col .rm-pcard .rm-btn { width: 100%; font-size: 10.5px !important; min-height: 28px !important; padding: 0 8px !important; }
.rfc-three-col .rm-pcard .rm-btn svg { width: 12px; height: 12px; }
.rfc-three-col .rm-badge { font-size: 9px !important; padding: 2px 6px !important; }

/* ------------------------------------------------------------- video cards */
.rfc-three-col .rrx-project-card,
.rfc-videos .rrx-project-card { border-radius: 12px; overflow: hidden; }
.rfc-three-col .rrx-project-overlay {
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 12px 12px 14px !important;
	background: linear-gradient(180deg, rgba(8,6,18,0) 38%, rgba(8,6,18,.72) 68%, rgba(8,6,18,.93) 100%) !important;
}
.rfc-three-col .rrx-project-overlay h3 {
	font-size: 13px !important; line-height: 1.3 !important; letter-spacing: -.01em;
	margin: 0 0 22px !important; text-shadow: 0 1px 8px rgba(0,0,0,.6);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rfc-three-col .rrx-project-overlay > span {
	position: absolute; bottom: 10px; right: 10px; order: -1;
	max-width: 70px; overflow: hidden; white-space: nowrap;
	font-size: 10px !important; letter-spacing: .08em; opacity: .95;
	background: rgba(8,6,18,.82); padding: 2px 6px; border-radius: 5px;
}
.rfc-three-col .rrx-btn { display: none !important; }
.rfc-three-col .rrx-project-card::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
	border-radius: 50%; z-index: 3; opacity: .95; pointer-events: none; transition: transform .25s ease;
	background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%236C3BD4%22%3E%3Cpath%20d%3D%22M9%207l9%205-9%205z%22%2F%3E%3C%2Fsvg%3E") center/18px no-repeat;
}
.rfc-three-col .rrx-project-card:hover::after { transform: scale(1.12); }

/* ---------------------------------------------------------------- rhythm */
.rfc-three-col { padding-top: 72px !important; padding-bottom: 78px !important; }
.rfc-features {
	padding-top: 44px !important; padding-bottom: 44px !important;
	border-top: 1px solid rgba(20,16,40,.08); border-bottom: 1px solid rgba(20,16,40,.08);
}
.rfc-categories,
.rfc-gallery { padding-top: 76px !important; padding-bottom: 80px !important; }

/* ---------------------------------------------------------------- header */
.rfc-nav { padding-top: 18px !important; padding-bottom: 18px !important; }
.rfc-nav .rmw-site-logo .rm-logo-text { font-size: 26px !important; letter-spacing: -.02em; }
.rfc-nav .rm-btn { min-height: 40px; font-size: 13px; padding: 0 16px; }
.rfc-nav .rm-btn svg { display: none; }