/* ============================================================================
   mesenaatti.me — mobile.css   (campaign + pre-payment views)
   ----------------------------------------------------------------------------
   Drop-in stylesheet. Load AFTER /css/style.css. Targets the real DOM emitted
   by campaign-page.vue + reward-index.vue + the pre-payment order form.
   Scoped to body[class*="campaign-id-"] so it only affects individual
   campaign pages (the listing / info pages are untouched).

   Companion script (campaign.html): a ~15 line snippet that injects a
   single hamburger <button> into .col1.navi at runtime. That's the only
   DOM addition — everything else is pure CSS over the existing markup.

   Strategy:
   1. Below 768px collapse Skeleton's .col1 columns to a single stack and
	  use display:contents + flex order to pull the statusbox up between
	  the headline and the long description (biggest UX win on this page).
   2. Top nav becomes a hamburger drawer (toggled via [data-menu-open]).
   3. Social share strip is removed — share belongs on its own tap path.
   4. Statusbox: funding is the hero number, backers + days are smaller
	  siblings on a second row, dark canvas keeps its signature look.
   5. Rewards: empty/broken images don't reserve full-bleed space; rows
	  get tight padding so the "all empty" case never happens.
   6. Pre-payment form: labels stack above 16px inputs, all full-width,
	  brand-coloured submit pinned at bottom like the campaign CTA.
   ============================================================================ */


/* ============================================================================
   1. PHONE BREAKPOINT
   ============================================================================ */
@media (max-width: 768px) {

  /* ---------------------------------------------------------------------
	 1.1  Page chrome
	 --------------------------------------------------------------------- */
  body[class*="campaign-id-"] {
	background: #fff;
	margin: 0;
	/* Room for the fixed bottom CTA (campaign + pre-payment both use it) */
	padding-bottom: 88px !important;
  }

  body[class*="campaign-id-"] #wrapper,
  body[class*="campaign-id-"] #app,
  body[class*="campaign-id-"] #body-emulate {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
  }

  /* ---------------------------------------------------------------------
	 1.2  Reorder root: pull statusbox up between headline & long body
	 --------------------------------------------------------------------- */
  body[class*="campaign-id-"] #body-emulate > div,
  body[class*="campaign-id-"] [id="body-emulate"] > div {
	display: flex !important;
	flex-direction: column !important;
  }
  body[class*="campaign-id-"] .leftside.view,
  body[class*="campaign-id-"] .leftside.view > .post {
	display: contents !important;
  }

  /* Reading order on a phone — lower number renders earlier */
  body[class*="campaign-id-"] .col1.logo              { order: -1; }
  body[class*="campaign-id-"] .col1.navi              { order: 0; }
  body[class*="campaign-id-"] .col1.navi2             { order: 1; }
  body[class*="campaign-id-"] .oembedall-container    { order: 10; }
  body[class*="campaign-id-"] .main_image             { order: 11; }
  body[class*="campaign-id-"] .post > h1              { order: 12; }
  body[class*="campaign-id-"] .post > .ingress        { order: 13; }
  body[class*="campaign-id-"] .statusbox.planb        { order: 14; }
  body[class*="campaign-id-"] .post > .info           { order: 15; }
  body[class*="campaign-id-"] #social_share_wrapper   { order: 16; }
  body[class*="campaign-id-"] .post > .entry          { order: 20; }
  body[class*="campaign-id-"] .profilebox             { order: 30; }
  body[class*="campaign-id-"] .rewards_container      { order: 40; }
  body[class*="campaign-id-"] .col2.mesenoi           { order: 41; }
  body[class*="campaign-id-"] .col1.wide.vastikekuva  { order: 42; }
  body[class*="campaign-id-"] .login.col2             { order: 43; }
  body[class*="campaign-id-"] .col1.fundu,
  body[class*="campaign-id-"] .col1.match,
  body[class*="campaign-id-"] .col1.osbu              { order: 45; }
  body[class*="campaign-id-"] #main_container         { order: 50; }
  body[class*="campaign-id-"] .col1.rotate            { order: 99; }

  /* ---------------------------------------------------------------------
	 1.3  Reset all .col1 fixed-width boxes to fluid stacks
	 --------------------------------------------------------------------- */
  body[class*="campaign-id-"] .col1,
  body[class*="campaign-id-"] .col1.stretch,
  body[class*="campaign-id-"] .col1.right,
  body[class*="campaign-id-"] .col1.project_white_box,
  body[class*="campaign-id-"] .col1.fundu,
  body[class*="campaign-id-"] .col1.match,
  body[class*="campaign-id-"] .col1.logo,
  body[class*="campaign-id-"] .col1.rotate {
	position: static !important;
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
  }

  body[class*="campaign-id-"] .leftside.view {
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
  }


  /* =====================================================================
	 2. TOP NAV  —  HAMBURGER DRAWER
	 ---------------------------------------------------------------------
	 The companion script in campaign.html prepends one button to .col1.navi:
	   <button class="mm-hamburger" aria-label="Avaa valikko"></button>
	 and toggles .col1.navi[data-menu-open] on click. Everything below is
	 pure CSS over that single DOM addition + the original WordPress menu.
	 ===================================================================== */
  body[class*="campaign-id-"] .col1.navi {
	background: #fff;
	border-bottom: 1px solid #e5e4dd;
	padding: 0;
	margin: 0 !important;
	position: sticky !important;     /* beats the .col1 reset below */
	top: 0;
	z-index: 50;
	/* A 56px-tall bar with a flex layout for the visible chrome; the
	   drawer overlays underneath via position:absolute, so its height
	   never feeds back into the bar's height. */
	display: flex;
	align-items: center;
	height: 56px;
	box-sizing: border-box;
  }

  /* Hamburger button (injected by mobile-menu.js) */
  body[class*="campaign-id-"] .col1.navi .mm-hamburger {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	order: 1;
  }
  body[class*="campaign-id-"] .col1.navi .mm-hamburger::before,
  body[class*="campaign-id-"] .col1.navi .mm-hamburger::after,
  body[class*="campaign-id-"] .col1.navi .mm-hamburger > span {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	height: 2px;
	background: #1a1a1a;
	transition: transform 180ms cubic-bezier(.2,.7,.2,1),
				opacity   120ms linear,
				top       180ms cubic-bezier(.2,.7,.2,1);
  }
  body[class*="campaign-id-"] .col1.navi .mm-hamburger::before { top: 19px; }
  body[class*="campaign-id-"] .col1.navi .mm-hamburger > span  { top: 27px; }
  body[class*="campaign-id-"] .col1.navi .mm-hamburger::after  { top: 35px; }

  body[class*="campaign-id-"] .col1.navi[data-menu-open] .mm-hamburger::before {
	top: 27px; transform: rotate(45deg);
  }
  body[class*="campaign-id-"] .col1.navi[data-menu-open] .mm-hamburger > span {
	opacity: 0;
  }
  body[class*="campaign-id-"] .col1.navi[data-menu-open] .mm-hamburger::after {
	top: 27px; transform: rotate(-45deg);
  }

  /* "Mesenaatti.me" wordmark — centred between hamburger and lang */
  body[class*="campaign-id-"] .col1.navi::before {
	content: "Mesenaatti.me";
	order: 2;
	flex: 1 1 auto;
	font-family: "Adelle Basic", "Zilla Slab", Georgia, serif;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #1a1a1a;
	text-align: center;
  }

  /* Language switcher — thin row on the top right */
  body[class*="campaign-id-"] .col1.navi .langmenu {
	order: 3;
	flex: 0 0 auto;
	padding: 0 12px 0 0;
	border: 0;
	display: flex;
	align-items: center;
	height: 56px;
  }
  body[class*="campaign-id-"] .qtrans_language_chooser {
	display: flex;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
  }
  body[class*="campaign-id-"] .qtrans_language_chooser li { display: inline; }
  body[class*="campaign-id-"] .qtrans_language_chooser li a { text-decoration: none; color: #6b6b67; }
  body[class*="campaign-id-"] .qtrans_language_chooser li.active a { color: #ec6f2b; }

  /* Drawer overlays the page below the 56px bar — absolute so its
	 height never feeds back into the sticky bar's height. We animate
	 opacity + scaleY (not max-height) so the layout settles instantly
	 and the drawer reveals smoothly without the well-known "max-height
	 transition stuck at 0" gotcha when the property is interpolated
	 against a viewport-relative end value. */
  body[class*="campaign-id-"] .col1.navi .menu-menu-container {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 0;
	overflow: hidden;
	background: #fff;
	border-top: 1px solid transparent;
	opacity: 0;
	transform: scaleY(0);
	transform-origin: top center;
	transition: opacity 160ms cubic-bezier(.2,.7,.2,1),
				transform 220ms cubic-bezier(.2,.7,.2,1);
	pointer-events: none;
  }
  body[class*="campaign-id-"] .col1.navi[data-menu-open] .menu-menu-container {
	max-height: 80vh;
	overflow-y: auto;
	border-top-color: #e5e4dd;
	opacity: 1;
	transform: scaleY(1);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	pointer-events: auto;
  }

  body[class*="campaign-id-"] .col1.navi .menu-menu-container ul.nav,
  body[class*="campaign-id-"] .col1.navi ul#menu-menu.nav {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	width: 100% !important;
  }
  body[class*="campaign-id-"] .col1.navi .menu-menu-container ul.nav > div { display: contents; }
  body[class*="campaign-id-"] .col1.navi .menu-menu-container ul.nav .menu-item {
	flex: 0 0 auto !important;
	float: none !important;
	display: block !important;
	margin: 0 !important;
	border-top: 1px solid #f1f0eb;
  }
  body[class*="campaign-id-"] .col1.navi .menu-menu-container ul.nav .menu-item:first-child {
	border-top: 0;
  }
  body[class*="campaign-id-"] .col1.navi .menu-menu-container ul.nav .menu-item > a {
	display: flex !important;
	align-items: center;
	padding: 16px 20px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #1a1a1a !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	text-decoration: none !important;
	min-height: 56px;
	border-left: 3px solid transparent;
  }
  body[class*="campaign-id-"] .col1.navi .menu-menu-container ul.nav .menu-item > a:active {
	background: #faf9f5;
  }
  body[class*="campaign-id-"] .col1.navi .menu-menu-container ul.nav .current-menu-item > a {
	color: #ec6f2b !important;
	border-left-color: #ec6f2b;
  }

  /* Scrim/dimmer for content under the open drawer */
  body[class*="campaign-id-"] .col1.navi[data-menu-open]::after {
	content: "";
	position: fixed;
	inset: 56px 0 0 0;
	background: rgba(20, 20, 20, 0.4);
	z-index: -1;
	pointer-events: none;
  }


  /* =====================================================================
	 3. HERO  —  full-bleed image / video
	 ===================================================================== */
  body[class*="campaign-id-"] .main_image,
  body[class*="campaign-id-"] .oembedall-container {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #000;
  }
  body[class*="campaign-id-"] .main_image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	aspect-ratio: 16 / 10;
	object-fit: cover;
  }


  /* =====================================================================
	 4. .post  —  title + dates + ingress + long body
	 ===================================================================== */
  body[class*="campaign-id-"] .post > h1 {
	margin: 20px 16px 8px !important;
	padding: 0 !important;
	font-size: 26px !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em;
	text-wrap: balance;
  }

  body[class*="campaign-id-"] .post > .ingress {
	margin: 0 16px 16px !important;
	padding: 0 !important;
	font-size: 17px !important;
	line-height: 1.5 !important;
	color: #3a3a36;
  }

  body[class*="campaign-id-"] .post > .info {
	margin: 12px 16px 0 !important;
	padding: 12px 0 !important;
	border-top: 1px solid #e5e4dd;
	border-bottom: 1px solid #e5e4dd;
	font-size: 13px;
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px 18px;
	width: auto !important;
  }
  body[class*="campaign-id-"] .post > .info p {
	margin: 0 !important;
	padding: 0 !important;
	color: #4a4a48;
  }
  body[class*="campaign-id-"] .post > .info p br { display: none; }
  body[class*="campaign-id-"] .post > .info p span {
	font-weight: 700;
	color: #111;
	margin-left: 6px;
  }

  body[class*="campaign-id-"] .post > .entry {
	margin: 24px 16px 0 !important;
	padding: 0 !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: #1c1c1c;
  }
  body[class*="campaign-id-"] .post > .entry p { margin: 0 0 14px; text-wrap: pretty; }
  body[class*="campaign-id-"] .post > .entry h2 { font-size: 20px; margin: 24px 0 10px; }
  body[class*="campaign-id-"] .post > .entry h3 { font-size: 17px; margin: 20px 0 8px; }
  body[class*="campaign-id-"] .post > .entry img,
  body[class*="campaign-id-"] .post > .entry iframe {
	max-width: 100% !important;
	height: auto !important;
  }
  body[class*="campaign-id-"] .post > .entry > p > img,
  body[class*="campaign-id-"] .post > .entry > figure > img {
	width: calc(100% + 32px) !important;
	margin-left: -16px !important;
	margin-right: -16px !important;
	max-width: none !important;
  }


  /* =====================================================================
	 5. SOCIAL SHARE  —  removed on mobile
	 ---------------------------------------------------------------------
	 Per UX brief: share belongs on its own tap path (the native share
	 sheet, reached from the bottom CTA's secondary action), not as a
	 prominent strip above the fold. The buttons stay in the DOM so any
	 desktop layout that still consumes them isn't broken.
	 ===================================================================== */
  body[class*="campaign-id-"] #social_share_wrapper { display: none !important; }


  /* =====================================================================
	 6. STATUSBOX  —  refined top-of-fold summary
	 ---------------------------------------------------------------------
	 The DOM is three <h3> blocks in this order:
	   .backers   — number + "Mesenaattia"
	   .funding   — amount €  + "Tavoite/Minimitavoite"
	   (unclassed) days-left number + "Päivää jäljellä"

	 Production has all three stats at equal weight, stacked vertically
	 with cyan small-caps labels and hairline dividers. We respect that:
	 polish typography, faint #3a3936 divider between blocks, dark
	 canvas + signature offset shadow, CTA hoisted to fixed bottom bar.
	 ===================================================================== */
  body[class*="campaign-id-"] .col1.project_white_box.statusbox.planb {
	background: #282828 !important;
	color: #fff !important;
	margin: 16px !important;
	padding: 20px 18px !important;
	border: 0 !important;
	box-shadow: 0 2px 0 0 #1a1a1a !important;   /* signature hard offset shadow */
	display: block !important;
  }

  /* Each stat block: stacked number + caps label, with a hairline
	 bottom divider separating it from the next block. */
  body[class*="campaign-id-"] .statusbox.planb .backers,
  body[class*="campaign-id-"] .statusbox.planb .funding,
  body[class*="campaign-id-"] .statusbox.planb > h3:not([class]) {
	display: block !important;
	margin: 0 !important;
	padding: 14px 0 !important;
	color: #fff !important;
	text-align: left !important;
	border: 0 !important;
	border-bottom: 1px solid #3a3936 !important;
	font-family: "Adelle Basic", "Zilla Slab", Georgia, serif !important;
	font-size: 28px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: -0.005em;
	font-variant-numeric: tabular-nums;
  }
  /* First block sits flush against the top padding */
  body[class*="campaign-id-"] .statusbox.planb .backers { padding-top: 0 !important; }

  /* Number — cyan inside .stat wrapper and on bare h3 text */
  body[class*="campaign-id-"] .statusbox.planb .stat,
  body[class*="campaign-id-"] .statusbox.planb .stat .number {
	display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: #00bcca !important;
	background: transparent !important;
  }
  body[class*="campaign-id-"] .statusbox.planb > h3:not([class]) {
	color: #00bcca !important;
  }

  /* Cyan small-caps label — break to its own line */
  body[class*="campaign-id-"] .statusbox.planb .backers > strong,
  body[class*="campaign-id-"] .statusbox.planb .funding > strong,
  body[class*="campaign-id-"] .statusbox.planb > h3:not([class]) > strong {
	display: block !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-family: var(--font-sans, "Source Sans 3", system-ui, sans-serif) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: #00bcca !important;
  }
  /* Inline editable spans inside the funding label stay inline so
	 "Tavoite 2900 €" / "Minimitavoite 1800 €" each render on one line. */
  body[class*="campaign-id-"] .statusbox.planb .funding > strong .campaignData,
  body[class*="campaign-id-"] .statusbox.planb .funding > strong .editableSettings,
  body[class*="campaign-id-"] .statusbox.planb .funding > strong span {
	display: inline !important;
	color: inherit !important;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font: inherit !important;
  }
  body[class*="campaign-id-"] .statusbox.planb .funding > strong br {
	display: block;
	content: "";
  }

  /* Drop the divider on the last stat block (days-left) — disclaimer
	 follows below without a double rule. */
  body[class*="campaign-id-"] .statusbox.planb > h3:not([class]):last-of-type {
	border-bottom: 0 !important;
  }

  /* Disclaimer paragraph */
  body[class*="campaign-id-"] .statusbox.planb > p {
	margin: 14px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: #9c9c96 !important;
	font-size: 12px !important;
	line-height: 1.55 !important;
  }
  body[class*="campaign-id-"] .statusbox.planb > p br { display: none; }

  /* Vote/like row, if present */
  body[class*="campaign-id-"] .statusbox.planb .like-feature-row {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin: 14px 0 0 !important;
	padding: 14px 0 0 !important;
	border-top: 1px solid #3a3936;
  }
  body[class*="campaign-id-"] .statusbox.planb .like-icon { font-size: 22px; }

  /* The inline "Rahoita" anchor — hoisted to fixed bottom CTA */
  body[class*="campaign-id-"] .statusbox.planb > a {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 1000 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 18px 16px !important;
	padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
	background: #ec6f2b !important;
	color: #fff !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	text-decoration: none !important;
	border-top: 2px solid #111 !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18) !important;
	min-height: 56px !important;
	width: auto !important;
	border-radius: 0 !important;
  }
  body[class*="campaign-id-"] .statusbox.planb > a:active { background: #d35a18 !important; }
  body[class*="campaign-id-"] .statusbox.planb > a.nonactive {
	background: #6b6b67 !important;
	pointer-events: none;
  }


  /* =====================================================================
	 7. CREATOR PROFILE BOX
	 ===================================================================== */
  body[class*="campaign-id-"] .col1.project_white_box.profilebox {
	margin: 24px 16px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
  }
  body[class*="campaign-id-"] .profilebox .creator_pic {
	width: 100% !important;
	height: auto !important;
	margin: 0 0 16px !important;
	aspect-ratio: 4 / 3;
	overflow: hidden;
  }
  body[class*="campaign-id-"] .profilebox .creator_pic img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
  }
  body[class*="campaign-id-"] .profilebox h2 {
	font-size: 20px !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	color: #111 !important;
	text-transform: none !important;
  }
  body[class*="campaign-id-"] .profilebox > div + p,
  body[class*="campaign-id-"] .profilebox p {
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: #4a4a48 !important;
	margin: 0 0 10px !important;
  }
  body[class*="campaign-id-"] .profilebox .contact2 {
	display: inline-block !important;
	margin: 0 8px 0 0 !important;
  }


  /* =====================================================================
	 8. REWARDS  —  compact list
	 ---------------------------------------------------------------------
	 The legacy reward rows expect a fixed 4:3 image; many production
	 campaigns have rewards with no image (digital products) and the
	 reserved 4:3 area shows as a huge blank gap on mobile. We:
	   - hide image wrappers when the <img> has no src / loading errored
	   - drop the forced aspect ratio so present-but-tall images obey
		 their own ratio with a sensible cap
	   - tighten the row's vertical rhythm
	 ===================================================================== */
  body[class*="campaign-id-"] .col1.stretch.rewards_container {
	padding: 24px 16px 16px !important;
	margin: 0 !important;
	border-top: 1px solid #e5e4dd;
  }
  body[class*="campaign-id-"] .rewards_container > h1 {
	margin: 0 0 20px !important;
	font-size: 22px !important;
	padding: 0 !important;
	color: #00bcca;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-family: "Adelle Basic", "Zilla Slab", Georgia, serif;
  }
  body[class*="campaign-id-"] .rewards_container > div,
  body[class*="campaign-id-"] .rewards_container reward > div,
  body[class*="campaign-id-"] .rewards_container [class*="reward"] > div {
	display: block !important;
	float: none !important;
	width: auto !important;
	max-width: 100% !important;
  }

  /* The reward-image <p> wrapper */
  body[class*="campaign-id-"] .rewards_container > div > p:first-child,
  body[class*="campaign-id-"] .rewards_container > div p:has(> .vastikekuva) {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
  }

  /* Hide image slot entirely when there's nothing to show. We don't have
	 control over the markup, so we lean on attribute selectors and :has(). */
  body[class*="campaign-id-"] .rewards_container .vastikekuva:not([src]),
  body[class*="campaign-id-"] .rewards_container .vastikekuva[src=""],
  body[class*="campaign-id-"] .rewards_container .vastikekuva[src$="/"],
  body[class*="campaign-id-"] .rewards_container .vastikekuva[src*="placeholder"] {
	display: none !important;
  }
  body[class*="campaign-id-"] .rewards_container > div > p:first-child:has(.vastikekuva:not([src])),
  body[class*="campaign-id-"] .rewards_container > div > p:first-child:has(.vastikekuva[src=""]),
  body[class*="campaign-id-"] .rewards_container > div > p:first-child:has(.vastikekuva[src*="placeholder"]) {
	display: none !important;
  }

  body[class*="campaign-id-"] .rewards_container .vastikekuva {
	display: block !important;
	width: calc(100% + 32px) !important;     /* full-bleed inside 16px gutter */
	max-width: none !important;
	height: auto !important;
	aspect-ratio: auto !important;           /* respect natural ratio */
	max-height: 280px;
	object-fit: cover;
	object-position: center;
	margin: 0 -16px !important;
	background: #f3f2ec;                     /* paper tone if image is slow */
  }

  /* Reward heading & inline price */
  body[class*="campaign-id-"] .rewards_container h2 {
	font-size: 18px !important;
	line-height: 1.25 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	text-transform: none !important;
	color: #111 !important;
	font-family: "Adelle Basic", "Zilla Slab", Georgia, serif;
	font-weight: 600;
	text-wrap: balance;
  }
  body[class*="campaign-id-"] .rewards_container h2 br {
	display: block;
	content: "";
  }
  body[class*="campaign-id-"] .rewards_container > div > a > h2 {
	/* the wrapping <a> uses default colour, which is brand-orange on
	   mesenaatti — keep the heading near-black */
	color: #111 !important;
  }
  body[class*="campaign-id-"] .rewards_container > div > a {
	text-decoration: none !important;
	display: block;
  }
  /* The price appears after a <br> inside the h2. Style the trailing
	 text-node by making the whole h2 a flex column so the price drops
	 to its own line below the title. */
  body[class*="campaign-id-"] .rewards_container h2 {
	display: block;
  }

  body[class*="campaign-id-"] .rewards_container p.pre-wrap {
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: #3a3a36 !important;
	margin: 0 0 10px !important;
	white-space: pre-wrap !important;
  }
  body[class*="campaign-id-"] .rewards_container .product_info {
	font-size: 13px !important;
	color: #6b6b67 !important;
	margin: 0 0 12px !important;
  }

  body[class*="campaign-id-"] .rewards_container .button,
  body[class*="campaign-id-"] .rewards_container a.button {
	display: block !important;
	width: 100% !important;
	padding: 14px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	background: #ec6f2b !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	min-height: 48px !important;
	box-sizing: border-box;
  }
  body[class*="campaign-id-"] .rewards_container a.button:active { background: #d35a18 !important; }

  body[class*="campaign-id-"] .rewards_container hr {
	margin: 24px -16px !important;
	border: 0 !important;
	border-top: 1px solid #e5e4dd !important;
  }
  /* Last hr inside the container is decorative — drop it to avoid a
	 trailing rule colliding with the page background. */
  body[class*="campaign-id-"] .rewards_container > div:last-child hr,
  body[class*="campaign-id-"] .rewards_container > hr:last-child {
	display: none !important;
  }

  body[class*="campaign-id-"] .rewards_container .inactive { opacity: 0.5; }


  /* =====================================================================
	 9. PRE-PAYMENT / PLEDGE PAGE
	 ---------------------------------------------------------------------
	 Real production markup (pledge-page.vue + reward.vue):

	   <span id="main_container">
		 <pledge-page>
		   <div>
			 <reward-index>
			   <div>
				 <reward>
				   <div>                              ← single selected reward
					 <div class="col2 mesenoi">       ← title + price + desc
					   <h1>{{reward.title}}</h1>
					   <p class="price"><span>20</span> €</p>
					   <p class="pre-wrap">…desc…</p>
					 </div>
					 <div class="col1 wide vastikekuva">
					   <div class="productcard">
						 <div class="reward_image">
						   <img class="dz-image-preview">
						 </div>
					   </div>
					 </div>
				   </div>
				 </reward>
			   </div>
			 </reward-index>
			 <div class="login col2">                 ← "Tilaus." heading + form
			   <h1>Tilaus.</h1>
			   <form id="pledgeform">
				 <fieldset>
				   <label>Kappalemäärä</label>
				   <input class="pledge_meta pledge-field" name="quantity">
				   <p class="helpertext"></p>
				 </fieldset>
				 …
				 <input type="submit" class="mesenoi pledgeNow"
						value="Siirry maksusivulle"
						style="display:inline-block;width:250px;margin-top:40px;">
			   </form>
			 </div>
		   </div>
		 </pledge-page>
	   </span>

	 The submit has hardcoded inline styles (width:250px, margin-top:40px,
	 display:inline-block) — every override below must be `!important`.
	 Same goes for the birth-date selects which set inline width:20%.
	 ===================================================================== */

  /* Unwrap the Vue layers so the reward + form become direct flex items
	 under #body-emulate > div. */
  body[class*="campaign-id-"] #main_container,
  body[class*="campaign-id-"] pledge-page,
  body[class*="campaign-id-"] pledge-page > div,
  body[class*="campaign-id-"] reward-index,
  body[class*="campaign-id-"] reward-index > div,
  body[class*="campaign-id-"] reward-index > div > div[v-if],
  body[class*="campaign-id-"] reward,
  body[class*="campaign-id-"] reward > div {
	display: contents !important;
  }

  /* Pledge-page reward header — title, price, description */
  body[class*="campaign-id-"] .col2.mesenoi {
	margin: 16px !important;
	padding: 16px !important;
	width: auto !important;
	max-width: 100% !important;
	background: #faf9f5;
	border-left: 3px solid #ec6f2b;
	box-sizing: border-box;
  }
  body[class*="campaign-id-"] .col2.mesenoi > h1,
  body[class*="campaign-id-"] .col2.mesenoi > h1#title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: "Adelle Basic", "Zilla Slab", Georgia, serif;
	font-size: 22px !important;
	line-height: 1.15 !important;
	color: #111 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.005em;
	text-wrap: balance;
  }
  body[class*="campaign-id-"] .col2.mesenoi > p.price {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: "Adelle Basic", "Zilla Slab", Georgia, serif;
	font-size: 22px !important;
	line-height: 1 !important;
	color: #00bcca !important;
	font-weight: 600;
  }
  body[class*="campaign-id-"] .col2.mesenoi > p.pre-wrap,
  body[class*="campaign-id-"] .col2.mesenoi > p.campaignData {
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: #4a4a48 !important;
	white-space: pre-wrap !important;
  }
  body[class*="campaign-id-"] .col2.mesenoi > p.ingress { display: none; }

  /* Reward image block (.col1.wide.vastikekuva is the wrapper here, not
	 the <img>) — sits under the reward header on mobile. Hide entirely
	 when no image is loaded (image_path empty → src is a placeholder). */
  body[class*="campaign-id-"] .col1.wide.vastikekuva {
	margin: 0 16px 16px !important;
	padding: 0 !important;
	width: auto !important;
	max-width: 100% !important;
  }
  body[class*="campaign-id-"] .col1.wide.vastikekuva .productcard {
	width: 100% !important;
	max-width: 100% !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
  }
  body[class*="campaign-id-"] .col1.wide.vastikekuva .reward_image {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
	max-height: 280px;
	overflow: hidden;
	background: #f3f2ec;
  }
  body[class*="campaign-id-"] .col1.wide.vastikekuva .reward_image img,
  body[class*="campaign-id-"] .col1.wide.vastikekuva img.dz-image-preview {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: 280px;
	object-fit: cover;
  }
  /* Collapse the whole image block when the src never loaded a real image */
  body[class*="campaign-id-"] .col1.wide.vastikekuva:has(.reward_image img:not([src])),
  body[class*="campaign-id-"] .col1.wide.vastikekuva:has(.reward_image img[src=""]),
  body[class*="campaign-id-"] .col1.wide.vastikekuva:has(.reward_image img[src*="placeholder"]) {
	display: none !important;
  }

  /* Order-form container */
  body[class*="campaign-id-"] .login.col2 {
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	float: none !important;
	box-sizing: border-box;
  }

  /* "Tilaus." heading */
  body[class*="campaign-id-"] .login.col2 > h1 {
	margin: 8px 16px 16px !important;
	padding: 0 0 12px !important;
	border-bottom: 2px solid #00bcca;
	font-family: "Adelle Basic", "Zilla Slab", Georgia, serif;
	font-size: 26px !important;
	line-height: 1 !important;
	color: #ec6f2b !important;
	text-transform: none !important;
	letter-spacing: -0.005em;
  }

  /* The form itself */
  body[class*="campaign-id-"] #pledgeform {
	margin: 0 !important;
	padding: 0 0 16px !important;
	width: auto !important;
  }

  /* Each fieldset row — label, input, helpertext, optional error label */
  body[class*="campaign-id-"] #pledgeform fieldset {
	display: block !important;
	width: auto !important;
	margin: 0 16px 14px !important;
	padding: 0 !important;
	border: 0 !important;
  }
  body[class*="campaign-id-"] #pledgeform fieldset > label:not(.error) {
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1a1a1a !important;
	text-align: left !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
  }

  /* Helper + error rows */
  body[class*="campaign-id-"] #pledgeform fieldset > p.helpertext {
	margin: 4px 0 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #6b6b67 !important;
  }
  body[class*="campaign-id-"] #pledgeform fieldset > p.helpertext:empty { display: none; }
  body[class*="campaign-id-"] #pledgeform fieldset > label.error {
	display: block !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #c12d2d !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
  }

  /* Inputs / selects / textareas — including .pledge-field and the
	 credentials-modal .form-control which share the same look. */
  body[class*="campaign-id-"] #pledgeform input.pledge-field,
  body[class*="campaign-id-"] #pledgeform input[type="text"],
  body[class*="campaign-id-"] #pledgeform input[type="email"],
  body[class*="campaign-id-"] #pledgeform input[type="tel"],
  body[class*="campaign-id-"] #pledgeform input[type="number"],
  body[class*="campaign-id-"] #pledgeform input[type="password"],
  body[class*="campaign-id-"] #pledgeform select,
  body[class*="campaign-id-"] #pledgeform textarea {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 14px 12px !important;
	min-height: 48px !important;
	font-family: inherit !important;
	font-size: 16px !important;             /* prevents iOS zoom-on-focus */
	line-height: 1.3 !important;
	color: #1a1a1a !important;
	background: #eaf6f8 !important;
	border: 1px solid #c7e2e7 !important;
	border-radius: 0 !important;
	-webkit-appearance: none;
	appearance: none;
	float: none !important;
	transition: border-color 160ms cubic-bezier(.2,.7,.2,1),
				background-color 160ms cubic-bezier(.2,.7,.2,1);
  }
  body[class*="campaign-id-"] #pledgeform input:focus,
  body[class*="campaign-id-"] #pledgeform select:focus,
  body[class*="campaign-id-"] #pledgeform textarea:focus {
	outline: 0;
	background: #fff !important;
	border-color: #00bcca !important;
	box-shadow: 0 0 0 3px rgba(0, 188, 202, 0.25) !important;
  }
  body[class*="campaign-id-"] #pledgeform input.error,
  body[class*="campaign-id-"] #pledgeform input[class*="error"] {
	border-color: #c12d2d !important;
	background: #fdf3f3 !important;
  }

  /* Custom select caret — defeat the native chevron, draw our own */
  body[class*="campaign-id-"] #pledgeform select {
	padding-right: 38px !important;
	background-image:
	  linear-gradient(45deg, transparent 50%, #1a1a1a 50%),
	  linear-gradient(135deg, #1a1a1a 50%, transparent 50%);
	background-position:
	  calc(100% - 18px) 22px,
	  calc(100% - 12px) 22px;
	background-size: 6px 6px;
	background-repeat: no-repeat;
	background-color: #eaf6f8 !important;
  }

  /* Birth-date row — three selects with inline `width: 20%` from the
	 template. Stack them as a 3-col grid that fills the row. */
  body[class*="campaign-id-"] #pledgeform fieldset:has(select[name="birth_year"]) {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 8px;
	row-gap: 6px;
  }
  body[class*="campaign-id-"] #pledgeform fieldset:has(select[name="birth_year"]) > label {
	grid-column: 1 / -1;
  }
  body[class*="campaign-id-"] #pledgeform fieldset:has(select[name="birth_year"]) > select {
	width: auto !important;     /* the inline 20% gets overridden because of !important */
  }
  body[class*="campaign-id-"] #pledgeform fieldset:has(select[name="birth_year"]) > p.helpertext,
  body[class*="campaign-id-"] #pledgeform fieldset:has(select[name="birth_year"]) > label.error,
  body[class*="campaign-id-"] #pledgeform fieldset:has(select[name="birth_year"]) > br {
	grid-column: 1 / -1;
  }
  /* Inline `width: 50%` on the country & nationality selects */
  body[class*="campaign-id-"] #pledgeform select[name="residence"],
  body[class*="campaign-id-"] #pledgeform select[name="nationality"] {
	width: 100% !important;
  }

  body[class*="campaign-id-"] #pledgeform textarea {
	min-height: 120px !important;
	resize: vertical;
  }

  /* The submit button has hardcoded inline `style="display:inline-block;
	 width:250px;margin-top:40px;"` — we mash it into a fixed bottom CTA. */
  body[class*="campaign-id-"] #pledgeform input[type="submit"].pledgeNow,
  body[class*="campaign-id-"] #pledgeform input[type="submit"].mesenoi,
  body[class*="campaign-id-"] #pledgeform input[type="submit"],
  body[class*="campaign-id-"] #pledgeform button[type="submit"] {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	z-index: 1000 !important;
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 18px 16px !important;
	padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
	background: #ec6f2b !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	border: 0 !important;
	border-top: 2px solid #111 !important;
	border-radius: 0 !important;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18) !important;
	min-height: 56px !important;
	box-sizing: border-box !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
  }
  body[class*="campaign-id-"] #pledgeform input[type="submit"]:active,
  body[class*="campaign-id-"] #pledgeform button[type="submit"]:active {
	background: #d35a18 !important;
  }
  body[class*="campaign-id-"] #pledgeform input[type="submit"]:disabled {
	background: #6b6b67 !important;
	cursor: not-allowed;
  }

  /* Stripe / Lemonway test-card debug tables — strictly DEV only, but
	 they bleed onto the live page in test mode. Hide and don't reserve
	 any space. */
  body[class*="campaign-id-"] .login.col2 table,
  body[class*="campaign-id-"] .login.col2 .Box-root {
	display: none !important;
  }

  /* Stripe Elements payment surface — give it the same gutter */
  body[class*="campaign-id-"] .stripe-element-payment {
	display: block;
	margin: 0 16px 16px !important;
  }
  body[class*="campaign-id-"] .stripe-pay-button {
	/* Use the same fixed-bottom treatment via the submit selectors above
	   by mirroring the rules here, since this button isn't a <input>. */
	position: fixed !important;
	left: 0; right: 0; bottom: 0;
	z-index: 1000;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 18px 16px;
	padding-bottom: calc(18px + env(safe-area-inset-bottom));
	background: #ec6f2b !important;
	color: #fff !important;
	font: 700 15px/1 inherit !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 0;
	border-top: 2px solid #111;
	border-radius: 0;
	min-height: 56px;
  }


  /* =====================================================================
	 10. CATEGORY SUB-NAV (.col1.navi2) — horizontal scroll strip
	 ---------------------------------------------------------------------
	 Lives directly under the main bar on the campaign / pledge views.
	 Compact chip row with horizontal scroll; no wrapping.
	 ===================================================================== */
  body[class*="campaign-id-"] .col1.navi2 {
	background: #faf9f5;
	border-bottom: 1px solid #e5e4dd;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
  }
  body[class*="campaign-id-"] .col1.navi2 .menu-sub-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
  }
  body[class*="campaign-id-"] .col1.navi2 .menu-sub-container::-webkit-scrollbar { display: none; }
  body[class*="campaign-id-"] .col1.navi2 ul.nav.nav2,
  body[class*="campaign-id-"] .col1.navi2 ul#menu-sub {
	display: flex !important;
	flex-wrap: nowrap !important;
	list-style: none !important;
	padding: 8px 12px !important;
	margin: 0 !important;
	gap: 8px;
	white-space: nowrap;
	width: max-content !important;
	min-width: 100% !important;
  }
  body[class*="campaign-id-"] .col1.navi2 ul.nav.nav2 .menu-item,
  body[class*="campaign-id-"] .col1.navi2 ul#menu-sub .menu-item {
	flex: 0 0 auto !important;
	float: none !important;
	margin: 0 !important;
  }
  body[class*="campaign-id-"] .col1.navi2 ul.nav.nav2 .menu-item > a,
  body[class*="campaign-id-"] .col1.navi2 ul#menu-sub .menu-item > a {
	display: inline-flex !important;
	align-items: center;
	padding: 8px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #4a4a48 !important;
	text-decoration: none !important;
	background: #fff;
	border: 1px solid #e5e4dd;
	text-transform: none !important;
	letter-spacing: 0 !important;
	min-height: 36px;
  }
  body[class*="campaign-id-"] .col1.navi2 .current-menu-item > a,
  body[class*="campaign-id-"] .col1.navi2 .active > a {
	color: #ec6f2b !important;
	border-color: #ec6f2b !important;
  }


  /* =====================================================================
	 11. TOP LOGO (.col1.logo) — hide on mobile, the bar has the wordmark
	 ===================================================================== */
  body[class*="campaign-id-"] .col1.logo:first-child,
  body[class*="campaign-id-"] #body-emulate > div > .col1.logo {
	display: none !important;
  }


  /* =====================================================================
	 12. FOOTER CARDS (logo / random placeholder) — keep small, centered
	 ===================================================================== */
  body[class*="campaign-id-"] .col1.rotate,
  body[class*="campaign-id-"] .col1.fundu,
  body[class*="campaign-id-"] .col1.match {
	margin: 24px auto !important;
	padding: 0 16px;
	text-align: center;
  }
  body[class*="campaign-id-"] .col1.rotate img,
  body[class*="campaign-id-"] .col1.fundu iframe,
  body[class*="campaign-id-"] .col1.match img {
	max-width: 60% !important;
	height: auto !important;
  }


  /* =====================================================================
	 13. Admin / edit panels — keep usable but secondary
	 ===================================================================== */
  body[class*="campaign-id-"] .control_panel,
  body[class*="campaign-id-"] .admin_panel {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 8px 16px !important;
	margin: 0 !important;
	position: static !important;
	width: auto !important;
  }
  body[class*="campaign-id-"] .control_panel .control-button,
  body[class*="campaign-id-"] .admin_panel .control-button {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 12px !important;
	font-size: 12px !important;
	min-height: 36px;
  }


  /* =====================================================================
	 14. Accessibility — visible focus on touch
	 ===================================================================== */
  body[class*="campaign-id-"] a:focus-visible,
  body[class*="campaign-id-"] button:focus-visible {
	outline: 3px solid #83cfd9 !important;
	outline-offset: 2px !important;
  }

}


/* ============================================================================
   15. NARROW PHONES (≤ 380px) — tighten the headline & numbers a touch
   ============================================================================ */
@media (max-width: 380px) {
  body[class*="campaign-id-"] .post > h1 { font-size: 23px !important; }
  body[class*="campaign-id-"] .statusbox.planb .funding .stat { font-size: 38px !important; }
  body[class*="campaign-id-"] .statusbox.planb .backers .stat .number { font-size: 22px !important; }
  body[class*="campaign-id-"] .statusbox.planb > h3:not([class]) { font-size: 22px !important; }
  body[class*="campaign-id-"] .rewards_container h2 { font-size: 17px !important; }
  body[class*="campaign-id-"] .col1.navi::before { font-size: 16px; }
}