/* Systema Sales Campaign blocks: front-end output. */

/* --- Shared --- */
/* Blocks fill the width of whatever they are nested in (accordion panel,
   column, group, etc.) rather than imposing their own fixed width. */
/* No width:100% here: as a block it already fills its container in normal flow,
   and forcing 100% made it stretch (and splay) when used as a flex child, e.g. in
   a banner Row. Content-sizing matches the block editor. */
.sscn-block { margin: 1.5em 0; max-width: 100%; box-sizing: border-box; font-family: var( --sscn-text-ff, inherit ); }
/* The optional block header follows the campaign Headings font unless the block sets its own. */
.sscn-bh { color: var( --sscn-hdr, var( --sscn-heading, inherit ) ); font-family: var( --sscn-hdr-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-hdr-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
}
.sscn-badge-draft { background: #f0f0f1; color: #50575e; }
.sscn-badge-scheduled { background: #fcf3d7; color: #8a6d00; }
.sscn-badge-active { background: #d7ead9; color: #1a662a; }
.sscn-badge-ended { background: #e6e6e6; color: #646970; }

/* --- Campaign products grid --- */
.sscn-products-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
	/* minmax(0,1fr) lets a column shrink below its content's min-content width, so
	   the grid never overflows the viewport on narrow screens (1fr = minmax(auto,1fr)
	   would force the add-to-cart controls' width and push cards off-screen). */
	grid-template-columns: repeat( var( --sscn-cols, 4 ), minmax( 0, 1fr ) );
}
.sscn-product-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sscn-pc-image { display: block; }
.sscn-pc-image img { width: 100%; height: auto; display: block; border-radius: 4px; background: #f3f3f3; }
.sscn-pc-type { font-size: .72em; text-transform: uppercase; letter-spacing: .04em; color: #777; }
.sscn-pc-name { font-weight: 600; line-height: 1.3; text-decoration: none; color: var( --sscn-pc-name, var( --sscn-text, inherit ) ); }
a.sscn-pc-name:hover { text-decoration: underline; }
.sscn-pc-price { color: var( --sscn-pc-price, var( --sscn-text, #1a1a1a ) ); }
.sscn-pc-price del { color: #999; font-weight: 400; margin-right: 4px; }
.sscn-pc-bundle { list-style: none; margin: 2px 0; padding: 8px 10px; border: 1px solid #eee; border-radius: 4px; background: #fafafa; display: flex; flex-direction: column; gap: 3px; }
.sscn-pc-bundle li { display: flex; justify-content: space-between; gap: 8px; font-size: .85em; }
.sscn-pc-bundle-name { color: #333; }
.sscn-pc-bundle-price { white-space: nowrap; color: #666; }
.sscn-pc-btn {
	margin-top: 4px;
	align-self: flex-start;
	display: inline-block;
	background: var( --sscn-pc-btn-bg, var( --sscn-button, #2e7d32 ) );
	color: var( --sscn-pc-btn-text, var( --sscn-button-text, #fff ) );
	border: 0;
	padding: 8px 14px;
	border-radius: 6px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.sscn-pc-btn:hover { filter: brightness( .93 ); color: var( --sscn-pc-btn-text, var( --sscn-button-text, #fff ) ); }
.sscn-pc-variform .variations_form { margin: 4px 0 0; }
.sscn-pc-variform .variations td { padding: 2px 0; }
.sscn-pc-variform .single_add_to_cart_button { margin-top: 6px; }
/* Lay the variation row out as flex so the label, selector and quantity stepper
   stay on one line (the selector shrinks to make room). */
.sscn-pc-variform .variations,
.sscn-pc-variform .variations tbody,
.sscn-pc-variform .variations tr { display: block; margin: 0; }
.sscn-pc-variform .variations tr { display: flex; align-items: center; gap: 8px; }
.sscn-pc-variform .variations th.label { padding: 0; flex: 0 0 auto; white-space: nowrap; font-weight: 600; }
.sscn-pc-variform .variations td.value { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 0; }
/* Style the native variation <select> to match the stepper / buttons (the theme
   leaves it as a tiny ~19px unstyled control otherwise). */
.sscn-pc-variform .variations td.value select {
	flex: 1 1 auto; min-width: 0; margin: 0;
	min-height: var( --sscn-pc-ctl-h, 42px ); padding: 6px 12px;
	border: 1px solid var( --sscn-border, #ccc ); border-radius: 6px;
	background: #fff; color: #1a1a1a; font-size: 1em; line-height: 1.3;
}
/* Clear link removed from the grid. */
.sscn-pc-variform .reset_variations { display: none !important; }
/* Variable products: keep the form full width, and lay its Add to cart button and
   the injected View product button inline, sharing one row. */
/* Reset the control font to a normal base: the campaign page's large inherited
   font would otherwise inflate the em-sized stepper, select and buttons. */
.sscn-pc-variform { flex: 1 1 100%; font-size: 1rem; }
.sscn-pc-variform .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 12px; }
/* Quantity is a +/- stepper, always on the page, inline with Add to cart. */
.sscn-pc-variform .quantity.sscn-qty-box { display: inline-flex !important; flex: 0 0 auto; align-items: stretch; height: auto; margin: 0; border: 1px solid var( --sscn-pc-btn-bg, var( --sscn-button, #2e7d32 ) ); border-radius: 6px; overflow: hidden; }
.sscn-qty-box input.qty,
.sscn-qty-box input[type="number"] { width: 48px; text-align: center; border: 0; background: #fff; color: #1a1a1a; font-size: 1em; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.sscn-qty-box input::-webkit-outer-spin-button,
.sscn-qty-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sscn-qty-step { width: 34px; border: 0; background: var( --sscn-pc-btn-bg, var( --sscn-button, #2e7d32 ) ); color: var( --sscn-pc-btn-text, var( --sscn-button-text, #fff ) ); font-size: 18px; line-height: 1; cursor: pointer; }
.sscn-qty-step:hover { filter: brightness( .93 ); }
/* Add to cart fills the rest of the quantity row; View product drops to its own line.
   flex-basis 0 so the theme's width:100% button does not force a wrap after qty. */
.sscn-pc-variform .single_add_to_cart_button { flex: 1 1 0; min-width: 0; margin: 0; text-align: center; justify-content: center; }
.sscn-pc-variform .sscn-pc-view--inline { flex: 1 1 100%; min-width: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
/* Normalise the theme's native Add to cart + injected View buttons to a compact,
   uniform height: the theme ships a ~100px-tall button, which stretched the whole
   quantity-stepper row. With this, the stepper + Add to cart line up on one row and
   View product sits full width on the row below. */
.sscn-pc-variform .single_add_to_cart_button,
.sscn-pc-variform .sscn-pc-view--inline {
	padding: 8px 14px; border-radius: 6px;
	font-size: 1em; line-height: 1.2;
}
.sscn-pc-variform .single_add_to_cart_button.sscn-shake { animation: sscn-shake .4s; }
@keyframes sscn-shake { 25% { transform: translateX( -4px ); } 75% { transform: translateX( 4px ); } }

/* Action area: add-to-cart / quantity stepper + a matching View product button,
   inline on one row and equal width. */
/* Reset the control font to a normal base for the whole action area (simple and
   variable alike): the campaign page's large inherited font would otherwise make
   "Add to cart" / "View product" wrap and balloon the buttons to ~100px tall. */
.sscn-pc-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 6px; font-size: 1rem; }
.sscn-pc-actions .sscn-pc-btn { margin-top: 0; align-self: stretch; text-align: center; }
/* Add-to-cart (or its stepper) takes the top row full width; View product drops
   to its own full-width row below — matching the variable-product layout, so in a
   narrow card the button labels never wrap and both rows stay a uniform height. */
.sscn-pc-actions > .sscn-pc-view,
.sscn-pc-actions > .sscn-pc-cart { flex: 1 1 100%; min-width: 0; }
/* Quantity stepper sits on the left (compact, natural width); Add to cart fills
   the rest of the row to its right, with a gap between the two. Mirrors the
   variable-product [qty] [Add to cart] layout. */
.sscn-pc-cart { display: flex; align-items: stretch; gap: 8px; }
.sscn-pc-cart .sscn-pc-add { flex: 1 1 auto; width: auto; }
.sscn-pc-cart.is-busy { opacity: .6; pointer-events: none; }
.sscn-pc-stepper { flex: 0 0 auto; width: auto; display: flex; align-items: stretch; border: 1px solid var( --sscn-pc-btn-bg, var( --sscn-button, #2e7d32 ) ); border-radius: 6px; overflow: hidden; }
.sscn-pc-stepper .sscn-pc-qty { flex: 1 1 auto; }
.sscn-pc-step { width: 34px; border: 0; background: var( --sscn-pc-btn-bg, var( --sscn-button, #2e7d32 ) ); color: var( --sscn-pc-btn-text, var( --sscn-button-text, #fff ) ); font-size: 18px; line-height: 1; cursor: pointer; }
.sscn-pc-step:hover { filter: brightness( .93 ); }
.sscn-pc-qty { width: 48px; text-align: center; border: 0; background: #fff; color: #1a1a1a; font-size: 1em; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.sscn-pc-qty::-webkit-outer-spin-button, .sscn-pc-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sscn-products-empty { color: #666; margin: 0; }
@media ( max-width: 600px ) {
	.sscn-products-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important; }
}
@media ( max-width: 480px ) {
	/* One column on phones: two cards of add-to-cart controls are too cramped. */
	.sscn-products-grid { grid-template-columns: 1fr !important; }
}

/* Banners (top/bottom auto-injected + the Campaign Banner block) lay their
   blocks out in a core Group/Row with "nowrap" (header + countdown +
   thermometer + button), which overflows the viewport on phones. Let those flex
   rows wrap on narrow screens so the blocks stack instead of being cut off.
   !important overrides the generated wp-container-core-group{flex-wrap:nowrap}. */
@media ( max-width: 600px ) {
	.sscn-banner .is-layout-flex,
	.wp-block-systema-sales-campaign-campaign-banner .is-layout-flex { flex-wrap: wrap !important; }
}

/* --- Funding thermometer --- */
.sscn-therm { max-width: 100%; }
.sscn-just-left { text-align: left; }
.sscn-just-center { text-align: center; }
.sscn-just-right { text-align: right; }
.sscn-therm-amount { color: var( --sscn-therm-amount, var( --sscn-text, inherit ) ); }
.sscn-therm-raised { font-size: 1.4em; font-weight: 700; }
.sscn-therm-goal { color: #666; font-size: .9em; }
.sscn-therm-pct-val { font-weight: 700; color: var( --sscn-therm-pct, var( --sscn-accent, #2e7d32 ) ); }
.sscn-therm-contrib { margin: 0; color: var( --sscn-therm-contrib, var( --sscn-muted, #444 ) ); font-weight: 600; font-size: .95em; }
.sscn-therm-lap { margin: 0; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var( --sscn-therm-lap, var( --sscn-accent, #2e7d32 ) ); font-family: var( --sscn-therm-lap-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-therm-lap-fs, var( --sscn-heading-fs, .95em ) ); }
.sscn-therm-bar { position: relative; background: var( --sscn-therm-track, var( --wp--preset--color--base, #fff ) ); border-radius: 10px; overflow: hidden; }
.sscn-therm-fill { display: block; background: var( --sscn-therm-fill, var( --sscn-accent ) ); }
/* Zone layout: a band is a flex row of left/center/right slots. */
.sscn-therm-band { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin: 4px 0; }
.sscn-therm-slot { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sscn-slot-left { align-items: flex-start; text-align: left; }
.sscn-slot-center { align-items: center; text-align: center; }
.sscn-slot-right { align-items: flex-end; text-align: right; }
.sscn-therm-band .sscn-therm-el { margin: 0; }
/* Mid band lives inside the bar and makes it grow to fit. Everything placed on
   the bar is vertically centred within it, and the band centres its slots against
   each other so a short element (e.g. the percent) lines up with the middle of a
   taller stacked one (amount + contributors) - the alignment stays correct however
   many elements are stacked. */
.sscn-therm--h .sscn-therm-bar, .sscn-therm--v .sscn-therm-bar { display: flex; align-items: center; }
.sscn-therm-mid { position: relative; z-index: 1; display: flex; align-items: center; width: 100%; padding: 3px 10px; box-sizing: border-box; }
.sscn-therm-mid .sscn-therm-band { margin: 0; width: 100%; align-items: center; }
.sscn-therm-mid .sscn-therm-slot { justify-content: center; }
/* In-bar text colour: each element uses its own colour field (--sscn-therm-amount /
   -pct / -contrib / -lap). Where a field is unset it falls back to --sscn-text /
   -accent / -muted, which the server sets inline on .sscn-therm-mid to a colour
   computed for the best worst-case contrast against the bar's fill + track (see
   SSCN_Blocks::therm_contrast_color). The "of <goal>" suffix follows the amount. */
.sscn-therm-mid .sscn-therm-goal { color: currentColor; opacity: .8; }

/* Horizontal */
.sscn-therm--h .sscn-therm-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; animation: sscn-therm-grow-h .8s ease forwards; }

/* Vertical */
.sscn-therm--v { display: inline-flex; flex-direction: column; align-items: stretch; min-width: 120px; }
.sscn-therm--v .sscn-therm-bar { width: 28px; margin: 6px auto; }
.sscn-therm--v .sscn-therm-fill { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; animation: sscn-therm-grow-v .8s ease forwards; }
@keyframes sscn-therm-grow-h { from { width: 0; } to { width: var( --sscn-therm-target, 0% ); } }
@keyframes sscn-therm-grow-v { from { height: 0; } to { height: var( --sscn-therm-target, 0% ); } }
@media ( prefers-reduced-motion: reduce ) { .sscn-therm-fill { animation-duration: 0s; } }

/* --- Gallery --- */
.sscn-gallery-item { margin: 0; position: relative; }
.sscn-gallery-item img { width: 100%; height: auto; display: block; border-radius: 4px; }
.sscn-gallery-item figcaption { font-size: .85em; color: var( --sscn-gal-cap, var( --sscn-muted, #666 ) ); margin-top: 4px; }
.sscn-cap-overlay { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; padding: 8px 10px; color: var( --sscn-gal-cap, #fff ) !important; background: linear-gradient( transparent, rgba( 0, 0, 0, .65 ) ); border-radius: 0 0 4px 4px; }

/* Grid */
.sscn-gallery--grid { display: grid; gap: 12px; }

/* Split: one large image beside a tile grid */
.sscn-gallery--split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: start; }
.sscn-gallery-tiles { display: grid; gap: 10px; }
@media ( max-width: 600px ) { .sscn-gallery--split { grid-template-columns: 1fr; } }

/* Slideshow */
.sscn-gallery--slideshow { position: relative; }
.sscn-slides { position: relative; }
.sscn-slide { display: none; }
.sscn-slide.is-active { display: block; }
.sscn-slide .sscn-gallery-item img { border-radius: 6px; }
.sscn-slide-nav { position: absolute; top: 42%; transform: translateY( -50% ); border: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba( 0, 0, 0, .5 ); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.sscn-slide-prev { left: 8px; }
.sscn-slide-next { right: 8px; }
.sscn-slide-nav:hover { background: rgba( 0, 0, 0, .72 ); }
.sscn-slide-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.sscn-slide-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #ccc; cursor: pointer; }
.sscn-slide-dot.is-active { background: var( --sscn-gal-dot, var( --sscn-accent, #2e7d32 ) ); }

/* --- Image / Header / Description --- */
.sscn-campaign-image-wrap,
.sscn-single-image-wrap { margin: 0; }
.sscn-campaign-image-wrap img,
.sscn-campaign-img,
.sscn-single-image-wrap img,
.sscn-single-img { width: 100%; height: auto; display: block; border-radius: 8px; }
.sscn-single-image-wrap figcaption { font-size: .85em; color: var( --sscn-img-cap, var( --sscn-muted, #666 ) ); margin-top: 4px; }
.sscn-ch-title { margin: .3em 0 .2em; color: var( --sscn-h-title, var( --sscn-heading, inherit ) ); }
.sscn-ch-meta { display: flex; gap: 8px; align-items: center; color: var( --sscn-h-meta, var( --sscn-muted, #666 ) ); font-size: .9em; margin: .2em 0; flex-wrap: wrap; }
.sscn-block-header.sscn-just-center .sscn-ch-meta { justify-content: center; }
.sscn-block-header.sscn-just-right .sscn-ch-meta { justify-content: flex-end; }
.sscn-campaign-desc { margin: 0; color: var( --sscn-desc-text, var( --sscn-text, inherit ) ); }

/* --- Countdown --- */
.sscn-countdown { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sscn-cd-label { font-weight: 600; }
.sscn-cd-cells { display: inline-flex; gap: 8px; }
.sscn-cd-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; background: var( --sscn-cd-cell, var( --sscn-surface, #f6f7f7 ) ); border-radius: 6px; padding: 6px 8px; }
.sscn-cd-num { font-size: 1.35em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; color: var( --sscn-cd-num, var( --sscn-text, inherit ) ); }
.sscn-cd-unit { font-size: .68em; text-transform: uppercase; letter-spacing: .05em; color: var( --sscn-cd-label, var( --sscn-muted, #666 ) ); }

/* --- Stats strip --- */
.sscn-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.sscn-stat { display: flex; flex-direction: column; }
.sscn-stat-num { font-size: 1.5em; font-weight: 700; line-height: 1.1; color: var( --sscn-stat-num, var( --sscn-text, inherit ) ); }
.sscn-stat-label { font-size: .78em; color: var( --sscn-stat-label, var( --sscn-muted, #666 ) ); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

/* --- My contribution --- */
.sscn-mycontrib { display: flex; flex-direction: column; gap: 2px; }
.sscn-mycontrib.sscn-just-left { align-items: flex-start; text-align: left; }
.sscn-mycontrib.sscn-just-center { align-items: center; text-align: center; }
.sscn-mycontrib.sscn-just-right { align-items: flex-end; text-align: right; }
.sscn-mycontrib-fulfil { color: #444; font-size: .9em; margin-top: 4px; }
.sscn-mycontrib-thumb-cell { width: 44px; padding-right: 8px !important; }
.sscn-mycontrib-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
.sscn-mycontrib-label { font-size: .78em; color: #666; text-transform: uppercase; letter-spacing: .04em; }
.sscn-mycontrib-amount { font-size: 1.6em; font-weight: 700; line-height: 1.1; color: var( --sscn-mc-amount, var( --sscn-text, inherit ) ); }
.sscn-mycontrib-meta { color: var( --sscn-mc-meta, var( --sscn-muted, #666 ) ); font-size: .9em; }
.sscn-mycontrib-prompt, .sscn-mycontrib-none { color: #666; margin: 0; }
.sscn-mycontrib-orders { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.sscn-mycontrib-order { border: 1px solid #e2e2e2; border-radius: 6px; padding: 10px 12px; }
.sscn-mycontrib-order-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.sscn-mycontrib-order-no { font-weight: 600; }
.sscn-mycontrib-order-date { color: #666; font-size: .9em; }
.sscn-ostatus { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9px; background: #eee; color: #444; }
.sscn-ostatus-completed { background: #d7ead9; color: #1a662a; }
.sscn-ostatus-processing { background: #dbe7f5; color: #1f4e79; }
.sscn-ostatus-on-hold { background: #fcf3d7; color: #8a6d00; }
.sscn-mycontrib-items { width: 100%; border-collapse: collapse; margin: 0; }
.sscn-mycontrib-items td { padding: 3px 4px; border-top: 1px solid #f1f1f1; }
.sscn-mycontrib-items td:nth-child(2) { text-align: right; color: #666; white-space: nowrap; }
.sscn-mycontrib-items td:last-child { text-align: right; white-space: nowrap; }
.sscn-mycontrib-items tfoot td { font-weight: 600; border-top: 1px solid #ccc; }

/* --- Campaign updates --- */
.sscn-updates-title { margin: 0 0 .6em; }
.sscn-updates-list { display: flex; flex-direction: column; gap: 22px; }
.sscn-update { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.sscn-update--no-image { grid-template-columns: 1fr; }
.sscn-update:not(:last-child) { border-bottom: 1px solid #ececec; padding-bottom: 22px; }
.sscn-update-thumb img { width: 100%; height: auto; display: block; border-radius: 6px; background: #f3f3f3; }
.sscn-update-body { min-width: 0; }
.sscn-update-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82em; color: var( --sscn-upd-meta, var( --sscn-muted, #666 ) ); margin-bottom: 4px; }
.sscn-update-heading { margin: 0 0 .3em; font-size: 1.2em; line-height: 1.25; }
.sscn-update-heading a { text-decoration: none; color: var( --sscn-upd-heading, var( --sscn-heading, inherit ) ); }
.sscn-update-heading a:hover { text-decoration: underline; }
.sscn-update-excerpt { color: #333; margin: 0 0 .5em; }
.sscn-update-excerpt p { margin: 0; }
.sscn-update-more { font-weight: 600; text-decoration: none; color: var( --sscn-upd-link, var( --sscn-accent, inherit ) ); }
.sscn-update-more:hover { text-decoration: underline; }
.sscn-update-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sscn-update-tag { font-size: 11px; padding: 2px 8px; border-radius: 9px; background: #f0f0f1; color: #50575e; text-decoration: none; }
.sscn-update-tag:hover { background: #e4e4e6; }
.sscn-ostatus-future { background: #fcf3d7; color: #8a6d00; }
.sscn-ostatus-draft, .sscn-ostatus-pending { background: #f0f0f1; color: #50575e; }
.sscn-ostatus-private { background: #f3e0e0; color: #8a1f1f; }
@media ( max-width: 600px ) {
	.sscn-update { grid-template-columns: 1fr; gap: 10px; }
}

/* --- Campaign CTA banner --- */
.sscn-block-cta {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 16px 18px;
	border: 1px solid #e2e2e2;
	border-left: 4px solid var( --sscn-cta-accent, var( --sscn-accent, #2e7d32 ) );
	border-radius: 8px;
	background: #f7faf7;
}
.sscn-cta-info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sscn-cta-headline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sscn-cta-name { font-weight: 700; font-size: 1.05em; }
.sscn-cta-therm { display: flex; flex-direction: column; gap: 3px; }
.sscn-cta-therm .sscn-therm-bar { height: 10px; }
.sscn-cta-therm-figs { font-size: .85em; color: #444; }
.sscn-cta-pct { font-weight: 700; color: var( --sscn-cta-accent, var( --sscn-accent, #2e7d32 ) ); }
.sscn-cta-goals { color: var( --sscn-muted, #666 ); font-weight: 600; }
.sscn-cta-btn {
	flex: 0 0 auto;
	display: inline-block;
	background: var( --sscn-cta-btn, var( --sscn-button, #2e7d32 ) );
	color: var( --sscn-cta-btn-text, var( --sscn-button-text, #fff ) );
	text-decoration: none;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 6px;
	white-space: nowrap;
}
.sscn-cta-btn:hover { filter: brightness( .93 ); color: var( --sscn-cta-btn-text, var( --sscn-button-text, #fff ) ); }
@media ( max-width: 600px ) {
	.sscn-block-cta { gap: 12px; }
	.sscn-cta-btn { width: 100%; text-align: center; }
}

/* --- Status banner (campaign Banners -> Status slot) --- */
.sscn-banner--status { margin: 14px 0; }
.sscn-status-text { margin: 0 0 8px; font-weight: 700; color: var( --sscn-heading, inherit ); }

/* --- Block header (generic, opt-in) --- */
.sscn-bh { margin: 0 0 .5em; color: var( --sscn-heading, inherit ); }

/* --- Per-section typography (font family + size; default to the theme) --- */
.sscn-ch-title { font-family: var( --sscn-h-title-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-h-title-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-ch-meta { font-family: var( --sscn-h-meta-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-h-meta-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-therm-amount { font-family: var( --sscn-therm-amount-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-therm-amount-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-therm-pct-val { font-family: var( --sscn-therm-pct-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-therm-pct-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-therm-contrib { font-family: var( --sscn-therm-contrib-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-therm-contrib-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-pc-name { font-family: var( --sscn-pc-name-ff, var( --sscn-text-ff, inherit ) ); font-size: var( --sscn-pc-name-fs, var( --sscn-text-fs, inherit ) ); }
.sscn-pc-price { font-family: var( --sscn-pc-price-ff, var( --sscn-text-ff, inherit ) ); font-size: var( --sscn-pc-price-fs, var( --sscn-text-fs, inherit ) ); }
.sscn-pc-btn { font-family: var( --sscn-pc-btn-ff, var( --sscn-button-ff, inherit ) ); font-size: var( --sscn-pc-btn-fs, var( --sscn-button-fs, inherit ) ); }
.sscn-campaign-desc { font-family: var( --sscn-desc-text-ff, var( --sscn-text-ff, inherit ) ); font-size: var( --sscn-desc-text-fs, var( --sscn-text-fs, inherit ) ); }
.sscn-single-image-wrap figcaption { font-family: var( --sscn-img-cap-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-img-cap-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-gallery-item figcaption { font-family: var( --sscn-gal-cap-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-gal-cap-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-cd-num { font-family: var( --sscn-cd-num-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-cd-num-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-cd-unit { font-family: var( --sscn-cd-label-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-cd-label-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-stat-num { font-family: var( --sscn-stat-num-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-stat-num-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-stat-label { font-family: var( --sscn-stat-label-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-stat-label-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-mycontrib-amount { font-family: var( --sscn-mc-amount-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-mc-amount-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-mycontrib-meta { font-family: var( --sscn-mc-meta-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-mc-meta-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-update-heading { font-family: var( --sscn-upd-heading-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-upd-heading-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-update-excerpt { font-family: var( --sscn-upd-excerpt-ff, var( --sscn-text-ff, inherit ) ); font-size: var( --sscn-upd-excerpt-fs, var( --sscn-text-fs, inherit ) ); }
.sscn-update-meta { font-family: var( --sscn-upd-meta-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-upd-meta-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-cta-name { font-family: var( --sscn-cta-name-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-cta-name-fs, var( --sscn-heading-fs, inherit ) ); }

/* --- Campaign Updates Sign-up block --- */
.sscn-subscribe-title { margin: 0 0 6px; color: var( --sscn-sub-heading, inherit ); font-family: var( --sscn-sub-heading-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-sub-heading-fs, var( --sscn-heading-fs, inherit ) ); }
.sscn-subscribe-intro { margin: 0 0 10px; color: var( --sscn-sub-intro, var( --sscn-muted, #555 ) ); font-family: var( --sscn-sub-intro-ff, var( --sscn-text-ff, inherit ) ); font-size: var( --sscn-sub-intro-fs, var( --sscn-text-fs, inherit ) ); }
.sscn-subscribe-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sscn-subscribe-form input[type="email"], .sscn-subscribe-form input[type="text"] { flex: 1 1 200px; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 1em; }
.sscn-subscribe-btn { padding: 9px 18px; border: 0; border-radius: 6px; background: var( --sscn-sub-btn, var( --sscn-button, var( --sscn-accent, #2e7d32 ) ) ); color: var( --sscn-sub-btn-text, var( --sscn-button-text, #fff ) ); font-family: var( --sscn-sub-btn-ff, var( --sscn-button-ff, inherit ) ); font-size: var( --sscn-sub-btn-fs, var( --sscn-button-fs, inherit ) ); font-weight: 600; cursor: pointer; }
.sscn-subscribe-done { font-weight: 600; color: var( --sscn-accent, #2e7d32 ); }

/* Bonus Rewards block */
.sscn-rewards-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat( var( --sscn-reward-cols, 3 ), minmax( 0, 1fr ) ); }
.sscn-reward { display: flex; flex-direction: column; border: 1px solid var( --sscn-border, #e3e3e3 ); border-radius: 12px; overflow: hidden; background: var( --sscn-surface, #fff ); }
.sscn-reward--locked { opacity: .72; }
.sscn-reward-media { position: relative; aspect-ratio: 1 / 1; background: var( --sscn-surface, #f3f3f3 ); }
.sscn-reward-media .sscn-reward-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sscn-reward-img-link { display: block; height: 100%; }
.sscn-reward-badge { position: absolute; top: 8px; left: 8px; font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; color: #fff; }
.sscn-reward-badge--unlocked { background: var( --sscn-rw-accent, var( --sscn-accent, #2e7d32 ) ); }
.sscn-reward-badge--locked { background: #6b7280; }
.sscn-reward-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 14px; }
.sscn-reward-name { font-weight: 700; color: var( --sscn-rw-name, var( --sscn-text, inherit ) ); font-family: var( --sscn-rw-name-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-rw-name-fs, var( --sscn-heading-fs, inherit ) ); }
a.sscn-reward-name { text-decoration: none; }
a.sscn-reward-name:hover { text-decoration: underline; }
.sscn-reward-qty { font-weight: 600; color: var( --sscn-muted, #666 ); }
.sscn-reward-status { font-size: var( --sscn-rw-status-fs, var( --sscn-muted-fs, .88em ) ); font-family: var( --sscn-rw-status-ff, var( --sscn-muted-ff, inherit ) ); color: var( --sscn-rw-status, var( --sscn-muted, #555 ) ); }
.sscn-reward--locked .sscn-reward-status { color: #6b7280; }

/* Milestones block */
.sscn-milestones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
/* Column(s): grid of N columns (1 = the default vertical stack). */
.sscn-milestones--columns { display: grid; grid-template-columns: repeat( var( --sscn-ms-cols, 1 ), minmax( 0, 1fr ) ); }
/* Single / Next: one prominent card. */
.sscn-milestones--single, .sscn-milestones--next { display: block; }

/* The card itself (the box); the <li> is a layout cell. */
.sscn-ms-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var( --sscn-border, #e3e3e3 ); border-radius: 12px; background: var( --sscn-surface, #fff ); }
.sscn-ms--reached .sscn-ms-card { border-color: var( --sscn-ms-accent, var( --sscn-accent, #2e7d32 ) ); }
.sscn-ms-date { display: none; }

/* Big goal number for the single-card layouts: "NN | card". */
.sscn-ms-num { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; padding-right: 14px; border-right: 2px solid var( --sscn-border, #e3e3e3 ); }
.sscn-ms-num span { font-size: var( --sscn-ms-num-fs, var( --sscn-heading-fs, 2.8em ) ); font-family: var( --sscn-ms-num-ff, var( --sscn-heading-ff, inherit ) ); font-weight: 800; line-height: 1; white-space: nowrap; color: var( --sscn-ms-num, var( --sscn-accent, #2e7d32 ) ); font-variant-numeric: tabular-nums; }
.sscn-ms--pending .sscn-ms-num span { color: var( --sscn-ms-num, var( --sscn-muted, #98a2b3 ) ); }

/* Timeline: a vertical rail with a dot per milestone; the date sits opposite the card. */
.sscn-milestones--timeline { position: relative; }
.sscn-milestones--timeline .sscn-ms { position: relative; display: grid; align-items: center; }
.sscn-milestones--timeline .sscn-ms-date { display: flex; align-items: center; font-size: var( --sscn-ms-meta-fs, var( --sscn-muted-fs, .82em ) ); font-family: var( --sscn-ms-meta-ff, var( --sscn-muted-ff, inherit ) ); font-weight: 600; color: var( --sscn-ms-meta, var( --sscn-muted, #666 ) ); white-space: nowrap; }
.sscn-milestones--timeline::before { content: ""; position: absolute; top: 10px; bottom: 10px; width: 2px; background: var( --sscn-border, #e3e3e3 ); }
.sscn-milestones--timeline .sscn-ms::after { content: ""; position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var( --sscn-surface, #fff ); border: 2px solid var( --sscn-border, #cbd5e1 ); box-sizing: border-box; transform: translate( -50%, -50% ); }
.sscn-milestones--timeline .sscn-ms--reached::after { background: var( --sscn-ms-accent, var( --sscn-accent, #2e7d32 ) ); border-color: var( --sscn-ms-accent, var( --sscn-accent, #2e7d32 ) ); }
/* Left rail: date | rail | card. */
.sscn-tl--left .sscn-ms { grid-template-columns: 120px 28px 1fr; }
.sscn-tl--left::before { left: 134px; }
.sscn-tl--left .sscn-ms::after { left: 134px; }
.sscn-tl--left .sscn-ms-card { grid-column: 3; }
.sscn-tl--left .sscn-ms-date { grid-column: 1; justify-content: flex-end; text-align: right; }
/* Right rail: card | rail | date. */
.sscn-tl--right .sscn-ms { grid-template-columns: 1fr 28px 120px; }
.sscn-tl--right::before { left: calc( 100% - 134px ); }
.sscn-tl--right .sscn-ms::after { left: calc( 100% - 134px ); }
.sscn-tl--right .sscn-ms-card { grid-column: 1; }
.sscn-tl--right .sscn-ms-date { grid-column: 3; justify-content: flex-start; }
/* Centre rail: cards alternate left/right, date opposite. */
.sscn-tl--center .sscn-ms { grid-template-columns: 1fr 40px 1fr; }
.sscn-tl--center::before { left: 50%; }
.sscn-tl--center .sscn-ms::after { left: 50%; }
.sscn-tl--center .sscn-ms:nth-child(odd) .sscn-ms-card { grid-column: 1; }
.sscn-tl--center .sscn-ms:nth-child(odd) .sscn-ms-date { grid-column: 3; justify-content: flex-start; }
.sscn-tl--center .sscn-ms:nth-child(even) .sscn-ms-card { grid-column: 3; }
.sscn-tl--center .sscn-ms:nth-child(even) .sscn-ms-date { grid-column: 1; justify-content: flex-end; text-align: right; }

.sscn-ms-reward { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; }
.sscn-ms-reward-item { display: flex; flex-direction: column; align-items: center; }
.sscn-ms-reward img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.sscn-ms-reward-name { display: block; font-size: .78em; font-weight: 600; color: var( --sscn-muted, #666 ); margin-top: 3px; max-width: 72px; text-align: center; }
.sscn-ms-body { flex: 1 1 auto; min-width: 0; }
.sscn-ms-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
/* Title keeps a sensible minimum so it never collapses to one letter per line;
   the badge / progress text wraps to its own line when there is no room. */
.sscn-ms-title { font-weight: 700; color: var( --sscn-ms-title, var( --sscn-text, inherit ) ); font-family: var( --sscn-ms-title-ff, var( --sscn-heading-ff, inherit ) ); font-size: var( --sscn-ms-title-fs, var( --sscn-heading-fs, inherit ) ); flex: 1 1 auto; min-width: 7em; overflow-wrap: break-word; }
.sscn-ms-badge { flex: 0 0 auto; font-size: .72em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; color: #fff; white-space: nowrap; }
.sscn-ms-badge--reached { background: var( --sscn-ms-accent, var( --sscn-accent, #2e7d32 ) ); }
.sscn-ms-progress-text { flex: 0 0 auto; font-size: var( --sscn-ms-meta-fs, var( --sscn-muted-fs, .85em ) ); font-family: var( --sscn-ms-meta-ff, var( --sscn-muted-ff, inherit ) ); font-weight: 600; color: var( --sscn-ms-meta, var( --sscn-muted, #555 ) ); white-space: nowrap; }
.sscn-ms-bar { position: relative; height: 8px; margin: 8px 0 4px; background: var( --sscn-ms-track, var( --sscn-surface, #ececec ) ); border: 1px solid var( --sscn-border, #e3e3e3 ); border-radius: 999px; overflow: hidden; }
.sscn-ms-fill { display: block; height: 100%; background: var( --sscn-ms-accent, var( --sscn-accent, #2e7d32 ) ); border-radius: 999px; }
.sscn-ms-meta { font-size: var( --sscn-ms-meta-fs, var( --sscn-muted-fs, .82em ) ); font-family: var( --sscn-ms-meta-ff, var( --sscn-muted-ff, inherit ) ); color: var( --sscn-ms-meta, var( --sscn-muted, #666 ) ); }
.sscn-ms-desc { margin: 6px 0 0; color: var( --sscn-ms-desc, var( --sscn-text, inherit ) ); font-family: var( --sscn-ms-desc-ff, var( --sscn-text-ff, inherit ) ); font-size: var( --sscn-ms-desc-fs, var( --sscn-text-fs, .92em ) ); }

@media ( max-width: 600px ) {
	.sscn-rewards-grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.sscn-milestones--columns { grid-template-columns: 1fr; }
	/* Collapse the timeline to a simple left rail with the card only. */
	.sscn-milestones--timeline .sscn-ms { grid-template-columns: 1fr !important; padding-left: 22px; }
	.sscn-milestones--timeline .sscn-ms-card { grid-column: 1 !important; }
	.sscn-milestones--timeline .sscn-ms-date { display: none !important; }
	.sscn-milestones--timeline::before { left: 5px !important; }
	.sscn-milestones--timeline .sscn-ms::after { left: 5px !important; }
}

/* Campaign Menu block: campaign links styled to sit in the header like the nav. */
.sscn-campaign-menu { list-style: none; margin: 0; padding: 0 1.5em; display: flex; align-items: center; gap: 1.5em; font-size: var( --wp--preset--font-size--medium, inherit ); line-height: 1.2; }
.sscn-campaign-menu ul { list-style: none; margin: 0; padding: 0; }
.sscn-campaign-menu a { color: inherit; text-decoration: none; font-weight: inherit; }
.sscn-campaign-menu a:hover { text-decoration: underline; }
.sscn-campaign-menu__label { cursor: default; font-weight: inherit; }
.sscn-campaign-menu a.sscn-campaign-menu__label { cursor: pointer; }
.sscn-campaign-menu > .sscn-campaign-menu__group { position: relative; }
.sscn-campaign-menu > .sscn-campaign-menu__group > .sscn-campaign-menu__label::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.sscn-campaign-menu > .sscn-campaign-menu__group > .sscn-campaign-menu__sub { position: absolute; top: 100%; right: 0; min-width: 13em; background: #fff; color: #1e1e1e; box-shadow: 0 6px 20px rgba( 0, 0, 0, .15 ); border-radius: 4px; padding: .5em 0; border-top: .45em solid transparent; background-clip: padding-box; z-index: 1000; display: none; text-align: left; }
.sscn-campaign-menu > .sscn-campaign-menu__group:hover > .sscn-campaign-menu__sub, .sscn-campaign-menu > .sscn-campaign-menu__group:focus-within > .sscn-campaign-menu__sub { display: block; }
.sscn-campaign-menu__sub .sscn-campaign-menu__item, .sscn-campaign-menu__sub > .sscn-campaign-menu__group > .sscn-campaign-menu__label { display: block; padding: .35em 1.3em; white-space: nowrap; }
.sscn-campaign-menu__sub .sscn-campaign-menu__label { font-size: .82em; text-transform: uppercase; letter-spacing: .03em; opacity: .6; cursor: default; }
.sscn-campaign-menu__sub .sscn-campaign-menu__sub { padding: 0; }
.sscn-campaign-menu__sub .sscn-campaign-menu__sub .sscn-campaign-menu__item { padding-left: 2em; }

/* Campaign Header: optional image, fulfilment date, title link. */
.sscn-ch-image { margin: 0 0 12px; }
.sscn-ch-image__img { max-width: 100%; height: auto; border-radius: 8px; display: block; }
.sscn-just-center .sscn-ch-image__img { margin-left: auto; margin-right: auto; }
.sscn-just-right .sscn-ch-image__img { margin-left: auto; }
.sscn-ch-fulfilment { margin: 4px 0 0; font-weight: 600; color: var( --sscn-h-fulfilment, var( --sscn-muted, #555 ) ); font-family: var( --sscn-h-fulfilment-ff, var( --sscn-muted-ff, inherit ) ); font-size: var( --sscn-h-fulfilment-fs, var( --sscn-muted-fs, inherit ) ); }
.sscn-ch-link { color: inherit; text-decoration: none; }
.sscn-ch-link:hover { text-decoration: underline; }
/* Status badge and Dates are each independently controllable (colour + typography). */
.sscn-ch-dates { color: var( --sscn-h-dates, var( --sscn-h-meta, var( --sscn-muted, #666 ) ) ); font-family: var( --sscn-h-dates-ff, var( --sscn-h-meta-ff, var( --sscn-muted-ff, inherit ) ) ); font-size: var( --sscn-h-dates-fs, var( --sscn-h-meta-fs, var( --sscn-muted-fs, inherit ) ) ); }
.sscn-block-header .sscn-badge { font-family: var( --sscn-h-status-ff, inherit ); font-size: var( --sscn-h-status-fs, 11px ); }
.sscn-block-header .sscn-badge-draft { background: var( --sscn-h-status, #f0f0f1 ); }
.sscn-block-header .sscn-badge-scheduled { background: var( --sscn-h-status, #fcf3d7 ); }
.sscn-block-header .sscn-badge-active { background: var( --sscn-h-status, #d7ead9 ); }
.sscn-block-header .sscn-badge-ended { background: var( --sscn-h-status, #e6e6e6 ); }

/* Per-element alignment (Campaign Header and any block that emits sscn-al-*). */
.sscn-al-left { text-align: left; }
.sscn-al-center { text-align: center; }
.sscn-al-right { text-align: right; }
.sscn-ch-image.sscn-al-center .sscn-ch-image__img { margin-left: auto; margin-right: auto; }
.sscn-ch-image.sscn-al-right .sscn-ch-image__img { margin-left: auto; }
.sscn-ch-meta.sscn-al-left { justify-content: flex-start; }
.sscn-ch-meta.sscn-al-center { justify-content: center; }
.sscn-ch-meta.sscn-al-right { justify-content: flex-end; }

/* Campaign Header: Row layout - elements horizontal, vertically centred, wrapping.
   Flex lives on an inner .sscn-ch-row so the block wrapper keeps its (possibly
   alignfull) width; flexing the wrapper collapses that width to 0. */
.sscn-ch-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 6px; width: 100%; }
.sscn-ch-row > * { margin-top: 0; margin-bottom: 0; }
.sscn-ch-row > .sscn-al-right { margin-left: auto; }