.wpslash-product-block-notice {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #dba617;
  background: #fff8e5;
  color: #1d2327;
}

.wp-block-wpslash-product-pricing.fm-pricing,
.wp-block-wpslash-roi-calculator.fm-roi {
  box-sizing: border-box;
  padding: clamp(48px, 7vw, 96px) 20px;
}

.wp-block-wpslash-product-pricing .fm-container,
.wp-block-wpslash-roi-calculator .fm-container {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.wp-block-wpslash-product-pricing .fm-text-center,
.wp-block-wpslash-roi-calculator .fm-text-center {
  text-align: center;
}

.wp-block-wpslash-product-pricing .fm-section-label,
.wp-block-wpslash-roi-calculator .fm-section-label {
  color: #4f46e5;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wp-block-wpslash-product-pricing .fm-section-title,
.wp-block-wpslash-roi-calculator .fm-section-title {
  margin: 10px 0;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
}

.wp-block-wpslash-product-pricing .fm-section-subtitle,
.wp-block-wpslash-roi-calculator .fm-section-subtitle {
  max-width: 720px;
  margin-inline: auto;
  color: #64748b;
}

.wp-block-wpslash-product-pricing .fm-pricing-cards,
.wp-block-wpslash-roi-calculator .fm-roi-card {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}

.wp-block-wpslash-product-pricing .fm-pricing-card,
.wp-block-wpslash-roi-calculator .fm-roi-inputs,
.wp-block-wpslash-roi-calculator .fm-roi-result {
  position: relative;
  box-sizing: border-box;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(15, 23, 42, .08);
}

.wp-block-wpslash-product-pricing .fm-popular {
  border: 2px solid #4f46e5;
}

.wp-block-wpslash-product-pricing .fm-pricing-popular {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 6px 16px;
  border-radius: 0 0 10px 10px;
  background: #4f46e5;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  transform: translateX(-50%);
}

.wp-block-wpslash-product-pricing .fm-pricing-anchor {
  margin-bottom: 18px;
  color: #64748b;
  font-size: 13px;
}

.wp-block-wpslash-product-pricing .fm-pricing-price {
  margin: 20px 0;
  font-size: clamp(42px, 7vw, 64px);
  font-weight: 900;
  line-height: 1;
}

.wp-block-wpslash-product-pricing .fm-currency,
.wp-block-wpslash-product-pricing .fm-period {
  font-size: 16px;
  font-weight: 600;
}

.wp-block-wpslash-product-pricing .fm-pricing-feature {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.wp-block-wpslash-product-pricing .fm-pricing-feature span {
  color: #16a34a;
  font-weight: 900;
}

.wp-block-wpslash-product-pricing .fm-payment-buttons {
  margin-top: 28px;
}

.wp-block-wpslash-product-pricing .fm-cta-micro {
  margin-top: 10px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}

.wp-block-wpslash-product-pricing .fm-guarantee {
  display: flex;
  gap: 18px;
  max-width: 760px;
  margin: 36px auto 0;
  padding: 24px;
  border-radius: 16px;
  background: #f0fdf4;
}

.wp-block-wpslash-product-pricing .fm-guarantee-badge {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  place-items: center;
}

.wp-block-wpslash-roi-calculator .fm-roi-field {
  margin-bottom: 26px;
}

.wp-block-wpslash-roi-calculator .fm-roi-field label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-weight: 700;
}

.wp-block-wpslash-roi-calculator .fm-roi-field input {
  width: 100%;
  margin-top: 14px;
}

.wp-block-wpslash-roi-calculator .fm-roi-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #111827;
  color: #fff;
  text-align: center;
}

.wp-block-wpslash-roi-calculator .fm-roi-big {
  margin: 10px 0;
  color: #86efac;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 900;
}

.wp-block-wpslash-roi-calculator .fm-roi-pill {
  margin-top: 20px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

/* Dense feature groups used by marketplace-integration product patterns. */
.fm-feature-groups {
  align-items: start;
}

.fm-feature-groups .fm-feature-card {
  height: 100%;
}

.fm-feature-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.fm-feature-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text3);
  font-size: 14px;
  line-height: 1.55;
}

.fm-feature-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--money);
  content: '\2713';
  font-weight: 900;
}

.fm-screenshot-cards {
  gap: 24px;
  margin-top: 44px;
}

.fm-screenshot-card {
  height: 100%;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg2);
}

.fm-screenshot-card .fm-screenshot-placeholder {
  min-height: 260px;
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px dashed var(--bg4);
  border-radius: var(--radius);
  background: var(--bg);
}

.fm-screenshot-card h3 {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
}

.fm-screenshot-card p {
  color: var(--text3);
  font-size: 14px;
  line-height: 1.65;
}

.fm-product-summary {
  max-width: 880px;
  margin: 36px auto 0;
  color: var(--text2);
  font-size: 17px;
  line-height: 1.75;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Core-block adaptations for the FoodMaster landing pattern.

   The landing design was written against hand-rolled divs. Gutenberg emits a
   different shape for the same intent, so these rules re-point the design
   classes at the markup core actually produces.
   --------------------------------------------------------------------------- */

/* The design supplies its own vertical rhythm, so drop core's layout gaps.
   Kept anchored to the section roots because, unlike the rules below, it would
   otherwise strip block spacing from every page on the site. */
:is(.fm-hero,.fm-trustbar,.fm-section) > *,
:is(.fm-hero,.fm-trustbar,.fm-section) :is(.wp-block-group,.wp-block-columns,.wp-block-column) > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Group blocks can save an extra .wp-block-group__inner-container between a
   group and its children. The design was written against hand-rolled divs, so
   every fm- grid and flex row would be left with a single child to lay out and
   would collapse to one column. Taking the wrapper out of the layout restores
   the direct parent/child relationship the design expects, and is a no-op on
   installs that never emit it. */
:is(.fm-hero,.fm-trustbar,.fm-section) .wp-block-group__inner-container {
  display: contents;
}

/* Button classNames land on the wrapper, but the design styles the link. */
.wp-block-button.fm-btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all .2s ease;
}

.wp-block-button.fm-btn-primary > .wp-block-button__link {
  background: var(--accent);
  box-shadow: 0 8px 22px rgba(255, 90, 31, .28);
  color: #fff;
}

.wp-block-button.fm-btn-primary > .wp-block-button__link:hover {
  background: var(--accent-hover);
  box-shadow: 0 12px 34px rgba(255, 90, 31, .36);
  transform: translateY(-2px);
}

.wp-block-button.fm-btn-outline > .wp-block-button__link {
  border: 2px solid var(--bg4);
  background: #fff;
  color: var(--text);
}

.wp-block-button.fm-btn-outline > .wp-block-button__link:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.wp-block-button.fm-btn-large > .wp-block-button__link {
  padding: 18px 40px;
  border-radius: var(--radius-lg);
  font-size: 18px;
}

/* The hero CTAs sit in the narrower of the two hero columns, so a pair of large
   buttons with long labels overflows it and wraps onto separate rows. The
   labels stay on one line, so trade horizontal padding for width instead. */
.fm-hero-ctas .wp-block-button {
  max-width: 100%;
}

.fm-hero-ctas .wp-block-button.fm-btn-large > .wp-block-button__link {
  padding-inline: clamp(18px, 2.4vw, 40px);
}

/* The design expects an icon plus a single text span inside each trust item.
   A Paragraph block puts its text and <strong> runs directly in the element,
   where flex would split them into separate items and gap them apart. */
p.fm-trust-item {
  display: block;
}

/* A Buttons block is a flex container, so text-align no longer centres it. */
.fm-text-center .wp-block-buttons,
.fm-included-cta .wp-block-buttons,
.fm-final-cta .wp-block-buttons {
  justify-content: center;
}

/* List blocks standing in for the icon rows of the original markup. */
.fm-hero-checks li,
.fm-comparison-card li,
.fm-final-cta-badges li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fm-hero-checks li::before,
.fm-comparison-card.fm-good li::before,
.fm-final-cta-badges li::before {
  color: var(--money);
  content: '\2713';
  font-weight: 900;
}

.fm-comparison-card.fm-bad li::before {
  color: var(--error);
  content: '\00d7';
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.fm-hero-checks li {
  color: var(--text2);
  font-size: 15px;
  font-weight: 500;
}

.fm-comparison-card li {
  margin-bottom: 15px;
  color: var(--text2);
  font-size: 15px;
  line-height: 1.5;
}

.fm-final-cta-badges li {
  color: var(--text3);
  font-size: 14px;
}

/* Details blocks replacing the JS-driven FAQ accordion. */
.fm-faq-list .wp-block-details {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .3s;
}

.fm-faq-list .wp-block-details[open] {
  border-color: rgba(255, 90, 31, .35);
}

.fm-faq-list summary {
  padding: 20px 24px;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  list-style: none;
  transition: background .2s;
}

.fm-faq-list summary::-webkit-details-marker {
  display: none;
}

.fm-faq-list summary::after {
  float: right;
  color: var(--text4);
  content: '\002b';
  font-size: 20px;
  line-height: 1;
}

.fm-faq-list .wp-block-details[open] summary::after {
  color: var(--accent);
  content: '\2212';
}

.fm-faq-list summary:hover {
  background: var(--bg2);
}

.fm-faq-list .wp-block-details > :not(summary) {
  padding: 0 24px 20px;
  color: var(--text3);
  font-size: 15px;
  line-height: 1.7;
}

/* Remaining core blocks used by the pattern. */
.wp-block-image.fm-hero-screenshot-inner {
  margin: 0;
}

.fm-screenshot-gallery {
  margin-top: 44px;
}

.wp-block-wpslash-product-payment {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}