/**
 * ReviewNFC Design System
 * Version: 1.10.2
 *
 * Presentation only. Every compatibility rule is scoped beneath the
 * rn-design-system body class added by the plugin.
 */

:root {
  --rn-primary: #2563EB;
  --rn-primary-hover: #1D4ED8;

  --rn-heading: #0F172A;
  --rn-text: #334155;
  --rn-muted: #64748B;

  --rn-background: #FFFFFF;
  --rn-surface: #F8FAFC;
  --rn-border: #E2E8F0;

  --rn-success: #16A34A;
  --rn-star: #B45309;

  --rn-white: #FFFFFF;

  --rn-radius-sm: 8px;
  --rn-radius-md: 12px;
  --rn-radius-lg: 20px;

  --rn-shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.05);
  --rn-shadow-md: 0 8px 30px rgba(15, 23, 42, 0.07);

  --rn-error: #DC2626;
  --rn-error-surface: #FEF2F2;
  --rn-info: #0369A1;
  --rn-info-surface: #F0F9FF;
  --rn-success-surface: #F0FDF4;
  --rn-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.16);
  --rn-font-heading: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rn-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rn-container: 1200px;
  --rn-gutter: 20px;
  --rn-section-space: clamp(56px, 8vw, 104px);
}

/* Foundation */

body.rn-design-system {
  margin: 0;
  color: var(--rn-text);
  background: var(--rn-background);
  font-family: var(--rn-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.rn-design-system,
body.rn-design-system *,
body.rn-design-system *::before,
body.rn-design-system *::after {
  box-sizing: border-box;
}

body.rn-design-system :where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0 0.55em;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

body.rn-design-system h1,
body.rn-design-system .rn-h1 {
  font-size: clamp(2.375rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
}

body.rn-design-system h2,
body.rn-design-system .rn-h2 {
  font-size: clamp(1.875rem, 5vw, 3rem);
  line-height: 1.1;
}

body.rn-design-system h3,
body.rn-design-system .rn-h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1.2;
}

body.rn-design-system h4,
body.rn-design-system .rn-h4 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.3;
}

body.rn-design-system :where(p, ul, ol) {
  margin-block: 0 1.25em;
}

body.rn-design-system :where(a) {
  color: var(--rn-primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.rn-design-system :where(a:hover) {
  color: var(--rn-primary-hover);
}

body.rn-design-system :where(img) {
  max-width: 100%;
  height: auto;
}

body.rn-design-system :where(button, input, select, textarea) {
  font: inherit;
}

body.rn-design-system :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 3px;
}

body.rn-design-system ::selection {
  color: var(--rn-heading);
  background: rgba(37, 99, 235, 0.16);
}

.rn-container {
  width: min(var(--rn-container), calc(100% - (2 * var(--rn-gutter))));
  margin-inline: auto;
}

.rn-section {
  padding-block: var(--rn-section-space);
}

.rn-section--surface {
  background: var(--rn-surface);
}

.rn-section__intro {
  max-width: 720px;
  margin-block-end: clamp(32px, 5vw, 56px);
}

.rn-eyebrow {
  margin-block-end: 12px;
  color: var(--rn-primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.rn-lead {
  color: var(--rn-text);
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  line-height: 1.65;
}

.rn-muted {
  color: var(--rn-muted);
}

.rn-grid {
  display: grid;
  gap: 24px;
}

.rn-grid--2,
.rn-grid--3 {
  grid-template-columns: 1fr;
}

.rn-card {
  padding: clamp(24px, 4vw, 32px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
  box-shadow: var(--rn-shadow-sm);
}

.rn-card > :last-child {
  margin-block-end: 0;
}

/* Buttons */

body.rn-design-system .rn-btn,
body.rn-design-system .woocommerce :where(a.button, button.button, input.button),
body.rn-design-system :where(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-product-button__button) {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--rn-radius-md);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--rn-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.rn-design-system .rn-btn--primary,
body.rn-design-system .woocommerce :where(a.button.alt, button.button.alt, input.button.alt),
body.rn-design-system .woocommerce :where(.checkout-button, #place_order),
body.rn-design-system :where(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-product-button__button) {
  border-color: var(--rn-primary);
  color: var(--rn-white);
  background: var(--rn-primary);
}

body.rn-design-system .rn-btn--primary:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
body.rn-design-system .woocommerce :where(a.button.alt, button.button.alt, input.button.alt):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
body.rn-design-system .woocommerce :where(.checkout-button, #place_order):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
body.rn-design-system :where(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-product-button__button):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
  border-color: var(--rn-primary-hover);
  color: var(--rn-white);
  background: var(--rn-primary-hover);
  transform: translateY(-1px);
}

body.rn-design-system .rn-btn--secondary,
body.rn-design-system .woocommerce :where(a.button:not(.alt), button.button:not(.alt), input.button:not(.alt)) {
  border-color: var(--rn-border);
  color: var(--rn-heading);
  background: var(--rn-white);
}

body.rn-design-system .rn-btn--secondary:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
body.rn-design-system .woocommerce :where(a.button:not(.alt), button.button:not(.alt), input.button:not(.alt)):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
  border-color: #CBD5E1;
  color: var(--rn-heading);
  background: var(--rn-surface);
}

body.rn-design-system .rn-btn:focus-visible,
body.rn-design-system .woocommerce :where(a.button, button.button, input.button):focus-visible,
body.rn-design-system :where(.wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-product-button__button):focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 2px;
  box-shadow: var(--rn-focus-ring);
}

body.rn-design-system :where(button, .button, .rn-btn):where(:disabled, .disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
  transform: none;
}

/* Form controls */

body.rn-design-system .woocommerce :where(input.input-text, input[type="email"], input[type="tel"], input[type="text"], input[type="url"], input[type="number"], input[type="password"], select, textarea),
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea),
body.rn-design-system :where(.rn-field__input, .rn-field__select, .rn-field__textarea) {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  color: var(--rn-heading);
  background-color: var(--rn-white);
  box-shadow: none;
  font-family: var(--rn-font-body);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

body.rn-design-system .woocommerce :where(select),
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) select,
body.rn-design-system .rn-field__select {
  padding-right: 44px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 8 4 4 4-4' stroke='%23334155' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px;
}

body.rn-design-system .woocommerce textarea,
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) textarea,
body.rn-design-system .rn-field__textarea {
  min-height: 120px;
  resize: vertical;
}

body.rn-design-system .woocommerce :where(input, select, textarea):focus,
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(input, select, textarea):focus,
body.rn-design-system :where(.rn-field__input, .rn-field__select, .rn-field__textarea):focus {
  border-color: var(--rn-primary);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rn-focus-ring);
}

body.rn-design-system :where(input, textarea)::placeholder {
  color: var(--rn-muted);
  opacity: 1;
}

body.rn-design-system .woocommerce :where(input, select, textarea).woocommerce-invalid,
body.rn-design-system .woocommerce .woocommerce-invalid :where(input, select, textarea),
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(input, select, textarea)[aria-invalid="true"],
body.rn-design-system .rn-field--error :where(input, select, textarea) {
  border-color: var(--rn-error);
}

body.rn-design-system .woocommerce :where(input, select, textarea).woocommerce-invalid:focus,
body.rn-design-system .woocommerce .woocommerce-invalid :where(input, select, textarea):focus,
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(input, select, textarea)[aria-invalid="true"]:focus,
body.rn-design-system .rn-field--error :where(input, select, textarea):focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

body.rn-design-system .woocommerce :where(.form-row, .woocommerce-form-row),
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(.form-row, .field, .rn-field),
.rn-field {
  margin-block: 0 20px;
}

body.rn-design-system .woocommerce :where(.form-row label, .woocommerce-form-row label),
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) label,
.rn-field__label {
  display: inline-block;
  margin-block-end: 7px;
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.45;
}

body.rn-design-system :where(.description, .woocommerce-input-wrapper + .description, .rn-field__help),
body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(.help-text, .description, small) {
  display: block;
  margin-block-start: 7px;
  color: var(--rn-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

body.rn-design-system :where(input[type="checkbox"], input[type="radio"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--rn-primary);
}

body.rn-design-system :where(input[type="file"]) {
  min-height: 50px;
  padding: 8px;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
  color: var(--rn-text);
  background: var(--rn-surface);
}

body.rn-design-system :where(input[type="file"])::file-selector-button {
  min-height: 34px;
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-sm);
  color: var(--rn-heading);
  background: var(--rn-white);
  font-weight: 600;
}

/* Twenty Twenty-Five header and navigation presentation */

body.rn-design-system :where(.wp-site-blocks > header, header.wp-block-template-part) {
  position: relative;
  z-index: 20;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--rn-border);
  color: var(--rn-heading);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: none;
}

body.rn-design-system .rn-header--sticky {
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body.rn-design-system.admin-bar .rn-header--sticky {
  top: 32px;
}

body.rn-design-system .rn-header__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

body.rn-design-system .rn-site-header.rn-container,
body.rn-design-system .rn-site-footer.rn-container {
  width: min(1200px, calc(100% - (2 * var(--rn-gutter))));
  /* .rn-container already supplies the edge gutter; drop any inherited
     root padding so the header and footer share one 1200px measure. */
  padding-inline: 0;
}

body.rn-design-system .rn-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * The Navigation block wraps its links in containers of their own, so the
 * nav label could settle above the Mini-Cart control's centre line. Centre
 * every level between the navigation and the cart button.
 */
body.rn-design-system .rn-header__actions > * {
  align-self: center;
}

body.rn-design-system .rn-site-nav,
body.rn-design-system .rn-site-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
body.rn-design-system .rn-site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
  align-items: center;
}

body.rn-design-system .wp-block-site-title {
  margin: 0;
}

body.rn-design-system .wp-block-site-title,
body.rn-design-system .rn-wordmark {
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

body.rn-design-system .wp-block-site-title a,
body.rn-design-system .rn-wordmark {
  color: var(--rn-heading);
  text-decoration: none;
}

/* Give the header wordmark a full-height touch target. */
body.rn-design-system .rn-site-header .wp-block-site-title a,
body.rn-design-system .rn-site-header .rn-wordmark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}

/* Image logo: the whole image is the link to the homepage. */
body.rn-design-system .rn-site-header :where(.wp-block-image, .wp-block-site-logo) {
  margin-block: 0;
}

body.rn-design-system .rn-site-header :where(.wp-block-image, .wp-block-site-logo) a {
  display: block;
  line-height: 0;
}

body.rn-design-system .rn-site-header :where(.wp-block-image, .wp-block-site-logo) img {
  display: block;
  height: auto;
}

body.rn-design-system .rn-site-header :where(.wp-block-image, .wp-block-site-logo) a:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 4px;
  border-radius: 4px;
}

body.rn-design-system .rn-wordmark__accent {
  color: var(--rn-primary);
}

body.rn-design-system .wp-block-site-tagline {
  margin-block: 6px 0;
  color: var(--rn-muted);
  font-size: 0.8125rem;
}

/*
 * The Navigation block's list would otherwise inherit the global list margin,
 * which made the navigation taller than its links and pushed the labels above
 * the Mini-Cart's centre line.
 */
body.rn-design-system .wp-block-navigation :where(.wp-block-navigation__container, .wp-block-navigation-item) {
  margin-block: 0;
}

body.rn-design-system .wp-block-navigation .wp-block-navigation-item__content {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 12px;
  color: var(--rn-text);
  border-radius: var(--rn-radius-sm);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

body.rn-design-system .wp-block-navigation .wp-block-navigation-item__content:hover,
body.rn-design-system .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
  color: var(--rn-primary);
  background: rgba(37, 99, 235, 0.06);
}

body.rn-design-system .rn-site-nav .wp-block-navigation__container {
  gap: clamp(12px, 1.8vw, 24px);
}

body.rn-design-system .rn-site-nav .wp-block-navigation-item__content:hover,
body.rn-design-system .rn-site-nav .wp-block-navigation-item__content:focus-visible,
body.rn-design-system .rn-site-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--rn-primary);
  background: transparent;
}

/*
 * The two header controls are a matched pair. WooCommerce's Mini-Cart button
 * carried 10px of its own padding around a 24px icon, so it measured 46px next
 * to the Navigation block's 44px menu button; side by side the mismatch was
 * visible. Both are now pinned to the same 44px box with the icon centred.
 */
body.rn-design-system :where(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close, .wc-block-mini-cart__button) {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rn-border);
  border-radius: 10px;
  color: var(--rn-heading);
  background: var(--rn-white);
}

body.rn-design-system .rn-header__actions :where(.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button) {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  box-sizing: border-box;
}

body.rn-design-system .rn-header__actions :where(.wp-block-navigation__responsive-container-open, .wc-block-mini-cart__button) svg {
  display: block;
  width: 22px;
  height: 22px;
}

body.rn-design-system :where(.wc-block-mini-cart__badge) {
  color: var(--rn-white);
  background: var(--rn-primary);
  font-weight: 700;
}

body.rn-design-system .rn-site-cart .wc-block-mini-cart__button {
  padding: 0;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

body.rn-design-system .rn-site-cart .wc-block-mini-cart__button:hover {
  border-color: var(--rn-primary);
  color: var(--rn-primary);
  background: var(--rn-surface);
}

body.rn-design-system .rn-site-nav .wp-block-navigation__responsive-container.is-menu-open {
  padding: clamp(24px, 7vw, 40px);
  color: var(--rn-heading);
  background: var(--rn-white);
}

body.rn-design-system .rn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-block-start: 48px;
}

body.rn-design-system .rn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  width: 100%;
  align-items: stretch;
  gap: 8px;
}

body.rn-design-system .rn-site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  padding: 12px 0;
  font-size: 1.0625rem;
}

/* Twenty Twenty-Five footer presentation */

body.rn-design-system :where(.wp-site-blocks > footer, footer.wp-block-template-part) {
  margin-block-start: var(--rn-section-space);
  padding-block: clamp(48px, 7vw, 72px);
  border: 0;
  color: #CBD5E1;
  background: var(--rn-heading);
}

body.rn-design-system :where(.wp-site-blocks > footer, footer.wp-block-template-part) :where(h2, h3, h4, .wp-block-site-title, .rn-wordmark) {
  color: var(--rn-white);
}

body.rn-design-system :where(.wp-site-blocks > footer, footer.wp-block-template-part) :where(p, li) {
  color: #CBD5E1;
}

body.rn-design-system :where(.wp-site-blocks > footer, footer.wp-block-template-part) a {
  color: #E2E8F0;
  text-decoration: none;
}

body.rn-design-system :where(.wp-site-blocks > footer, footer.wp-block-template-part) a:hover {
  color: var(--rn-white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/*
 * Twenty Twenty-Five's constrained layout caps every child of the footer group
 * at the theme content size (~645px), which squeezed the four-column grid and
 * the bottom row into the middle of the 1200px container. The footer group owns
 * its own width through .rn-container, so its children take the full width.
 */
body.rn-design-system .rn-site-footer.is-layout-constrained > * {
  max-width: none;
}

.rn-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 0;
}

.rn-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-block-start: 40px;
  padding-block-start: 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.18);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

body.rn-design-system .rn-site-footer :where(.wp-block-column, .wp-block-navigation, .wp-block-site-title, p) {
  margin-block-start: 0;
}

body.rn-design-system .rn-site-footer .rn-footer-wordmark,
body.rn-design-system .rn-site-footer .rn-footer-wordmark a {
  color: var(--rn-white);
  font-size: 1.375rem;
}

body.rn-design-system .rn-site-footer .rn-site-footer__tagline {
  margin-block: 18px 10px;
  color: var(--rn-white);
  font-size: 1rem;
}

body.rn-design-system .rn-site-footer .rn-site-footer__description {
  max-width: 34ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9375rem;
  line-height: 1.7;
}

body.rn-design-system .rn-site-footer .rn-site-footer__heading {
  margin-block: 0 14px;
  color: var(--rn-white);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}

body.rn-design-system .rn-site-footer .rn-footer-nav .wp-block-navigation__container {
  align-items: flex-start;
  gap: 6px;
}

body.rn-design-system .rn-site-footer .rn-footer-nav .wp-block-navigation-item__content {
  min-height: 36px;
  padding: 5px 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.76);
  background: transparent;
}

body.rn-design-system .rn-site-footer .rn-footer-nav .wp-block-navigation-item__content:hover,
body.rn-design-system .rn-site-footer .rn-footer-nav .wp-block-navigation-item__content:focus-visible {
  color: var(--rn-white);
  background: transparent;
}

body.rn-design-system .rn-site-footer .rn-footer__bottom p {
  margin: 0;
  color: inherit;
}

body.rn-design-system .rn-site-footer .rn-site-footer__credit a {
  color: inherit;
}

body.rn-design-system .rn-site-footer a:focus-visible {
  outline-color: var(--rn-white);
}

/* Footer brand meta and payment trust row (1.7.1) */

body.rn-design-system .rn-site-footer .rn-site-footer__meta {
  margin-block: 16px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  line-height: 1.7;
}

body.rn-design-system .rn-footer__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-block-start: 36px;
  padding-block-start: 24px;
  border-top: 1px solid rgba(226, 232, 240, 0.18);
}

body.rn-design-system .rn-footer__trust-title {
  margin: 0;
  color: var(--rn-white);
  font-size: 0.875rem;
  font-weight: 700;
}

body.rn-design-system .rn-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Payment methods are named in text rather than shown as brand marks: only the
 * methods the live checkout actually offers are listed, and no logo asset is
 * fabricated.
 */
body.rn-design-system .rn-site-footer .rn-footer__pay li {
  margin: 0;
  padding: 6px 11px;
  border: 1px solid rgba(226, 232, 240, 0.22);
  border-radius: var(--rn-radius-sm);
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

body.rn-design-system .rn-site-footer .rn-footer__bottom {
  margin-block-start: 24px;
}

@media (max-width: 639px) {
  body.rn-design-system .rn-footer__trust {
    margin-block-start: 28px;
    padding-block-start: 20px;
  }

  body.rn-design-system .rn-site-footer .rn-footer-nav .wp-block-navigation-item__content {
    min-height: 40px;
    padding-block: 7px;
  }
}

/* WooCommerce common structure */

body.rn-design-system .woocommerce {
  color: var(--rn-text);
  font-family: var(--rn-font-body);
}

body.rn-design-system .woocommerce :where(.woocommerce-breadcrumb) {
  margin-block: 0 28px;
  color: var(--rn-muted);
  font-size: 0.875rem;
}

body.rn-design-system .woocommerce :where(.woocommerce-breadcrumb a) {
  color: var(--rn-text);
  text-decoration: none;
}

body.rn-design-system .woocommerce :where(.woocommerce-breadcrumb a:hover) {
  color: var(--rn-primary);
}

body.rn-design-system .woocommerce :where(.quantity .qty) {
  width: 84px;
  min-height: 50px;
  padding-inline: 10px;
  text-align: center;
}

body.rn-design-system .woocommerce :where(.star-rating, .stars a) {
  color: var(--rn-star);
}

body.rn-design-system .woocommerce :where(mark) {
  color: inherit;
  background: #FEF3C7;
}

/* Product page */

body.rn-design-system.single-product .woocommerce {
  width: min(1200px, 100%);
  margin-inline: auto;
}

body.rn-design-system.single-product .woocommerce .woocommerce-breadcrumb {
  margin-block-end: 24px;
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.rn-design-system.single-product .woocommerce .woocommerce-breadcrumb a {
  text-decoration: underline;
  text-decoration-color: rgba(100, 116, 139, 0.45);
}

body.rn-design-system.single-product :where(.site-main, main) {
  padding-block: clamp(36px, 6vw, 72px);
}

body.rn-design-system.single-product .woocommerce div.product {
  position: relative;
  margin: 0;
}

body.rn-design-system.single-product .woocommerce div.product :where(.woocommerce-product-gallery, .images) {
  width: 100%;
  margin: 0 0 32px;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
  box-shadow: none;
}

body.rn-design-system.single-product .woocommerce div.product :where(.woocommerce-product-gallery__image, .woocommerce-product-gallery__wrapper) {
  border-radius: calc(var(--rn-radius-lg) - 6px);
  overflow: hidden;
}

body.rn-design-system.single-product .woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  object-fit: contain;
}

body.rn-design-system.single-product .woocommerce div.product :where(.flex-control-thumbs) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-block-start: 16px;
}

body.rn-design-system.single-product .woocommerce div.product :where(.flex-control-thumbs li) {
  width: auto;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-sm);
  overflow: hidden;
  background: var(--rn-white);
}

body.rn-design-system.single-product .woocommerce span.onsale {
  top: 16px;
  left: 16px;
  z-index: 4;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 7px 11px;
  border-radius: var(--rn-radius-sm);
  color: var(--rn-white);
  background: var(--rn-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

body.rn-design-system.single-product .woocommerce div.product :where(.summary) {
  width: 100%;
  margin: 0;
}

body.rn-design-system.single-product .woocommerce div.product .product_title {
  margin-block-end: 16px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(2.25rem, 4vw, 3.375rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

body.rn-design-system.single-product .woocommerce div.product :where(.woocommerce-product-details__short-description) {
  max-width: 62ch;
  margin-block: 0 22px;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.65;
}

body.rn-design-system.single-product .woocommerce div.product :where(.woocommerce-product-details__short-description) > :last-child {
  margin-block-end: 0;
}

body.rn-design-system.single-product .woocommerce div.product p.price,
body.rn-design-system.single-product .woocommerce div.product span.price {
  margin-block: 0 24px;
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
}

body.rn-design-system.single-product .woocommerce div.product :where(.price del) {
  color: var(--rn-muted);
  font-size: 0.8em;
  opacity: 1;
}

body.rn-design-system.single-product .woocommerce div.product :where(.price ins) {
  color: var(--rn-heading);
  text-decoration: none;
}

body.rn-design-system.single-product .woocommerce div.product :where(.woocommerce-price-suffix, .tax_label, .rn-tax-label) {
  color: var(--rn-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

@supports selector(.summary:has(.woocommerce-variation-price > .price)) {
  body.rn-design-system.single-product .woocommerce div.product .summary:has(form.variations_form .woocommerce-variation-price > .price) > p.price {
    display: none;
  }

  body.rn-design-system.single-product .woocommerce.product .wp-block-column:has(form.variations_form .woocommerce-variation-price > .price) > .wp-block-woocommerce-product-price {
    display: none;
  }
}

body.rn-design-system.single-product .woocommerce div.product form.cart {
  margin-block: 0 24px;
}

body.rn-design-system.single-product .woocommerce div.product form.cart .variations,
body.rn-design-system.single-product .woocommerce.product form.variations_form table.variations {
  width: 100%;
  margin-block: 0 16px;
  border: 0;
  table-layout: fixed;
}

body.rn-design-system.single-product .woocommerce div.product form.variations_form table.variations > tbody {
  display: block;
  width: 100%;
}

body.rn-design-system.single-product .woocommerce div.product form.variations_form table.variations > tbody > tr {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin-block-end: 16px;
}

body.rn-design-system.single-product .woocommerce div.product form.variations_form table.variations > tbody > tr:last-child {
  margin-block-end: 0;
}

body.rn-design-system.single-product .woocommerce div.product form.variations_form table.variations :where(th.label, td.value) {
  display: block;
  width: 100%;
  padding: 0;
  text-align: start;
}

body.rn-design-system.single-product .woocommerce div.product form.cart .variations label {
  display: inline-block;
  margin: 0;
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 700;
}

body.rn-design-system.single-product .woocommerce div.product form.cart .variations select {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

body.rn-design-system.single-product .woocommerce div.product form.cart .reset_variations,
body.rn-design-system.single-product .woocommerce.product form.variations_form .reset_variations {
  display: block;
  width: fit-content;
  margin: 6px 0 0 auto;
  padding-block: 2px;
  color: var(--rn-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.rn-design-system.single-product .woocommerce div.product form.cart .reset_variations:hover,
body.rn-design-system.single-product .woocommerce.product form.variations_form .reset_variations:hover {
  color: var(--rn-primary-hover);
}

body.rn-design-system.single-product .woocommerce :where(.single_variation_wrap, .woocommerce-variation) {
  width: 100%;
}

body.rn-design-system.single-product .woocommerce .woocommerce-variation-price {
  margin-block: 0 18px;
}

body.rn-design-system.single-product .woocommerce.product form.variations_form .single_variation {
  margin-block: 0 16px;
}

body.rn-design-system.single-product .woocommerce.product form.variations_form .woocommerce-variation-price {
  margin: 0;
}

body.rn-design-system.single-product .woocommerce div.product form.variations_form .woocommerce-variation-price > .price,
body.rn-design-system.single-product .woocommerce.product form.variations_form .woocommerce-variation-price > .price {
  display: block;
  margin: 0;
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: clamp(1.5rem, 2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
}

body.rn-design-system.single-product .woocommerce div.product form.variations_form .woocommerce-variation-price > .price > :where(.woocommerce-Price-amount, .amount),
body.rn-design-system.single-product .woocommerce.product form.variations_form .woocommerce-variation-price > .price > :where(.woocommerce-Price-amount, .amount) {
  color: var(--rn-heading);
}

body.rn-design-system.single-product .woocommerce div.product form.variations_form .woocommerce-variation-price > .price :where(.woocommerce-price-suffix, .tax_label, .rn-tax-label),
body.rn-design-system.single-product .woocommerce.product form.variations_form .woocommerce-variation-price > .price :where(.woocommerce-price-suffix, .tax_label, .rn-tax-label) {
  margin-inline-start: 0.2em;
  color: var(--rn-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-variation-description) {
  color: var(--rn-muted);
  font-size: 0.9375rem;
}

body.rn-design-system.single-product .woocommerce .woocommerce-variation-add-to-cart {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

body.rn-design-system.single-product .woocommerce form.cart:not(.variations_form) {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

body.rn-design-system.single-product .woocommerce .single_add_to_cart_button {
  min-height: 54px;
  height: auto;
  white-space: normal;
}

body.rn-design-system.single-product .woocommerce form.variations_form .single_add_to_cart_button {
  width: 100%;
  max-width: none;
  flex: 0 0 auto;
  align-self: stretch;
  margin: 0;
}

body.rn-design-system.single-product .woocommerce form.cart:not(.variations_form) .single_add_to_cart_button {
  flex: 1 1 auto;
}

body.rn-design-system.single-product .woocommerce :where(.product_meta) {
  padding-block-start: 20px;
  border-top: 1px solid var(--rn-border);
  color: var(--rn-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

body.rn-design-system.single-product .woocommerce :where(.product_meta > span) {
  display: block;
  margin-block: 5px;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs, .related, .upsells) {
  margin-block-start: clamp(48px, 7vw, 88px);
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs) {
  display: flex;
  max-width: 100%;
  gap: 4px;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--rn-border);
  overflow-x: auto;
  scrollbar-width: thin;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs)::before,
body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs li)::before,
body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs li)::after {
  display: none;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs li) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs li a) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 2px solid transparent;
  color: var(--rn-muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs li a:hover) {
  color: var(--rn-heading);
  background: var(--rn-surface);
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-tabs ul.tabs li.active a) {
  border-bottom-color: var(--rn-primary);
  color: var(--rn-heading);
  background: transparent;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-Tabs-panel) {
  max-width: 900px;
}

body.rn-design-system.single-product .woocommerce :where(.woocommerce-Tabs-panel > h2) {
  margin-block-end: 18px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

/* ReviewNFC configurator compatibility layer */

body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) {
  width: 100%;
  max-width: none;
  margin-block: 24px;
  padding: clamp(20px, 2.5vw, 24px);
  border: 1px solid var(--rn-border);
  border-radius: 16px;
  background: var(--rn-surface);
  box-shadow: none;
}

body.rn-design-system.single-product .woocommerce form.variations_form :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) {
  margin: 0;
}

body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(.form-row, .field, .rn-field) {
  margin-block: 0 18px;
}

body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(.form-row, .field, .rn-field):last-child {
  margin-block-end: 0;
}

body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(h2, h3, h4, legend) {
  margin-block: 0 16px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) > :last-child {
  margin-block-end: 0;
}

body.rn-design-system :where(.rn-field__error, .reviewnfc-error, .field-error, [role="alert"]) {
  display: block;
  margin-block-start: 7px;
  color: var(--rn-error);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Reusable trust badges (content intentionally not supplied) */

.rn-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 20px;
  padding: 0;
  list-style: none;
}

.rn-badge {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid #DBEAFE;
  border-radius: var(--rn-radius-sm);
  color: #1E40AF;
  background: #EFF6FF;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.rn-badge__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--rn-primary);
}

/* Notices */

body.rn-design-system .woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error),
body.rn-design-system :where(.wc-block-components-notice-banner) {
  margin-block: 0 24px;
  border: 1px solid;
  border-radius: var(--rn-radius-md);
  color: var(--rn-heading);
  background: var(--rn-white);
  box-shadow: none;
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.rn-design-system .woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  padding: 16px 18px 16px 48px;
}

body.rn-design-system .wc-block-components-notice-banner {
  padding: 16px 18px;
}

body.rn-design-system .woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  top: 16px;
  left: 18px;
}

body.rn-design-system .woocommerce .woocommerce-message,
body.rn-design-system .wc-block-components-notice-banner.is-success {
  border-color: #BBF7D0;
  color: #14532D;
  background: var(--rn-success-surface);
}

body.rn-design-system .woocommerce .woocommerce-message::before {
  color: var(--rn-success);
}

body.rn-design-system .woocommerce .woocommerce-info,
body.rn-design-system .wc-block-components-notice-banner.is-info {
  border-color: #BAE6FD;
  color: #0C4A6E;
  background: var(--rn-info-surface);
}

body.rn-design-system .woocommerce .woocommerce-info::before {
  color: var(--rn-info);
}

body.rn-design-system .woocommerce .woocommerce-error,
body.rn-design-system .wc-block-components-notice-banner.is-error {
  border-color: #FECACA;
  color: #7F1D1D;
  background: var(--rn-error-surface);
}

body.rn-design-system .woocommerce .woocommerce-error::before {
  color: var(--rn-error);
}

body.rn-design-system .woocommerce :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) :where(a.button) {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 0.875rem;
}

/* Cart: classic and block-based */

body.rn-design-system.woocommerce-cart :where(.site-main, main),
body.rn-design-system.woocommerce-checkout :where(.site-main, main) {
  padding-block: clamp(36px, 6vw, 72px);
}

body.rn-design-system .woocommerce :where(table.shop_table) {
  border: 1px solid var(--rn-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--rn-radius-lg);
  overflow: hidden;
  background: var(--rn-white);
  box-shadow: none;
}

body.rn-design-system .woocommerce :where(table.shop_table th) {
  padding: 14px 16px;
  border-color: var(--rn-border);
  color: var(--rn-heading);
  background: var(--rn-surface);
  font-size: 0.875rem;
  font-weight: 700;
}

body.rn-design-system .woocommerce :where(table.shop_table td) {
  padding: 16px;
  border-color: var(--rn-border);
  color: var(--rn-text);
}

body.rn-design-system .woocommerce :where(table.cart img) {
  width: 72px;
  border: 1px solid var(--rn-border);
  border-radius: 10px;
  background: var(--rn-surface);
}

body.rn-design-system .woocommerce :where(table.cart .product-name a) {
  color: var(--rn-heading);
  font-weight: 600;
  text-decoration: none;
}

body.rn-design-system .woocommerce :where(table.cart .product-remove a) {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--rn-error);
  background: var(--rn-error-surface);
  font-size: 1.25rem;
  text-decoration: none;
}

body.rn-design-system .woocommerce :where(table.cart .product-remove a):hover {
  color: var(--rn-white);
  background: var(--rn-error);
}

body.rn-design-system .woocommerce :where(.cart-collaterals .cart_totals) {
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

body.rn-design-system .woocommerce :where(.cart-collaterals .cart_totals h2) {
  font-size: 1.5rem;
}

body.rn-design-system .woocommerce :where(.wc-proceed-to-checkout a.checkout-button) {
  width: 100%;
  margin: 0;
}

body.rn-design-system :where(.wc-block-cart, .wc-block-checkout) {
  color: var(--rn-text);
  font-family: var(--rn-font-body);
}

body.rn-design-system :where(.wc-block-cart-items, .wc-block-components-totals-wrapper, .wc-block-components-sidebar-layout .wc-block-components-main, .wc-block-components-sidebar) {
  border-color: var(--rn-border);
}

body.rn-design-system :where(.wc-block-components-product-name) {
  color: var(--rn-heading);
  font-weight: 600;
  text-decoration: none;
}

body.rn-design-system :where(.wc-block-components-order-summary-item__image img) {
  border: 1px solid var(--rn-border);
  border-radius: 10px;
  background: var(--rn-surface);
}

/* Checkout: classic and block-based */

body.rn-design-system .woocommerce :where(.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle) {
  margin-block-end: 20px;
}

body.rn-design-system .woocommerce :where(form.checkout_coupon, form.login, form.register) {
  margin-block: 0 24px;
  padding: 24px;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

body.rn-design-system .woocommerce-checkout :where(#customer_details, #order_review) {
  margin-block-end: 32px;
}

body.rn-design-system .woocommerce-checkout :where(#customer_details > div) {
  width: 100%;
  margin-block-end: 28px;
}

body.rn-design-system .woocommerce-checkout :where(#customer_details, #order_review, #payment) h3 {
  margin-block-end: 20px;
  color: var(--rn-heading);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
}

body.rn-design-system .woocommerce-checkout :where(#order_review) {
  position: static;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
  box-shadow: var(--rn-shadow-sm);
}

body.rn-design-system .woocommerce-checkout :where(#order_review table.shop_table) {
  border-radius: var(--rn-radius-md);
}

body.rn-design-system .woocommerce-checkout #payment {
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  color: var(--rn-text);
  background: var(--rn-surface);
}

body.rn-design-system .woocommerce-checkout #payment :where(ul.payment_methods) {
  margin: 0;
  padding: 20px;
  border-bottom-color: var(--rn-border);
  list-style: none;
}

body.rn-design-system .woocommerce-checkout #payment :where(ul.payment_methods li) {
  margin-block: 0 14px;
}

body.rn-design-system .woocommerce-checkout #payment :where(ul.payment_methods li > label) {
  color: var(--rn-heading);
  font-weight: 600;
}

body.rn-design-system .woocommerce-checkout #payment :where(div.payment_box) {
  margin-block: 12px 0;
  padding: 16px;
  border: 1px solid var(--rn-border);
  border-radius: 10px;
  color: var(--rn-text);
  background: var(--rn-white);
}

body.rn-design-system .woocommerce-checkout #payment :where(div.payment_box)::before {
  display: none;
}

body.rn-design-system .woocommerce-checkout #payment :where(.form-row.place-order) {
  margin: 0;
  padding: 20px;
}

body.rn-design-system .woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: 54px;
}

body.rn-design-system :where(.wc-block-components-checkout-step) {
  margin-block-end: 28px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
}

body.rn-design-system :where(.wc-block-components-checkout-step__heading) {
  color: var(--rn-heading);
}

body.rn-design-system :where(.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input) {
  border-color: #CBD5E1;
  border-radius: 10px;
  color: var(--rn-heading);
  background: var(--rn-white);
  box-shadow: none;
}

body.rn-design-system :where(.wc-block-components-text-input input:focus, .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus) {
  border-color: var(--rn-primary);
  box-shadow: var(--rn-focus-ring);
}

body.rn-design-system :where(.wc-block-components-radio-control__option) {
  min-height: 48px;
  padding-block: 12px;
}

/* Generic WooCommerce account and pagination polish */

body.rn-design-system .woocommerce :where(.woocommerce-MyAccount-navigation ul) {
  margin: 0;
  padding: 8px;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  list-style: none;
  background: var(--rn-surface);
}

body.rn-design-system .woocommerce :where(.woocommerce-MyAccount-navigation a) {
  display: block;
  padding: 10px 12px;
  border-radius: var(--rn-radius-sm);
  color: var(--rn-text);
  font-weight: 600;
  text-decoration: none;
}

body.rn-design-system .woocommerce :where(.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover) {
  color: var(--rn-primary);
  background: var(--rn-white);
}

body.rn-design-system .woocommerce :where(nav.woocommerce-pagination ul) {
  display: inline-flex;
  gap: 6px;
  padding: 0;
  border: 0;
}

body.rn-design-system .woocommerce :where(nav.woocommerce-pagination ul li) {
  border: 0;
}

body.rn-design-system .woocommerce :where(nav.woocommerce-pagination ul li a, nav.woocommerce-pagination ul li span) {
  display: inline-flex;
  min-width: 42px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-sm);
  color: var(--rn-heading);
  background: var(--rn-white);
}

body.rn-design-system .woocommerce :where(nav.woocommerce-pagination ul li span.current, nav.woocommerce-pagination ul li a:hover) {
  border-color: var(--rn-primary);
  color: var(--rn-white);
  background: var(--rn-primary);
}

/* Responsive layout */

@media (min-width: 640px) {
  :root {
    --rn-gutter: 28px;
  }

  .rn-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rn-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rn-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  :root {
    --rn-gutter: 32px;
  }

  .rn-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rn-footer__grid {
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(140px, 1fr));
  }

  body.rn-design-system.single-product .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(36px, 4.5vw, 56px);
    align-items: start;
  }

  body.rn-design-system.single-product .woocommerce div.product :where(.woocommerce-product-gallery, .images) {
    grid-column: 1;
    margin-block-end: 0;
  }

  body.rn-design-system.single-product .woocommerce div.product :where(.summary) {
    grid-column: 2;
  }

  body.rn-design-system.single-product .woocommerce div.product :where(.woocommerce-tabs, .related, .upsells) {
    grid-column: 1 / -1;
  }

  body.rn-design-system .woocommerce form.checkout #customer_details.col2-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
  }

  body.rn-design-system .woocommerce form.checkout #customer_details.col2-set > :where(.col-1, .col-2) {
    float: none;
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 1200px) {
  :root {
    --rn-container: 1240px;
  }

  body.rn-design-system.single-product .woocommerce div.product {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 899px) {
  body.rn-design-system.single-product .woocommerce form.cart:not(.variations_form) {
    align-items: stretch;
  }

  body.rn-design-system.single-product .woocommerce .single_add_to_cart_button {
    min-width: 0;
  }

  body.rn-design-system .woocommerce :where(.cart-collaterals .cart_totals) {
    width: 100%;
  }
}

@media (max-width: 639px) {
  body.rn-design-system .rn-header__inner {
    min-height: 68px;
    gap: 10px;
  }

  body.rn-design-system .rn-wordmark {
    font-size: 1.25rem;
  }

  body.rn-design-system .rn-header__actions {
    margin-inline-start: auto;
    gap: 4px;
  }

  body.rn-design-system .rn-site-cart {
    order: 1;
  }

  body.rn-design-system .rn-site-nav {
    order: 2;
  }

  body.rn-design-system .rn-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  body.rn-design-system.single-product .woocommerce form.cart:not(.variations_form) {
    flex-wrap: wrap;
  }

  body.rn-design-system.single-product .woocommerce :where(.quantity) {
    flex: 0 0 auto;
  }

  body.rn-design-system.single-product .woocommerce form.cart:not(.variations_form) .single_add_to_cart_button {
    flex: 1 1 calc(100% - 100px);
  }

  body.rn-design-system.single-product .woocommerce form.variations_form .single_add_to_cart_button {
    width: 100%;
    flex: 0 0 auto;
  }

  body.rn-design-system .woocommerce :where(table.shop_table_responsive tr td, table.shop_table_responsive tr th) {
    padding: 12px 14px;
  }

  body.rn-design-system .woocommerce :where(.woocommerce-tabs ul.tabs) {
    overflow-x: auto;
  }
}

@media (max-width: 782px) {
  body.rn-design-system.admin-bar .rn-header--sticky {
    top: 46px;
  }
}

/* ==========================================================================
   Homepage
   Presentation for the native block homepage in site-editor/homepage.html.
   Everything below is scoped to .rn-home so no other template is affected.
   ========================================================================== */

body.rn-design-system .rn-home {
  /* Match the header and footer container instead of the 1240px wide variant. */
  --rn-container: 1200px;
  --rn-home-space: clamp(56px, 7vw, 104px);
  max-width: none;
}

body.rn-design-system .rn-home > * {
  margin-block: 0;
}

body.rn-design-system .rn-home-section {
  padding-block: var(--rn-home-space);
}

body.rn-design-system .rn-home-section--hero {
  padding-block: 48px 56px;
}

@media (min-width: 640px) {
  body.rn-design-system .rn-home-section--hero {
    padding-block: 64px 72px;
  }
}

@media (min-width: 1024px) {
  body.rn-design-system .rn-home-section--hero {
    padding-block: 80px 88px;
  }
}

body.rn-design-system .rn-home-section--surface {
  background: var(--rn-surface);
}

body.rn-design-system .rn-home-section--cta {
  color: var(--rn-white);
  background: var(--rn-primary);
}

/*
 * The homepage sections own all of their vertical rhythm.
 *
 * The page template stores its spacing as INLINE block styles, not as CSS:
 * <main> carries margin-top:var(--wp--preset--spacing--60) and the wrapper
 * Group inside it carries padding-top and padding-bottom of the same preset.
 * On this install that preset resolves to 70px, so the hero sat 70 + 70 + 72
 * = 212px below the header and a 70px white strip appeared between the CTA
 * band and the footer.
 *
 * Inline styles outrank every normal stylesheet declaration, so !important is
 * the only way to neutralise them from here. Scoped to the front page, so all
 * other pages keep the template's spacing. Setting those two controls to 0 in
 * the Site Editor is the cleaner fix; these rules then become harmless no-ops.
 */
body.rn-design-system.home .wp-site-blocks > main.wp-block-group {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

body.rn-design-system.home main.wp-block-group > .wp-block-group {
  padding-block: 0 !important;
}

/*
 * The same template, and therefore the same inline spacing, is used by every
 * ReviewNFC page and by the 404 template. Matched on the presence of a
 * ReviewNFC page wrapper so WooCommerce's Cart, Checkout and My Account pages
 * keep the theme's own spacing untouched. Where :has() is unsupported the only
 * consequence is the original extra whitespace, never a broken layout.
 */
body.rn-design-system:has(.rn-page, .rn-404) .wp-site-blocks > main.wp-block-group {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

body.rn-design-system:has(.rn-page, .rn-404) main.wp-block-group > .wp-block-group {
  padding-block: 0 !important;
}

body.rn-design-system.home :where(.wp-block-post-content, .entry-content) {
  margin-block: 0;
}

body.rn-design-system.home .rn-home {
  margin-block: 0;
}

/*
 * Any page that ends on a full-width CTA band supplies its own closing space,
 * so the global footer offset would read as a stray white strip.
 */
body.rn-design-system.home :where(.wp-site-blocks > footer, footer.wp-block-template-part),
body.rn-design-system:has(.rn-page-section--cta) :where(.wp-site-blocks > footer, footer.wp-block-template-part) {
  margin-block-start: 0;
}

/*
 * Homepage grids are CSS grid, but their children are still children of a flow
 * layout, so the block-gap rule gave every item except the first a top margin.
 * In a grid that made the first card taller than the rest.
 */
body.rn-design-system :where(.rn-home, .rn-product) :where(.rn-home-hero, .rn-home-steps, .rn-home-cards, .rn-home-compare, .rn-home-spotlight, .rn-home-faq, .rn-home-cases, .rn-proof, .rn-product-steps, .rn-product-cards, .rn-product-faq) > * {
  margin-block-start: 0;
}

/* Homepage typography */

body.rn-design-system .rn-home-eyebrow {
  margin-block: 0 14px;
  color: var(--rn-primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.rn-design-system .rn-home-intro,
body.rn-design-system .rn-product-intro {
  max-width: 760px;
  margin-block: 0 clamp(32px, 4vw, 48px);
}

body.rn-design-system .rn-home-intro h2,
body.rn-design-system .rn-product-intro h2 {
  margin-block: 0 14px;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
}

body.rn-design-system .rn-home-intro p,
body.rn-design-system .rn-product-intro p {
  margin-block: 0;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.65;
}

body.rn-design-system .rn-home-price {
  margin-block: 0 6px;
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
}

body.rn-design-system .rn-home-price-note {
  margin-block: 0 20px;
  color: var(--rn-muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/*
 * ReviewNFC calls to action. Keyed on .rn-cta, which only ever appears in
 * ReviewNFC markup, so native WooCommerce and Gutenberg buttons are untouched.
 * Used by the homepage, the product page, the service pages and the 404.
 */

body.rn-design-system :where(.rn-home, .rn-product, .rn-page, .rn-404) .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-block: 0;
}

body.rn-design-system .rn-cta > .wp-block-button__link {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--rn-radius-md);
  box-shadow: none;
  font-family: var(--rn-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.rn-design-system .rn-cta--primary > .wp-block-button__link {
  border-color: var(--rn-primary);
  color: var(--rn-white);
  background-color: var(--rn-primary);
}

body.rn-design-system .rn-cta--primary > .wp-block-button__link:hover {
  border-color: var(--rn-primary-hover);
  color: var(--rn-white);
  background-color: var(--rn-primary-hover);
  transform: translateY(-1px);
}

body.rn-design-system .rn-cta--secondary > .wp-block-button__link {
  border-color: var(--rn-border);
  color: var(--rn-heading);
  background-color: var(--rn-white);
}

body.rn-design-system .rn-cta--secondary > .wp-block-button__link:hover {
  border-color: #CBD5E1;
  color: var(--rn-heading);
  background-color: var(--rn-surface);
}

body.rn-design-system .rn-cta--invert > .wp-block-button__link {
  border-color: var(--rn-white);
  color: var(--rn-primary-hover);
  background-color: var(--rn-white);
}

body.rn-design-system .rn-cta--invert > .wp-block-button__link:hover {
  border-color: var(--rn-white);
  color: var(--rn-primary-hover);
  background-color: #EFF6FF;
}

body.rn-design-system .rn-cta > .wp-block-button__link:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 2px;
  box-shadow: var(--rn-focus-ring);
}

body.rn-design-system .rn-cta--invert > .wp-block-button__link:focus-visible {
  outline-color: var(--rn-white);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* Hero */

/*
 * The copy column always starts at the top of the row, so the hero never
 * centres itself against a taller visual. Only the visual is centred, which
 * keeps the composition once real product photography replaces the schematic.
 */
body.rn-design-system .rn-home-hero {
  display: grid;
  align-items: start;
  gap: clamp(36px, 5vw, 56px);
}

body.rn-design-system .rn-home-hero__visual {
  align-self: center;
}

body.rn-design-system .rn-home-hero__copy > :last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-home-hero__title {
  margin-block: 0 20px;
  font-size: clamp(2.375rem, 4.2vw, 3.875rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

body.rn-design-system .rn-home-hero__lead {
  max-width: 620px;
  margin-block: 0 30px;
  color: var(--rn-text);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  line-height: 1.65;
}

body.rn-design-system .rn-home-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-block: 26px 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-home-benefits li,
body.rn-design-system .rn-home-list li,
body.rn-design-system .rn-product-usps li {
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 10.4 4.1 4.1L16 5.9' stroke='%2316A34A' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
}

body.rn-design-system .rn-home-benefits li {
  padding-inline-start: 26px;
  background-position: left 2px;
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Hero visual placeholder: replaced by a core Image block once the photo exists */

body.rn-design-system .rn-home-visual {
  display: flex;
  aspect-ratio: 3 / 2;
  min-height: 220px;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
  box-shadow: var(--rn-shadow-sm);
}

body.rn-design-system .rn-home-visual__art {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

body.rn-design-system .rn-home-hero__visual img {
  display: block;
  width: 100%;
  border-radius: var(--rn-radius-lg);
}

/* How it works */

body.rn-design-system .rn-home-steps,
body.rn-design-system .rn-home-cards,
body.rn-design-system .rn-home-compare,
body.rn-design-system .rn-product-steps,
body.rn-design-system .rn-product-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

body.rn-design-system .rn-home-step,
body.rn-design-system .rn-home-card,
body.rn-design-system .rn-product-step,
body.rn-design-system .rn-product-card {
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
}

body.rn-design-system .rn-home-step h3,
body.rn-design-system .rn-home-card h3,
body.rn-design-system .rn-product-step h3,
body.rn-design-system .rn-product-card h3 {
  margin-block: 0 10px;
  font-size: 1.125rem;
  line-height: 1.35;
}

body.rn-design-system .rn-home-step p,
body.rn-design-system .rn-home-card p,
body.rn-design-system .rn-product-step p,
body.rn-design-system .rn-product-card p {
  margin-block: 0;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/*
 * Ordering steps: a check badge, not a number (1.7.3 correction).
 *
 * The homepage runs "Zo werkt ReviewNFC" (1-2-3) directly above the ordering
 * section, which also started at 1. Stacked on a phone the two read as one
 * broken sequence: 1 2 3 1 2 3 4. Renumbering to 4-5-6-7 would be worse, since
 * they are not one process. So the ordering steps drop numbering entirely and
 * take a tinted check badge instead — same size and rhythm as the numbered
 * badge, immediately distinguishable from it.
 *
 * The single product template keeps `.rn-product-step__number` numbered: that
 * page has one sequence, so numbering there is still correct.
 *
 * The badge is decorative and marked aria-hidden in the markup; the step
 * heading already carries the meaning, so nothing is lost to a screen reader.
 */
body.rn-design-system .rn-home-step .rn-home-step__icon {
  display: flex;
  width: 40px;
  height: 40px;
  flex: none;
  margin-block: 0 22px;
  border-radius: var(--rn-radius-md);
  background-color: rgba(37, 99, 235, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 10.4 4.1 4.1L16 5.9' stroke='%232563EB' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

@media (forced-colors: active) {
  /* Background images are dropped in forced colours, so give the badge an
     outline that survives and keeps the step rhythm readable. */
  body.rn-design-system .rn-home-step .rn-home-step__icon {
    border: 1px solid CanvasText;
  }
}

body.rn-design-system .rn-product-step .rn-product-step__number,
body.rn-design-system .rn-home-step .rn-home-step__number {
  /* Block-level flex: an inline-flex box sits on a text baseline, which ate
     most of the gap between the badge and the step heading. The extra class
     also outranks the .rn-home-step p rule that was zeroing this margin. */
  display: flex;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-block: 0 22px;
  border-radius: var(--rn-radius-md);
  color: var(--rn-white);
  background: var(--rn-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
}

/* Product spotlight */

body.rn-design-system .rn-home-spotlight {
  display: grid;
  align-items: center;
  gap: clamp(28px, 4vw, 44px);
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

body.rn-design-system .rn-home-spotlight h2 {
  margin-block: 0 16px;
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.15;
}

body.rn-design-system .rn-home-spotlight__main p {
  max-width: 62ch;
  margin-block: 0 22px;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.65;
}

body.rn-design-system .rn-home-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-home-list li {
  padding-inline-start: 28px;
  background-position: left 3px;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.rn-design-system .rn-home-spotlight__aside {
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  background: var(--rn-white);
  box-shadow: var(--rn-shadow-sm);
}

body.rn-design-system .rn-home-spotlight__main > :last-child,
body.rn-design-system .rn-home-spotlight__aside > :last-child {
  margin-block-end: 0;
}

/* Business types */

body.rn-design-system .rn-home-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-home-chips li {
  margin: 0;
  padding: 11px 18px;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  color: var(--rn-heading);
  background: var(--rn-surface);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Standard versus own logo */

body.rn-design-system .rn-home-plan {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
  box-shadow: var(--rn-shadow-sm);
}

body.rn-design-system .rn-home-plan h3 {
  margin-block: 0 12px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
}

body.rn-design-system .rn-home-plan p {
  margin-block: 0 18px;
  color: var(--rn-text);
  font-size: 1rem;
  line-height: 1.6;
}

body.rn-design-system .rn-home-plan .rn-home-price {
  margin-block: 0 22px;
}

body.rn-design-system .rn-home-plan .wp-block-buttons {
  margin-block-start: auto;
}

/* FAQ: native details blocks, no accordion JavaScript */

body.rn-design-system .rn-home-faq,
body.rn-design-system .rn-product-faq {
  max-width: 860px;
}

body.rn-design-system .rn-home-faq .wp-block-details,
body.rn-design-system .rn-product-faq .wp-block-details {
  margin-block: 0 12px;
  padding-inline: clamp(16px, 2vw, 22px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  background: var(--rn-white);
}

body.rn-design-system .rn-home-faq .wp-block-details:last-child,
body.rn-design-system .rn-product-faq .wp-block-details:last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-home-faq .wp-block-details[open],
body.rn-design-system .rn-product-faq .wp-block-details[open] {
  padding-block-end: 4px;
}

body.rn-design-system .rn-home-faq summary,
body.rn-design-system .rn-product-faq summary {
  padding-block: 17px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  cursor: pointer;
}

body.rn-design-system .rn-home-faq summary:hover,
body.rn-design-system .rn-product-faq summary:hover {
  color: var(--rn-primary);
}

body.rn-design-system .rn-home-faq .wp-block-details[open] summary,
body.rn-design-system .rn-product-faq .wp-block-details[open] summary {
  margin-block-end: 14px;
  padding-block-end: 15px;
  border-bottom: 1px solid var(--rn-border);
}

body.rn-design-system .rn-home-faq .wp-block-details p,
body.rn-design-system .rn-product-faq .wp-block-details p {
  max-width: 68ch;
  margin-block: 0 17px;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Final call to action */

body.rn-design-system .rn-home-cta {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

body.rn-design-system .rn-home-cta h2 {
  margin-block: 0 16px;
  color: var(--rn-white);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
}

body.rn-design-system .rn-home-cta p {
  margin-block: 0 30px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.65;
}

body.rn-design-system .rn-home-cta .wp-block-buttons {
  justify-content: center;
}

/* Homepage responsive layout */

@media (min-width: 640px) {
  body.rn-design-system .rn-home-steps,
  body.rn-design-system .rn-home-cards,
  body.rn-design-system .rn-home-compare,
  body.rn-design-system .rn-product-steps,
  body.rn-design-system .rn-product-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  body.rn-design-system .rn-home-hero {
    grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
    gap: clamp(40px, 4.5vw, 72px);
  }

  body.rn-design-system .rn-home-spotlight {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  body.rn-design-system .rn-home-steps,
  body.rn-design-system .rn-home-cards,
  body.rn-design-system .rn-home-compare,
  body.rn-design-system .rn-product-steps,
  body.rn-design-system .rn-product-cards {
    gap: 24px;
  }

  body.rn-design-system .rn-product-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  body.rn-design-system .rn-home-steps,
  body.rn-design-system .rn-home-cards,
  body.rn-design-system .rn-product-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  /* Single-column hero: keep the product visual at a sensible reading size
     instead of stretching it across the whole container. */
  body.rn-design-system .rn-home-visual,
  body.rn-design-system .rn-home-hero__visual img {
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 479px) {
  body.rn-design-system .rn-home .rn-home-hero__actions .wp-block-button,
  body.rn-design-system .rn-home .rn-home-hero__actions .wp-block-button__link {
    width: 100%;
  }
}

/* ==========================================================================
   WooCommerce Mini-Cart drawer
   Presentation only. The block, its drawer, its state and its accessibility
   remain entirely WooCommerce's. Width is left at WooCommerce's own default,
   which already sits inside the 420-480px target.
   ========================================================================== */

/*
 * The drawer title is an <h2>, so it was inheriting the global display
 * heading scale and rendering at up to 48px with an awkward wrap.
 */
body.rn-design-system .wc-block-mini-cart__title {
  display: block;
  margin-block: 0;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.625rem, 4vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

body.rn-design-system .wp-block-woocommerce-mini-cart-title-items-counter-block {
  display: inline-block;
  margin-inline-start: 2px;
  color: var(--rn-muted);
  font-family: var(--rn-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}

body.rn-design-system .wc-block-mini-cart__drawer .wc-block-components-drawer__content {
  color: var(--rn-text);
  background: var(--rn-white);
  font-family: var(--rn-font-body);
}

/* Product rows */

body.rn-design-system .wc-block-mini-cart__products-table .wc-block-cart-items__row {
  padding-block: 16px;
  border-bottom: 1px solid var(--rn-border);
}

body.rn-design-system .wc-block-mini-cart-items :where(.wc-block-cart-item__image img, .wc-block-components-product-image img) {
  border: 1px solid var(--rn-border);
  border-radius: 10px;
  background: var(--rn-surface);
}

body.rn-design-system .wc-block-mini-cart-items .wc-block-components-product-name {
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

/* Variation and ReviewNFC configurator metadata */
body.rn-design-system .wc-block-components-product-details {
  margin-block: 6px 0;
  color: var(--rn-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

body.rn-design-system .wc-block-components-product-details__name {
  color: var(--rn-text);
  font-weight: 600;
}

body.rn-design-system .wc-block-mini-cart-items .wc-block-components-product-price {
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Drawer footer */

body.rn-design-system .wc-block-mini-cart__footer {
  border-top: 1px solid var(--rn-border);
  background: var(--rn-white);
}

body.rn-design-system .wc-block-mini-cart__footer-subtotal {
  margin-block-end: 14px;
  color: var(--rn-heading);
  font-size: 1rem;
  font-weight: 700;
}

body.rn-design-system .wc-block-mini-cart__footer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.rn-design-system .wc-block-mini-cart__footer :where(.wc-block-mini-cart__footer-checkout, .wc-block-mini-cart__footer-cart),
body.rn-design-system .wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button {
  display: inline-flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--rn-radius-md);
  box-shadow: none;
  font-family: var(--rn-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}

body.rn-design-system .wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout,
body.rn-design-system .wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button {
  border-color: var(--rn-primary);
  color: var(--rn-white);
  background-color: var(--rn-primary);
}

body.rn-design-system .wc-block-mini-cart__footer .wc-block-mini-cart__footer-checkout:hover,
body.rn-design-system .wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button:hover {
  border-color: var(--rn-primary-hover);
  color: var(--rn-white);
  background-color: var(--rn-primary-hover);
}

body.rn-design-system .wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart {
  border-color: var(--rn-border);
  color: var(--rn-heading);
  background-color: var(--rn-white);
}

body.rn-design-system .wc-block-mini-cart__footer .wc-block-mini-cart__footer-cart:hover {
  border-color: #CBD5E1;
  color: var(--rn-heading);
  background-color: var(--rn-surface);
}

body.rn-design-system .wc-block-mini-cart__drawer :where(button, a):focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 2px;
  box-shadow: var(--rn-focus-ring);
}

body.rn-design-system .wc-block-components-drawer__close:focus-visible {
  outline-offset: 0;
}

/* ==========================================================================
   Product page
   Presentation for the Single Product block template in
   site-editor/single-product-template.html. WooCommerce keeps ownership of
   the gallery, price, variations form, configurator and details blocks.
   ========================================================================== */

/*
 * WooCommerce wraps the whole single-product body in .woocommerce.product,
 * between the header and footer template parts. The older rule capped that
 * wrapper at 1200px, which left the product container 64px narrower than the
 * header and made full-width section bands impossible. The template now owns
 * its width through .rn-container, so the cap is released here. Targeted by
 * position rather than :has(), so it works in every supported browser.
 */
body.rn-design-system.single-product .wp-site-blocks > .woocommerce.product {
  width: auto;
  max-width: none;
  margin-inline: 0;
}

body.rn-design-system .rn-product {
  --rn-container: 1200px;
}

body.rn-design-system.single-product main.rn-product {
  margin-block: 0;
  padding-block: 0;
}

body.rn-design-system .rn-product > * {
  margin-block: 0;
}

body.rn-design-system .rn-product-shell {
  padding-block: clamp(18px, 2.5vw, 28px) clamp(48px, 6vw, 80px);
}

body.rn-design-system .rn-product-shell > * {
  margin-block: 0;
}

body.rn-design-system .rn-product-breadcrumbs {
  margin-block-end: clamp(20px, 3vw, 32px);
}

body.rn-design-system .rn-product-hero {
  display: grid;
  align-items: start;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: 1fr;
}

body.rn-design-system .rn-product-hero > * {
  margin-block: 0;
}

/* Gallery */

/*
 * WooCommerce's classic stylesheet still applies `width: 48%; float: left` to
 * the gallery through `.woocommerce div.product div.images`. That selector does
 * match here, because its leading `.woocommerce` resolves to the <body> class
 * rather than to the template wrapper, and at (0,3,2) it outweighed the earlier
 * (0,3,1) rule. The result was a 204px gallery inside a 425px column. The extra
 * class raises this to (0,4,1) and the float is cleared.
 */
body.rn-design-system .rn-product .rn-product-hero__media .woocommerce-product-gallery {
  width: 100%;
  float: none;
  margin: 0;
  padding: clamp(18px, 2.5vw, 32px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
  box-shadow: none;
}

body.rn-design-system .rn-product-hero__media .woocommerce-product-gallery__image img {
  width: 100%;
  border-radius: var(--rn-radius-md);
  object-fit: contain;
}

/*
 * Until real photography is uploaded WooCommerce renders its grey placeholder.
 * Replace it with the ReviewNFC schematic used on the homepage. The rule stops
 * applying by itself as soon as the product has images, because WooCommerce
 * drops the --without-images class.
 */
body.rn-design-system .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder {
  display: flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--rn-radius-md);
  background-color: var(--rn-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 320'%3E%3Crect x='68' y='52' width='344' height='216' rx='18' fill='%23FFFFFF' stroke='%23E2E8F0' stroke-width='2'/%3E%3Cg fill='none' stroke='%232563EB' stroke-width='8' stroke-linecap='round'%3E%3Cpath d='M158 132a40 40 0 0 1 0 56'/%3E%3Cpath d='M174 116a62 62 0 0 1 0 88'/%3E%3Cpath d='M190 100a84 84 0 0 1 0 120'/%3E%3C/g%3E%3Ccircle cx='130' cy='160' r='9' fill='%232563EB'/%3E%3Cg fill='%230F172A'%3E%3Crect x='272' y='112' width='28' height='28' rx='6'/%3E%3Crect x='340' y='112' width='28' height='28' rx='6'/%3E%3Crect x='272' y='180' width='28' height='28' rx='6'/%3E%3Crect x='316' y='112' width='10' height='10' rx='3'/%3E%3Crect x='316' y='130' width='10' height='10' rx='3'/%3E%3Crect x='272' y='152' width='10' height='10' rx='3'/%3E%3Crect x='290' y='152' width='10' height='10' rx='3'/%3E%3Crect x='316' y='152' width='10' height='10' rx='3'/%3E%3Crect x='340' y='152' width='10' height='10' rx='3'/%3E%3Crect x='358' y='152' width='10' height='10' rx='3'/%3E%3Crect x='316' y='180' width='10' height='10' rx='3'/%3E%3Crect x='340' y='180' width='10' height='10' rx='3'/%3E%3Crect x='358' y='190' width='10' height='10' rx='3'/%3E%3Crect x='334' y='198' width='10' height='10' rx='3'/%3E%3Crect x='316' y='198' width='10' height='10' rx='3'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='280' y='120' width='12' height='12' rx='2'/%3E%3Crect x='348' y='120' width='12' height='12' rx='2'/%3E%3Crect x='280' y='188' width='12' height='12' rx='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78% auto;
}

body.rn-design-system .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image--placeholder img {
  visibility: hidden;
}

/* Buy panel */

body.rn-design-system .rn-product-hero__buy > * {
  margin-block: 0;
}

body.rn-design-system .rn-product-title {
  margin-block: 0 14px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

body.rn-design-system .rn-product-excerpt p {
  max-width: 56ch;
  margin-block: 0 20px;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.65;
}

body.rn-design-system .rn-product-price {
  margin-block: 0 20px;
}

body.rn-design-system .rn-product-price :where(.wc-block-components-product-price, .woocommerce-Price-amount) {
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: clamp(1.5rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
}

body.rn-design-system .rn-product-price .woocommerce-price-suffix {
  color: var(--rn-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

body.rn-design-system .rn-product-usps {
  display: grid;
  gap: 8px;
  margin-block: 0 24px;
  padding: 0;
  list-style: none;
}

/* Indent past the check icon these items inherit, and give the buy panel's
   selling points the weight they need next to the price. */
body.rn-design-system .rn-product-usps li {
  padding-inline-start: 28px;
  background-position: left 3px;
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.55;
}

body.rn-design-system .rn-product-reassure {
  margin-block: 22px 0;
  padding: 16px 18px;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  background: var(--rn-surface);
}

body.rn-design-system .rn-product-reassure__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-product-reassure__list li {
  margin: 0;
  color: var(--rn-text);
  font-size: 0.875rem;
  line-height: 1.55;
}

/*
 * Variation controls. The older rules in the product-page section above are
 * keyed on `div.product`, which the WooCommerce block template never renders
 * (`woocommerce` and `product` sit on the same element), so the attribute rows
 * were still falling back to WooCommerce's two-column table. These selectors
 * are keyed on the template wrapper instead.
 */
body.rn-design-system .rn-product form.variations_form table.variations,
body.rn-design-system .rn-product form.variations_form table.variations > tbody {
  display: block;
  width: 100%;
  margin: 0;
  border: 0;
}

body.rn-design-system .rn-product form.variations_form table.variations > tbody > tr {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  margin-block-end: 16px;
}

body.rn-design-system .rn-product form.variations_form table.variations > tbody > tr:last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-product form.variations_form table.variations :where(th.label, td.value) {
  display: block;
  width: 100%;
  padding: 0;
  text-align: start;
}

body.rn-design-system .rn-product form.variations_form table.variations label {
  display: inline-block;
  margin: 0;
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.45;
}

body.rn-design-system .rn-product form.variations_form table.variations select {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

body.rn-design-system .rn-product form.variations_form .reset_variations {
  display: block;
  width: fit-content;
  margin: 6px 0 0 auto;
  color: var(--rn-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

body.rn-design-system .rn-product .woocommerce-variation-add-to-cart {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

body.rn-design-system .rn-product .single_add_to_cart_button {
  width: 100%;
  min-height: 54px;
  height: auto;
  white-space: normal;
}

body.rn-design-system .rn-product-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 14px 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rn-border);
  list-style: none;
}

body.rn-design-system .rn-product-pay li {
  margin: 0;
  padding: 5px 10px;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-sm);
  color: var(--rn-muted);
  background: var(--rn-white);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

body.rn-design-system .rn-product-hero__buy .wp-block-woocommerce-product-meta {
  margin-block-start: 22px;
  padding-block-start: 16px;
  border-top: 1px solid var(--rn-border);
  color: var(--rn-muted);
  font-size: 0.8125rem;
}

/* Supporting sections */

body.rn-design-system .rn-product-section {
  padding-block: clamp(48px, 6vw, 88px);
}

body.rn-design-system .rn-product-section--surface {
  background: var(--rn-surface);
}

body.rn-design-system .rn-product-section--details {
  padding-block: clamp(40px, 5vw, 72px);
}

/*
 * Long-form commercial content, between the process section and the tabs.
 * Editorial rather than card-based: one readable column, centred in the
 * container, sharing the archive's heading and body scale.
 */
body.rn-design-system .rn-product-longform {
  max-width: 780px;
  margin-inline: auto;
}

/* The one subtle surface break in the run, on the ordering section. */
body.rn-design-system .rn-product-longform__panel {
  margin-block-start: clamp(32px, 4vw, 44px);
  padding: clamp(24px, 3.5vw, 36px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

body.rn-design-system .rn-product-longform__panel > :first-child {
  margin-block-start: 0;
}

body.rn-design-system .rn-product-longform__panel > :last-child {
  margin-block-end: 0;
}

@media (max-width: 639px) {
  /* Type sizes come from the shared editorial rules further down this file,
     which already resolve to 24px headings and 17px body at this width. */
  body.rn-design-system .rn-product-longform h2 {
    margin-block: 28px 10px;
  }

  body.rn-design-system .rn-product-longform__panel {
    margin-block-start: 28px;
    padding: 20px;
  }
}

body.rn-design-system .rn-product-details .woocommerce-tabs {
  margin-block-start: 0;
}

/*
 * The product hero stays single column until 1024px. At 900px the gallery and
 * the buy panel were both around 400px wide, which left the variation selects
 * and the configurator visibly cramped; a tablet reads better as one column.
 */
@media (min-width: 1024px) {
  body.rn-design-system .rn-product-hero {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    gap: clamp(32px, 4vw, 56px);
  }
}

/* ==========================================================================
   Service and legal pages (.rn-page)
   Contact, shipping, returns, privacy, cookies, terms and the 404 template.
   ========================================================================== */

body.rn-design-system .rn-page {
  --rn-container: 1200px;
}

body.rn-design-system .rn-page > * {
  margin-block: 0;
}

body.rn-design-system .rn-page-section {
  padding-block: 48px;
}

@media (min-width: 640px) {
  body.rn-design-system .rn-page-section {
    padding-block: 64px;
  }
}

@media (min-width: 1024px) {
  body.rn-design-system .rn-page-section {
    padding-block: 80px;
  }
}

body.rn-design-system .rn-page-section--surface {
  background: var(--rn-surface);
}

body.rn-design-system .rn-page-section--cta {
  color: var(--rn-white);
  background: var(--rn-primary);
}

body.rn-design-system .rn-page-intro {
  max-width: 760px;
  margin-block: 0 clamp(28px, 3.5vw, 40px);
}

body.rn-design-system .rn-page-intro > :last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-page-intro h2 {
  margin-block: 0 12px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.2;
}

body.rn-design-system .rn-page-intro p {
  margin-block: 0;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.65;
}

/* Card grids on service pages */

body.rn-design-system .rn-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

body.rn-design-system .rn-page-grid > * {
  margin-block: 0;
}

/* Kept next to the base rule: the homepage media queries appear earlier in this
   file, so breakpoints declared there would be overridden by the rule above. */
@media (min-width: 640px) {
  body.rn-design-system .rn-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  body.rn-design-system .rn-page-grid {
    gap: 24px;
  }

  body.rn-design-system .rn-page-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.rn-design-system .rn-page-card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
}

body.rn-design-system .rn-page-card > :last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-page-card :where(h2, h3) {
  margin-block: 0 10px;
  font-size: 1.25rem;
  line-height: 1.3;
}

body.rn-design-system .rn-page-card h3 {
  font-size: 1.0625rem;
}

body.rn-design-system .rn-page-card :where(h2, h3) a {
  color: var(--rn-heading);
  text-decoration: none;
}

body.rn-design-system .rn-page-card :where(h2, h3) a:hover {
  color: var(--rn-primary);
}

body.rn-design-system .rn-page-card p {
  margin-block: 0 18px;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

body.rn-design-system .rn-page-card--primary {
  border-color: #BFDBFE;
  background: #EFF6FF;
}

body.rn-design-system .rn-page-card .wp-block-buttons {
  margin-block: 0;
}

/* Email links are written as HTML entities in the page markup; this keeps a
   long address from overflowing its container on narrow screens. */
body.rn-design-system .rn-mail {
  word-break: break-word;
}

/* Closing call to action on a service page */

body.rn-design-system .rn-page-cta {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

body.rn-design-system .rn-page-cta h2 {
  margin-block: 0 14px;
  color: var(--rn-white);
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.2;
}

body.rn-design-system .rn-page-cta p {
  margin-block: 0 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.65;
}

body.rn-design-system .rn-page-cta .wp-block-buttons {
  justify-content: center;
}

body.rn-design-system .rn-page-body {
  max-width: 760px;
}

body.rn-design-system .rn-page-body > :last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-page-title {
  margin-block: 0 16px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

body.rn-design-system .rn-page-lead {
  margin-block: 0 8px;
  color: var(--rn-text);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.65;
}

body.rn-design-system .rn-page-updated {
  margin-block: 0 36px;
  color: var(--rn-muted);
  font-size: 0.875rem;
}

body.rn-design-system .rn-page-body h2 {
  margin-block: 40px 12px;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.25;
}

body.rn-design-system .rn-page-body h3 {
  margin-block: 28px 8px;
  font-size: 1.125rem;
  line-height: 1.35;
}

body.rn-design-system .rn-page-body :where(p, li) {
  color: var(--rn-text);
  line-height: 1.7;
}

body.rn-design-system .rn-page-body ul,
body.rn-design-system .rn-page-body ol {
  padding-inline-start: 22px;
}

body.rn-design-system .rn-page-body li {
  margin-block-end: 8px;
}

body.rn-design-system .rn-page-note {
  margin-block: 24px;
  padding: 16px 18px;
  border: 1px solid var(--rn-border);
  border-inline-start: 3px solid var(--rn-primary);
  border-radius: 0 var(--rn-radius-md) var(--rn-radius-md) 0;
  background: var(--rn-surface);
  font-size: 0.9375rem;
}

body.rn-design-system .rn-page-note > :last-child {
  margin-block-end: 0;
}

/* Owner-supplied data that is still missing. Search the site for rn-todo. */
body.rn-design-system .rn-todo {
  padding: 1px 7px;
  border-radius: 6px;
  color: #7C2D12;
  background: #FEF3C7;
  font-size: 0.9em;
  font-weight: 700;
}

/* 404 */

body.rn-design-system .rn-404 {
  padding-block: clamp(64px, 9vw, 128px);
  text-align: center;
}

body.rn-design-system .rn-404__inner {
  max-width: 560px;
  margin-inline: auto;
}

body.rn-design-system .rn-404 h1 {
  margin-block: 0 14px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

body.rn-design-system .rn-404 p {
  margin-block: 0 30px;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
}

body.rn-design-system .rn-404 .wp-block-buttons {
  justify-content: center;
}

/* ==========================================================================
   Product gallery thumbnails
   WooCommerce's FlexSlider builds .flex-control-thumbs in the browser, so it
   never appears in the served HTML. The 1.3.0 rules for it were keyed on
   `div.product`, which the block template does not render, so the list fell
   back to plain <ol> defaults: a 426px tall vertical stack of 310px rows with
   the browser's 40px list indent. Re-keyed to the template wrapper and laid
   out as a scrollable row. Styling only; the click and zoom handlers are
   WooCommerce's and are untouched.
   ========================================================================== */

body.rn-design-system .rn-product .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.rn-design-system .rn-product .flex-control-thumbs::-webkit-scrollbar {
  display: none;
}

body.rn-design-system .rn-product .flex-control-thumbs li {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
  flex: 0 0 auto;
  scroll-snap-align: start;
  list-style: none;
}

body.rn-design-system .rn-product .flex-control-thumbs li img {
  display: block;
  width: 72px;
  height: 72px;
  border: 1px solid var(--rn-border);
  border-radius: 10px;
  background: var(--rn-white);
  cursor: pointer;
  object-fit: cover;
  opacity: 1;
  transition: border-color 160ms ease;
}

body.rn-design-system .rn-product .flex-control-thumbs li img:hover,
body.rn-design-system .rn-product .flex-control-thumbs li img.flex-active {
  border-color: var(--rn-primary);
}

body.rn-design-system .rn-product .flex-control-thumbs li img:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   Tablet and mobile refinement
   ========================================================================== */

@media (max-width: 1023px) {
  /* Stated explicitly rather than relying on the base rule alone, so a stale
     cached stylesheet cannot leave a two-column hero below this width. */
  body.rn-design-system .rn-product-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Single-column hero: keep the gallery from towering over the buy panel. */
  body.rn-design-system .rn-product .rn-product-hero__media .woocommerce-product-gallery {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
}

/*
 * Tablet header. Between 640px and 1023px the Navigation block still shows all
 * four links inline while the logo is at its full 175px, which together
 * overflowed the container and wrapped the links onto a second row, making the
 * header 102px tall. Trimming the logo and the link padding puts it back on one
 * line without touching the Navigation block's own responsive behaviour.
 */
@media (min-width: 640px) and (max-width: 1023px) {
  body.rn-design-system .rn-header__inner {
    min-height: 68px;
    gap: 12px;
  }

  body.rn-design-system .rn-site-header .wp-block-image,
  body.rn-design-system .rn-site-header .wp-block-site-logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  body.rn-design-system .rn-site-header .wp-block-image img,
  body.rn-design-system .rn-site-header .wp-block-site-logo img {
    width: auto;
    max-width: 140px;
    height: auto;
  }

  body.rn-design-system .rn-site-nav .wp-block-navigation__container {
    gap: 2px;
  }

  body.rn-design-system .rn-site-nav .wp-block-navigation-item__content {
    padding-inline: 8px;
    font-size: 0.875rem;
  }
}

@media (max-width: 639px) {
  /* Header: tighter shell, capped logo, comfortable control spacing. */
  body.rn-design-system .rn-header__inner {
    min-height: 66px;
    gap: 12px;
  }

  body.rn-design-system .rn-header__actions {
    margin-inline-start: auto;
    gap: 9px;
  }

  body.rn-design-system .rn-site-header .wp-block-image,
  body.rn-design-system .rn-site-header .wp-block-site-logo {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
  }

  body.rn-design-system .rn-site-header .wp-block-image img,
  body.rn-design-system .rn-site-header .wp-block-site-logo img {
    display: block;
    width: auto;
    max-width: min(132px, 42vw);
    height: auto;
  }

  /* Product page: 16px page gutter instead of the global 20px. */
  body.rn-design-system .rn-product {
    --rn-gutter: 16px;
  }

  body.rn-design-system .rn-product-shell {
    padding-block: 14px 40px;
  }

  body.rn-design-system .rn-product-breadcrumbs {
    margin-block-end: 18px;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  /* Gallery: give the photograph the viewport width instead of framing. */
  body.rn-design-system .rn-product .rn-product-hero__media .woocommerce-product-gallery {
    max-width: 100%;
    padding: 10px;
    border-radius: 16px;
  }

  body.rn-design-system .rn-product .flex-control-thumbs li img {
    width: 66px;
    height: 66px;
  }

  /* Typography */
  body.rn-design-system .rn-product-title {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
    line-height: 1.12;
  }

  body.rn-design-system .rn-product-price :where(.wc-block-components-product-price, .woocommerce-Price-amount) {
    font-size: 1.625rem;
  }

  body.rn-design-system .rn-product-price .woocommerce-price-suffix {
    font-size: 0.8125rem;
  }

  /* Variation controls: 16px keeps the label hierarchy and stops iOS from
     zooming the viewport when a select receives focus. */
  body.rn-design-system .rn-product form.variations_form table.variations label {
    font-size: 1rem;
  }

  body.rn-design-system .rn-product form.variations_form table.variations select,
  body.rn-design-system .rn-product .reviewnfc-configurator :where(input, select, textarea) {
    width: 100%;
    min-height: 50px;
    font-size: 1rem;
  }

  body.rn-design-system .rn-product .reviewnfc-configurator {
    width: 100%;
    max-width: 100%;
    padding: 18px;
    overflow-x: visible;
  }

  /* Reassurance and payment strip */
  body.rn-design-system .rn-product-reassure {
    width: 100%;
    padding: 16px;
  }

  body.rn-design-system .rn-product-pay {
    gap: 7px;
  }

  body.rn-design-system .rn-product-pay li {
    padding: 5px 9px;
    font-size: 0.8125rem;
  }

  /* Below-fold sections */
  body.rn-design-system .rn-product-section {
    padding-block: 44px;
  }

  body.rn-design-system .rn-product-steps,
  body.rn-design-system .rn-product-cards {
    gap: 16px;
  }
}

/* ==========================================================================
   Product category archive
   Pairs with includes/class-archive-layout.php, which emits the first part of
   the term description above the product loop and the remainder below it.
   ========================================================================== */

/*
 * The archive template lays its blocks out at the theme's wide width. Capping
 * that to the ReviewNFC measure lines the title, intro, loop and long-form
 * content up with the header and footer instead of drifting wider.
 */
body.rn-design-system.rn-cat-archive :where(.wp-block-query-title, .rn-cat-content, .wp-block-woocommerce-product-collection, .wp-block-woocommerce-breadcrumbs, .wp-block-woocommerce-product-results-count, .wp-block-woocommerce-catalog-sorting).alignwide {
  max-width: 1200px;
  margin-inline: auto;
}

/*
 * The term description is deliberately left out of the cap above: it carries
 * the intro, which needs its own reading measure and a left edge shared with
 * the title, so it sets both itself rather than competing with `auto` margins.
 */
body.rn-design-system.rn-cat-archive .wp-block-term-description.alignwide {
  max-width: 1200px;
  margin-inline: auto;
}

body.rn-design-system.rn-cat-archive .wp-block-query-title {
  margin-block: 0 16px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

body.rn-design-system.rn-cat-archive .woocommerce-breadcrumb {
  margin-block: 0 20px;
}

/* Short intro, above the loop */

/* Matches the alignwide cap above on specificity and wins by order, so the
   intro keeps a readable measure rather than stretching to the full 1200px. */
body.rn-design-system.rn-cat-archive .rn-cat-intro {
  margin-block: 0 clamp(28px, 4vw, 40px);
}

/* Reading measure, left aligned so the intro shares an edge with the title. */
body.rn-design-system .rn-cat-intro__inner {
  max-width: 760px;
}

body.rn-design-system .rn-cat-intro p {
  margin-block: 0 16px;
  color: var(--rn-text);
  font-size: clamp(1.0625rem, 1.3vw, 1.125rem);
  line-height: 1.7;
}

body.rn-design-system .rn-cat-intro p:last-child {
  margin-block-end: 0;
}

/*
 * Shop-first lede (1.7.3 correction)
 *
 * Replaces the two-paragraph intro on a configured category with two or three
 * lines, so the product grid starts near the top of the phone screen instead of
 * around 550px down. The full stored description is not lost: it renders in one
 * piece in .rn-cat-content below the grid.
 *
 * Slightly larger than body copy and capped at a short measure, so it reads as
 * a lede rather than as the start of an article.
 */
body.rn-design-system.rn-cat-archive .rn-cat-lede {
  margin-block: 0 clamp(20px, 3vw, 28px);
}

body.rn-design-system .rn-cat-lede__inner {
  max-width: 620px;
}

body.rn-design-system .rn-cat-lede p {
  margin-block: 0;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.25vw, 1.0625rem);
  line-height: 1.65;
}

/*
 * Benefit row, directly under the grid. Understated by design: text with a
 * check, no cards, no colour blocks competing with the product's own CTA.
 */
body.rn-design-system .rn-cat-benefits {
  margin-block: clamp(18px, 2.5vw, 24px) 0;
}

body.rn-design-system .rn-cat-benefits__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-cat-benefits__item {
  margin: 0;
  padding-inline-start: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 10.4 4.1 4.1L16 5.9' stroke='%232563EB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.2em;
  color: var(--rn-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Product loop */

body.rn-design-system.rn-cat-archive .wc-block-product-template,
body.rn-design-system.rn-cat-archive .wp-block-woocommerce-product-template {
  margin-block: 0;
}

/*
 * A single product in a multi-column grid would sit marooned at the far left.
 * Constrained and centred instead. Categories with more than one product keep
 * WooCommerce's normal grid untouched, because the body class is only added
 * when the archive query found exactly one product.
 */
body.rn-design-system.rn-cat-single-product .wc-block-product-template,
body.rn-design-system.rn-cat-single-product .wp-block-woocommerce-product-template {
  max-width: 420px;
  margin-inline: auto;
}

/*
 * WooCommerce keeps its `columns-3` track definition regardless of how many
 * products the query returned, so a lone product was rendering as a 200px card
 * in the first of three tracks. One track, at the spotlight width.
 */
body.rn-design-system.rn-cat-single-product .wc-block-product-template__responsive.columns-1,
body.rn-design-system.rn-cat-single-product .wc-block-product-template__responsive.columns-2,
body.rn-design-system.rn-cat-single-product .wc-block-product-template__responsive.columns-3,
body.rn-design-system.rn-cat-single-product .wc-block-product-template__responsive.columns-4,
body.rn-design-system.rn-cat-single-product .wc-block-product-template__responsive.columns-5,
body.rn-design-system.rn-cat-single-product .wc-block-product-template__responsive.columns-6 {
  grid-template-columns: minmax(0, 1fr);
}

body.rn-design-system.rn-cat-archive .wc-block-product-template__responsive .wc-block-product,
body.rn-design-system.rn-cat-archive .wp-block-woocommerce-product-template > li {
  padding: clamp(16px, 2vw, 20px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
}

body.rn-design-system.rn-cat-archive .wp-block-woocommerce-product-template img {
  border-radius: var(--rn-radius-md);
}

/* Long-form content, below the loop */

body.rn-design-system .rn-cat-content {
  margin-block-start: clamp(44px, 6vw, 72px);
  padding-block-start: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--rn-border);
}

body.rn-design-system .rn-cat-content__inner {
  max-width: 780px;
}

body.rn-design-system .rn-cat-content__inner > :first-child,
body.rn-design-system .rn-product-longform > :first-child {
  margin-block-start: 0;
}

body.rn-design-system .rn-cat-content__inner > :last-child,
body.rn-design-system .rn-product-longform > :last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-cat-content__inner h2,
body.rn-design-system .rn-product-longform h2 {
  margin-block: clamp(30px, 4vw, 44px) 12px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

body.rn-design-system .rn-cat-content__inner h3,
body.rn-design-system .rn-product-longform h3 {
  margin-block: 28px 10px;
  color: var(--rn-heading);
  font-size: clamp(1.125rem, 1.6vw, 1.25rem);
  line-height: 1.35;
}

body.rn-design-system .rn-cat-content__inner p,
body.rn-design-system .rn-product-longform p {
  margin-block: 0 18px;
  color: var(--rn-text);
  font-size: clamp(1.0625rem, 1.2vw, 1.125rem);
  line-height: 1.75;
}

body.rn-design-system .rn-cat-content__inner :where(ul, ol) {
  margin-block: 0 20px;
  padding-inline-start: 22px;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
}

body.rn-design-system .rn-cat-content__inner li {
  margin-block-end: 8px;
}

body.rn-design-system .rn-cat-content__inner a,
body.rn-design-system .rn-product-longform a {
  color: var(--rn-primary);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

body.rn-design-system .rn-cat-content__inner a:hover,
body.rn-design-system .rn-product-longform a:hover {
  color: var(--rn-primary-hover);
}

/*
 * Closing call to action. The final paragraph carries the product link inside a
 * sentence, so it is lifted onto a surface panel rather than converted into a
 * button, which would break the sentence it sits in.
 */
body.rn-design-system .rn-cat-content__inner > p:last-child {
  margin-block-start: 26px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

@media (max-width: 639px) {
  body.rn-design-system.rn-cat-archive .wp-block-query-title {
    font-size: clamp(1.75rem, 7.5vw, 2.125rem);
  }

  body.rn-design-system .rn-cat-content {
    margin-block-start: 36px;
    padding-block-start: 32px;
  }

  body.rn-design-system .rn-cat-content__inner h2 {
    margin-block: 28px 10px;
    font-size: 1.375rem;
  }

  body.rn-design-system .rn-cat-content__inner p,
  body.rn-design-system .rn-cat-intro p {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  body.rn-design-system.rn-cat-single-product .wc-block-product-template,
  body.rn-design-system.rn-cat-single-product .wp-block-woocommerce-product-template {
    max-width: 100%;
  }
}

/* ==========================================================================
   Purchase panel (product page)
   Visual selectors in front of WooCommerce's native variation selects and the
   Configurator's addon checkboxes. The native controls stay in the DOM and keep
   all functional authority; these are a presentation layer over them.
   ========================================================================== */

body.rn-design-system .rn-purchase {
  display: grid;
  gap: 22px;
  margin-block: 0 24px;
}

body.rn-design-system .rn-purchase__label {
  display: block;
  margin-block-end: 10px;
  color: var(--rn-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

body.rn-design-system .rn-purchase__choices {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

body.rn-design-system .rn-choice {
  display: flex;
  min-height: 56px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 14px 16px;
  border: 1.5px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  color: var(--rn-heading);
  background: var(--rn-white);
  cursor: pointer;
  font-family: var(--rn-font-body);
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

body.rn-design-system .rn-choice:hover {
  border-color: #CBD5E1;
  background: var(--rn-surface);
}

body.rn-design-system .rn-choice.is-selected {
  border-color: var(--rn-primary);
  background: #EFF6FF;
  box-shadow: inset 0 0 0 1px var(--rn-primary);
}

body.rn-design-system .rn-choice:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 2px;
}

body.rn-design-system .rn-choice__title {
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

body.rn-design-system .rn-choice__desc,
body.rn-design-system .rn-choice__note {
  color: var(--rn-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.rn-design-system .rn-choice__per,
body.rn-design-system .rn-choice__price {
  color: var(--rn-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Saving is stated in words as well as colour, never colour alone. */
body.rn-design-system .rn-choice__save {
  color: var(--rn-success);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

body.rn-design-system .rn-choice__save[hidden] {
  display: none;
}

/* Once the script has built the cards, the native selects become a
   screen-reader-only fallback: still focusable, still submitted, still the
   functional control, but no longer duplicated visually. `--partial` is set
   when a product has an attribute without cards; its native select then stays
   visible rather than becoming unreachable.

   1.10.0: the size and clipping declarations are !important. The table layout
   rule for the block template (`…single-product .woocommerce.product
   form.variations_form table.variations`, specificity 0,6,3) outranked this
   rule (0,6,2) and kept `width: 100%`, so the absolutely positioned, "hidden"
   table stretched to the full viewport from its start position — 1888px of
   scroll width on a 1265px desktop, and 15px on a 360px phone. A visually
   hidden utility must win regardless of what else targets the element; the
   table stays in the DOM, focusable and submitted. `display: block` makes the
   1px box and overflow clipping apply to a table as well (a table box would
   otherwise grow to its content). */
body.rn-design-system .rn-purchase.is-ready:not(.rn-purchase--partial) ~ .wp-block-add-to-cart-form table.variations,
body.rn-design-system .rn-purchase.is-ready:not(.rn-purchase--partial) ~ * table.variations {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/*
 * Duplicate custom-design control.
 *
 * Once the visual execution selector has built its "Volledig maatwerk" card,
 * that card is the customer-facing control for the Configurator's custom-design
 * addon, so the Configurator's own card would be a second identical choice.
 *
 * It is clipped rather than removed: the input keeps its name, value, checked
 * state and position in the DOM, still submits, and still reports real
 * dimensions to any visibility check the Configurator performs — which
 * `display: none` would not. Targeted structurally through the addon's own data
 * attribute, never by matching its text.
 *
 * Both classes come from the script, so if it never initialises the native
 * control stays fully visible as the fallback. The Digital Review Kit addon is
 * untouched and remains its own visible upsell.
 */
/* Same hardening as the variation table (1.10.0): no stronger width rule for the
   add-on card may re-expand the clipped box. */
body.rn-design-system .rn-purchase.is-ready.rn-purchase--owns-custom ~ * [data-reviewnfc-addon="custom_design"] {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Configurator presentation */

body.rn-design-system .rn-product .reviewnfc-addon {
  margin-block: 12px 0;
  padding: 0;
  border: 1.5px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  background: var(--rn-white);
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.rn-design-system .rn-product .reviewnfc-addon:hover {
  border-color: #CBD5E1;
}

body.rn-design-system .rn-product .reviewnfc-addon:focus-within {
  border-color: var(--rn-primary);
}

body.rn-design-system .rn-product .reviewnfc-addon__label {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
}

body.rn-design-system .rn-product .reviewnfc-addon__input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  accent-color: var(--rn-primary);
}

body.rn-design-system .rn-product .reviewnfc-addon__title {
  color: var(--rn-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
}

body.rn-design-system .rn-product .reviewnfc-addon__price {
  margin-inline-start: auto;
  color: var(--rn-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  white-space: nowrap;
}

body.rn-design-system .rn-product .reviewnfc-addon__description,
body.rn-design-system .rn-product .reviewnfc-addon__notes {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--rn-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

body.rn-design-system .rn-product .reviewnfc-addon__notes {
  padding-inline-start: 34px;
}

/* Total, restyled. The Configurator still owns the value. */
body.rn-design-system .rn-product .reviewnfc-price-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-block: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  background: var(--rn-surface);
}

body.rn-design-system .rn-product .reviewnfc-price-summary__label {
  color: var(--rn-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

body.rn-design-system .rn-product .reviewnfc-price-summary__value {
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Trust strip under the CTA */

body.rn-design-system .rn-product-trust {
  display: grid;
  gap: 8px;
  margin-block: 18px 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-product-trust li {
  margin: 0;
  padding-inline-start: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m4 10.4 4.1 4.1L16 5.9' stroke='%2316A34A' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 2px;
  background-size: 18px 18px;
  color: var(--rn-text);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Repeated CTA after the long-form content */

body.rn-design-system .rn-product-section--cta {
  color: var(--rn-white);
  background: var(--rn-primary);
}

body.rn-design-system .rn-product-cta {
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

body.rn-design-system .rn-product-cta h2 {
  margin-block: 0 14px;
  color: var(--rn-white);
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.2;
}

body.rn-design-system .rn-product-cta p {
  margin-block: 0 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.65;
}

body.rn-design-system .rn-product-cta .wp-block-buttons {
  justify-content: center;
}

/* Mobile sticky purchase bar */

body.rn-design-system .rn-sticky-buy {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rn-border);
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 200ms ease, opacity 200ms ease;
}

body.rn-design-system .rn-sticky-buy.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

body.rn-design-system .rn-sticky-buy__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

/*
 * The price column is sized by its content and never allowed to shrink, so the
 * amount cannot be clipped at narrow widths; the button takes the remaining
 * space and shrinks instead.
 */
body.rn-design-system .rn-sticky-buy__price {
  flex: 0 0 auto;
  color: var(--rn-muted);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

body.rn-design-system .rn-sticky-buy__price strong {
  display: block;
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

body.rn-design-system .rn-sticky-buy__button {
  display: inline-flex;
  min-height: 48px;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: var(--rn-radius-md);
  color: var(--rn-white);
  background: var(--rn-primary);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* Narrow phones: trim the paddings before anything is allowed to clip. */
@media (max-width: 379px) {
  body.rn-design-system .rn-sticky-buy {
    padding-inline: 12px;
  }

  body.rn-design-system .rn-sticky-buy__inner {
    gap: 10px;
  }

  body.rn-design-system .rn-sticky-buy__price strong {
    font-size: 1.0625rem;
  }

  body.rn-design-system .rn-sticky-buy__button {
    padding-inline: 12px;
    font-size: 0.875rem;
  }
}

body.rn-design-system .rn-sticky-buy__button:hover {
  color: var(--rn-white);
  background: var(--rn-primary-hover);
}

/* Desktop has the panel in view beside the gallery; the bar is unnecessary. */
@media (min-width: 1024px) {
  body.rn-design-system .rn-sticky-buy {
    display: none;
  }
}

/* Keep the last section clear of the fixed bar. */
@media (max-width: 1023px) {
  body.rn-design-system.single-product .rn-product-section:last-of-type {
    padding-block-end: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 480px) {
  body.rn-design-system .rn-purchase__choices--qty {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.rn-design-system .rn-choice--qty {
    text-align: center;
    align-items: center;
  }
}

/* Mobile purchase panel polish: tighter rhythm, same tap targets. */
@media (max-width: 479px) {
  body.rn-design-system .rn-purchase {
    gap: 18px;
    margin-block-end: 20px;
  }

  body.rn-design-system .rn-purchase__label {
    margin-block-end: 8px;
    font-size: 0.9375rem;
  }

  body.rn-design-system .rn-purchase__choices {
    gap: 8px;
  }

  /* Quantity cards read as a compact row of three at 390px. */
  body.rn-design-system .rn-purchase__choices--qty {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.rn-design-system .rn-choice--qty {
    align-items: center;
    padding: 12px 8px;
    text-align: center;
  }

  body.rn-design-system .rn-choice--qty .rn-choice__title {
    font-size: 0.875rem;
  }

  body.rn-design-system .rn-choice--qty .rn-choice__per,
  body.rn-design-system .rn-choice--qty .rn-choice__save {
    font-size: 0.75rem;
  }

  body.rn-design-system .rn-choice--exec {
    padding: 12px 14px;
  }

  body.rn-design-system .rn-product .reviewnfc-addon__label {
    min-height: 52px;
    padding: 14px;
  }

  body.rn-design-system .rn-product .reviewnfc-addon__description,
  body.rn-design-system .rn-product .reviewnfc-addon__notes {
    padding: 0 14px 14px;
  }

  body.rn-design-system .rn-product .reviewnfc-addon__notes {
    padding-inline-start: 30px;
  }

  body.rn-design-system .rn-product .reviewnfc-price-summary {
    padding: 14px 16px;
  }

  body.rn-design-system .rn-product .reviewnfc-price-summary__value {
    font-size: 1.375rem;
  }
}

/* ==========================================================================
   Homepage CRO modules (1.7.0)
   ========================================================================== */

/* Hero price cue */

body.rn-design-system .rn-home-hero__price {
  margin-block: 0 24px;
  color: var(--rn-text);
  font-size: 1rem;
  line-height: 1.4;
}

body.rn-design-system .rn-home-hero__price strong {
  color: var(--rn-heading);
  font-family: var(--rn-font-body);
  font-size: 1.5rem;
  font-weight: 700;
}

/* Direct child only: the "incl. btw" note. The amount itself is a span from
   [reviewnfc_price] inside <strong> and keeps the strong's size (1.10.0). */
body.rn-design-system .rn-home-hero__price > span {
  color: var(--rn-muted);
  font-size: 0.8125rem;
}

body.rn-design-system .rn-home-hero__image {
  margin: 0;
}

body.rn-design-system .rn-home-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rn-radius-lg);
}

/*
 * Range hero (1.10.0): one wide photo of all four products. The frame is
 * 1672 x 941 and is never cropped: no fixed height and no object-fit, so a
 * phone shows the same full frame, only smaller. The width and height
 * attributes plus aspect-ratio reserve the space before the file arrives.
 */
body.rn-design-system .rn-home-hero--range .rn-home-hero__image picture {
  display: block;
}

body.rn-design-system .rn-home-hero--range .rn-home-hero__visual img {
  max-width: none;
  aspect-ratio: 1672 / 941;
  background: var(--rn-surface);
}

@media (min-width: 900px) {
  body.rn-design-system .rn-home-hero--range {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  }
}

@media (max-width: 899px) {
  /* Single column: the photo of the range comes first on screen, so a phone
     sees the products without scrolling. Visual order only; the H1 stays
     first in the document. */
  body.rn-design-system .rn-home-hero--range .rn-home-hero__visual {
    order: -1;
  }

  body.rn-design-system .rn-home-hero--range .rn-home-hero__visual img {
    max-width: 720px;
    margin-inline: auto;
  }
}

/* How it works: image beside three numbered steps */

body.rn-design-system .rn-home-flow {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
  grid-template-columns: 1fr;
  margin-block-end: clamp(32px, 5vw, 56px);
}

body.rn-design-system .rn-home-flow > * {
  margin-block: 0;
}

body.rn-design-system .rn-home-flow__image {
  margin: 0;
}

body.rn-design-system .rn-home-flow__image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
}

body.rn-design-system .rn-home-flow__steps {
  display: grid;
  gap: 20px;
}

body.rn-design-system .rn-home-flowstep > * {
  margin-block: 0;
}

/*
 * The badge is a <p>, so the `.rn-home-flowstep p` rule below — one class and
 * two elements, declared later — was overriding both the white digit and the
 * bottom margin, leaving dark text on the blue square. The extra class puts
 * this rule ahead of it.
 */
body.rn-design-system .rn-home-flowstep .rn-home-flowstep__number {
  display: flex;
  width: 34px;
  height: 34px;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-block: 0 16px;
  border-radius: var(--rn-radius-md);
  color: var(--rn-white);
  background: var(--rn-primary);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

body.rn-design-system .rn-home-flowstep h3 {
  margin-block: 0 6px;
  font-size: 1.125rem;
  line-height: 1.3;
}

body.rn-design-system .rn-home-flowstep p {
  margin-block: 0;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Three executions */

body.rn-design-system .rn-home-plans {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

body.rn-design-system .rn-home-plans > * {
  margin-block: 0;
}

body.rn-design-system .rn-home-plan--featured {
  border-color: var(--rn-primary);
  box-shadow: inset 0 0 0 1px var(--rn-primary);
}

/* Explanatory plan cards without a button (1.10.0): no trailing gap. */
body.rn-design-system .rn-home-plan > p:last-child {
  margin-block-end: 0;
}

/* Optional extras and price notes under the plan cards (1.10.0). */
body.rn-design-system .rn-home-options {
  max-width: 860px;
  margin-block-start: clamp(24px, 3vw, 32px);
}

body.rn-design-system .rn-home-options p {
  margin-block: 0 10px;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

body.rn-design-system .rn-home-options p:last-child {
  margin-block-end: 0;
  color: var(--rn-muted);
  font-size: 0.875rem;
}

body.rn-design-system .rn-home-options strong {
  color: var(--rn-heading);
}

/* Image and text rows */

body.rn-design-system .rn-home-split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  grid-template-columns: 1fr;
  margin-block-end: clamp(32px, 5vw, 56px);
}

body.rn-design-system .rn-home-split:last-child {
  margin-block-end: 0;
}

body.rn-design-system .rn-home-split > * {
  margin-block: 0;
}

body.rn-design-system .rn-home-split__image {
  margin: 0;
}

body.rn-design-system .rn-home-split__image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
}

body.rn-design-system .rn-home-split__copy h3 {
  margin-block: 0 12px;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.25;
}

body.rn-design-system .rn-home-split__copy p {
  margin-block: 0 18px;
  color: var(--rn-text);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.7;
}

/*
 * Adjacent untinted sections (1.7.2)
 *
 * Tinted bands mark their own boundary, so their padding always reads. Two
 * plain white sections in a row do not: the first section's 56px bottom padding
 * lands on the second's 56px top padding and the pair reads as one 112px void
 * rather than as two sections. Where that happens, the second section drops its
 * top padding and the boundary is carried by the first section alone.
 *
 * Written against the modifiers rather than against a specific section, so it
 * keeps working if the running order changes.
 */
body.rn-design-system .rn-home-section:not(.rn-home-section--surface, .rn-home-section--cta, .rn-home-section--hero) + .rn-home-section:not(.rn-home-section--surface, .rn-home-section--cta, .rn-home-section--hero) {
  padding-block-start: 0;
}

/*
 * Real customer cases (1.7.2)
 *
 * Two cards, image-led. The artwork is the point of the section, so the image
 * is the dominant element and is never cropped: a fixed 4:5 frame with
 * `object-fit: contain` shows the whole mockup and keeps both cards exactly the
 * same height even if a future photograph has a different native ratio.
 *
 * There is no rating, review count, testimonial or result claim in this
 * component and no styling that could imply one. It states the business, the
 * type of business and the execution ordered — all facts supplied by the owner.
 */

body.rn-design-system .rn-home-cases {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-block-start: clamp(28px, 4vw, 40px);
}

body.rn-design-system .rn-home-case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(16px, 2.5vw, 20px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

/*
 * The frame is capped by WIDTH, not height. Capping the height instead lets the
 * 4:5 box go wider than it is tall on a large screen, and `contain` then
 * letterboxes the artwork with visible bars either side. Capping the width
 * keeps the frame exactly 4:5 at every viewport, so the mockup always fills it.
 */
body.rn-design-system .rn-home-case__image {
  /* The card is a column flex container: without an explicit width the auto
     inline margins would make this figure shrink-to-fit and the image, which
     is sized in percent, would collapse to zero. */
  width: 100%;
  max-width: 420px;
  margin-block: 0;
  margin-inline: auto;
}

body.rn-design-system .rn-home-case__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--rn-radius-md);
  object-fit: contain;
  background: var(--rn-white);
}

body.rn-design-system .rn-home-case__type {
  margin-block: clamp(18px, 2.5vw, 24px) 4px;
  color: var(--rn-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.rn-design-system .rn-home-case__name {
  margin-block: 0 10px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  font-weight: 800;
  line-height: 1.25;
}

/*
 * The badge names the execution the customer ordered. It reuses the exact
 * wording of the purchase panel so the two never drift apart.
 */
body.rn-design-system .rn-home-case__badge {
  display: inline-flex;
  align-self: flex-start;
  margin-block: 0 12px;
  padding: 5px 12px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  color: var(--rn-primary);
  background: rgba(37, 99, 235, 0.08);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

body.rn-design-system .rn-home-case__desc {
  margin-block: 0;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* Closing CTA under the cases. Plain anchor: it activates no addon. */

body.rn-design-system .rn-home-casecta {
  margin-block-start: clamp(28px, 4vw, 40px);
  padding: clamp(22px, 3.5vw, 32px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
  text-align: center;
}

body.rn-design-system .rn-home-casecta h3 {
  margin-block: 0 8px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
}

body.rn-design-system .rn-home-casecta p {
  margin-block: 0 20px;
  color: var(--rn-text);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.65;
}

body.rn-design-system .rn-home-casecta .wp-block-buttons {
  justify-content: center;
  margin-block: 0;
}

/*
 * Product page: "Zo kan volledig maatwerk eruitzien" (1.7.2)
 *
 * A compact visual answer to "what is the difference between eigen logo and
 * volledig maatwerk". It sits well below the purchase panel, adds no SEO prose,
 * and its CTA is a plain in-page anchor to #configureer — it activates no
 * addon and touches no Configurator state.
 */

body.rn-design-system .rn-proof {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-block-start: clamp(22px, 3vw, 30px);
}

body.rn-design-system .rn-proof__item {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
}

/* Same width-capped 4:5 frame as the homepage cases; never crop the artwork. */
body.rn-design-system .rn-proof__image {
  width: 100%;
  max-width: 300px;
  margin-block: 0;
  margin-inline: auto;
}

body.rn-design-system .rn-proof__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--rn-radius-md);
  object-fit: contain;
  background: var(--rn-surface);
}

body.rn-design-system .rn-proof__name {
  margin-block: 16px 4px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

body.rn-design-system .rn-proof__desc {
  margin-block: 0;
  color: var(--rn-text);
  font-size: 0.875rem;
  line-height: 1.6;
}

body.rn-design-system .rn-proof__actions {
  margin-block-start: clamp(22px, 3vw, 28px);
}

@media (min-width: 640px) {
  body.rn-design-system .rn-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/*
 * Review summary near the product title. Rendered only when WooCommerce has
 * real review data; there is no styling here that can invent a rating.
 */
body.rn-design-system .rn-product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block: 0 14px;
  font-size: 0.875rem;
}

body.rn-design-system .rn-product .woocommerce-product-rating .star-rating {
  color: var(--rn-star);
}

/* A product with no reviews should not advertise the fact. */
body.rn-design-system .rn-product .woocommerce-product-rating:has(.woocommerce-review-link[href$="#reviews"] .count:empty) {
  display: none;
}

/*
 * Newsletter component, dormant by design.
 *
 * These styles exist so a Brevo integration can be dropped in later without a
 * design pass. Nothing renders until real markup carrying these classes is
 * output by that integration; this release ships no form, no endpoint and no
 * subscriber storage.
 */
body.rn-design-system .rn-newsletter {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

body.rn-design-system .rn-newsletter__title {
  margin-block: 0 6px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
}

body.rn-design-system .rn-newsletter__text {
  margin-block: 0 16px;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

body.rn-design-system .rn-newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.rn-design-system .rn-newsletter__input {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  font-size: 1rem;
}

body.rn-design-system .rn-newsletter__submit {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--rn-radius-md);
  color: var(--rn-white);
  background: var(--rn-primary);
  font-size: 0.9375rem;
  font-weight: 700;
}

/*
 * Footer variant (1.7.1). The footer is dark, so the light card treatment above
 * would fight it. This modifier only re-colours; the slot is still inert until
 * a real integration outputs the markup.
 */
body.rn-design-system .rn-site-footer .rn-newsletter--footer {
  margin-block-start: 36px;
  padding: clamp(20px, 3vw, 26px);
  border-color: rgba(226, 232, 240, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

body.rn-design-system .rn-site-footer .rn-newsletter--footer .rn-newsletter__title {
  color: var(--rn-white);
}

body.rn-design-system .rn-site-footer .rn-newsletter--footer .rn-newsletter__text {
  color: rgba(255, 255, 255, 0.78);
}

body.rn-design-system .rn-site-footer .rn-newsletter--footer .rn-newsletter__input {
  border-color: rgba(226, 232, 240, 0.28);
  color: var(--rn-heading);
  background: var(--rn-white);
}

body.rn-design-system .rn-site-footer .rn-newsletter--footer .rn-newsletter__note {
  margin-block: 12px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  line-height: 1.6;
}

/*
 * Brevo opt-in, footer placement (1.7.3)
 *
 * The Brevo document paints its own light card, so there is deliberately no
 * panel behind the iframe here — the iframe is the card. Wrapping it would
 * produce the card-inside-a-card look.
 *
 * IFRAME HEIGHT. The form is cross-origin, so its height cannot be read and no
 * postMessage contract is assumed. Instead the height is set from measurements
 * taken against the live form:
 *
 *     iframe width   content height
 *     250px          615px
 *     280px          541px
 *     320px          519px
 *     340px          505px
 *     360-414px      482px
 *     460px          454px
 *     491px          431px
 *     560px          401px
 *     600px and up   387px
 *
 * Measured after the headline and subtext blocks were removed from the Brevo
 * form, since the design system already renders that copy outside the iframe.
 * The form is now roughly 150px shorter at every width, and the ladders below
 * were re-cut to match; the previous ladder left 150-250px of empty background.
 *
 * Every step sits above the tallest content that can occur across the iframe
 * widths its range produces, so the form never has to scroll inside its own
 * frame, and each carries about 30px of slack for font fallback and for the
 * inline validation message the form shows on a bad address.
 *
 * Re-measure this table if the Brevo form's copy or fields change again.
 */
body.rn-design-system .rn-optin {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  margin-block-end: clamp(36px, 5vw, 52px);
  padding-block-end: clamp(32px, 4vw, 44px);
  border-block-end: 1px solid rgba(226, 232, 240, 0.18);
}

body.rn-design-system .rn-optin__eyebrow {
  margin-block: 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.rn-design-system .rn-optin__title {
  margin-block: 0 10px;
  color: var(--rn-white);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 800;
  line-height: 1.25;
}

body.rn-design-system .rn-optin__text {
  margin-block: 0;
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.65;
}

body.rn-design-system .rn-optin__frame {
  min-width: 0;
}

body.rn-design-system .rn-optin__iframe {
  display: block;
  width: 100%;
  height: 570px;
  border: 0;
  border-radius: var(--rn-radius-lg);
  /* Reserve the box before the document arrives so nothing below it jumps. */
  background: var(--rn-surface);
  color-scheme: light;
}

/* Discount modal (1.7.3) */

body.rn-design-system .rn-modal[hidden] {
  display: none;
}

body.rn-design-system .rn-modal {
  position: fixed;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 32px);
  inset: 0;
  overflow-y: auto;
}

body.rn-design-system .rn-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

body.rn-design-system .rn-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-block: auto;
  /* Tighter on phones on purpose: every pixel taken off this padding is a pixel
     of iframe width, and a wider Brevo form is a shorter Brevo form. */
  padding: clamp(18px, 4vw, 32px);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

body.rn-design-system .rn-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rn-border);
  border-radius: 999px;
  color: var(--rn-muted);
  background: var(--rn-white);
  cursor: pointer;
}

body.rn-design-system .rn-modal__close:hover {
  color: var(--rn-heading);
  background: var(--rn-surface);
}

body.rn-design-system .rn-modal__close:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 2px;
}

body.rn-design-system .rn-modal__eyebrow {
  margin-block: 0 8px;
  padding-inline-end: 44px;
  color: var(--rn-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

body.rn-design-system .rn-modal__title {
  margin-block: 0 8px;
  padding-inline-end: 44px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
}

body.rn-design-system .rn-modal__text {
  margin-block: 0 16px;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.6;
}

body.rn-design-system .rn-modal__iframe {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  border-radius: var(--rn-radius-md);
  background: var(--rn-surface);
  color-scheme: light;
}

/* Hold the page still while the dialog owns the viewport. */
html.rn-modal-open,
html.rn-modal-open body {
  overflow: hidden;
}

/*
 * Height steps. The breakpoints are viewport-based, but each one is chosen from
 * the iframe width that actually occurs at that viewport in this layout, not
 * from the viewport width itself.
 */
@media (min-width: 340px) {
  body.rn-design-system .rn-modal__iframe {
    height: 570px;
  }
}

@media (min-width: 360px) {
  body.rn-design-system .rn-optin__iframe {
    height: 550px;
  }
}

@media (min-width: 370px) {
  body.rn-design-system .rn-modal__iframe {
    height: 555px;
  }
}

@media (min-width: 400px) {
  body.rn-design-system .rn-optin__iframe {
    height: 515px;
  }

  body.rn-design-system .rn-modal__iframe {
    height: 530px;
  }
}

@media (min-width: 480px) {
  body.rn-design-system .rn-modal__iframe {
    height: 500px;
  }
}

@media (min-width: 560px) {
  body.rn-design-system .rn-optin__iframe {
    height: 460px;
  }
}

@media (min-width: 660px) {
  body.rn-design-system .rn-modal__iframe {
    height: 435px;
  }
}

/* Single column is at its widest here, so the form is at its shortest. */
@media (min-width: 700px) {
  body.rn-design-system .rn-optin__iframe {
    height: 420px;
  }
}

/*
 * Two columns start at 1080px, not earlier. Splitting the row sooner makes the
 * iframe NARROWER than the single-column layout had it — at a 900px viewport
 * each column is only ~393px, where the form needs 634px of height rather than
 * the 479px it needs at full width. Below 1080px the single column is the
 * better shape for this form.
 */
@media (min-width: 1080px) {
  body.rn-design-system .rn-optin {
    align-items: center;
    gap: clamp(32px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body.rn-design-system .rn-optin__iframe {
    height: 475px;
  }
}

@media (min-width: 1360px) {
  body.rn-design-system .rn-optin__iframe {
    height: 440px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.rn-design-system .rn-modal {
    opacity: 0;
    transition: opacity 160ms ease;
  }

  body.rn-design-system .rn-modal.is-open {
    opacity: 1;
  }
}

@media (min-width: 640px) {
  body.rn-design-system .rn-home-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*
 * Customer cases go two-up only from 768px. They lead with a portrait 4:5
 * mockup, so pairing them any earlier would leave each image about 150px wide
 * on a phone in landscape and the card artwork unreadable.
 */
@media (min-width: 768px) {
  body.rn-design-system .rn-home-cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 32px);
  }

  body.rn-design-system .rn-home-casecta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    text-align: start;
  }

  body.rn-design-system .rn-home-casecta__copy {
    flex: 1 1 340px;
  }

  body.rn-design-system .rn-home-casecta__copy p {
    margin-block-end: 0;
  }

  body.rn-design-system .rn-home-casecta .wp-block-buttons {
    flex: none;
    justify-content: flex-end;
  }
}

@media (min-width: 900px) {
  body.rn-design-system .rn-home-flow,
  body.rn-design-system .rn-home-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* Alternating rhythm: the second row leads with the copy. */
  body.rn-design-system .rn-home-split--reverse .rn-home-split__media {
    order: 2;
  }

  body.rn-design-system .rn-home-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

/*
 * Cart visual hierarchy (1.7.1)
 *
 * Presentation only. Every selector below targets WooCommerce Blocks' own
 * stable class names and changes nothing but colour, spacing, border, radius
 * and type. No element is hidden, no control is moved out of the DOM, and no
 * total, tax, coupon or shipping value is styled in a way that could hide it.
 * If this store renders the classic `[woocommerce_cart]` shortcode instead of
 * the Cart block, none of these rules match and the cart keeps its 1.2.x look.
 */

body.rn-design-system .wc-block-cart .wc-block-components-sidebar-layout {
  gap: clamp(24px, 4vw, 40px);
}

/* Line items read as one clear list: a light rule between rows, nothing else. */
body.rn-design-system .wc-block-cart .wc-block-cart-items {
  border-collapse: collapse;
}

body.rn-design-system .wc-block-cart .wc-block-cart-items__row {
  padding-block: clamp(16px, 3vw, 22px);
  border-block-end: 1px solid var(--rn-border);
}

body.rn-design-system .wc-block-cart .wc-block-cart-items__row:last-child {
  border-block-end: 0;
}

body.rn-design-system .wc-block-cart .wc-block-cart-item__image img {
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  background: var(--rn-surface);
}

body.rn-design-system .wc-block-cart .wc-block-components-product-name {
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

/*
 * The Configurator writes the chosen options into WooCommerce's own item-data
 * list. It is the most useful text in the row, so it gets readable colour and
 * rhythm rather than the muted micro-type Blocks ships by default.
 */
body.rn-design-system .wc-block-cart .wc-block-components-product-details {
  margin-block: 8px 0;
  color: var(--rn-muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

body.rn-design-system .wc-block-cart .wc-block-components-product-details__name {
  color: var(--rn-text);
  font-weight: 600;
}

body.rn-design-system .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
  color: var(--rn-heading);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Quantity stepper: 44px targets, one visible control group. */
body.rn-design-system .wc-block-cart .wc-block-components-quantity-selector {
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-md);
  background: var(--rn-white);
}

body.rn-design-system .wc-block-cart .wc-block-components-quantity-selector__button {
  min-width: 40px;
  min-height: 40px;
  color: var(--rn-heading);
  font-size: 1.125rem;
}

body.rn-design-system .wc-block-cart .wc-block-components-quantity-selector__input {
  min-height: 40px;
  color: var(--rn-heading);
  font-weight: 600;
}

/* The totals panel becomes the second focal point after the line items. */
body.rn-design-system .wc-block-cart .wc-block-components-sidebar {
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
}

body.rn-design-system .wc-block-cart .wc-block-components-sidebar .wc-block-components-totals-wrapper {
  padding-block: 14px;
  border-block-start-color: var(--rn-border);
}

body.rn-design-system .wc-block-cart .wc-block-components-totals-item__label {
  color: var(--rn-text);
  font-weight: 600;
}

body.rn-design-system .wc-block-cart .wc-block-components-totals-footer-item {
  color: var(--rn-heading);
  font-size: 1.125rem;
}

body.rn-design-system .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--rn-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
}

/* Class names below are the ones the installed WooCommerce build actually
   ships; each was checked against wp-content/plugins/woocommerce/assets/client/
   blocks/cart.css and packages-style.css on the live store. */
body.rn-design-system .wc-block-cart .wc-block-components-totals-footer-item-tax,
body.rn-design-system .wc-block-cart .wc-block-components-totals-taxes,
body.rn-design-system .wc-block-cart .wc-block-components-totals-item__description {
  color: var(--rn-muted);
  font-size: 0.8125rem;
}

body.rn-design-system .wc-block-cart .wc-block-cart__submit-container {
  margin-block-start: 20px;
}

/*
 * Empty cart (1.7.3)
 *
 * The markup inside `woocommerce/empty-cart-block` is replaced server-side by
 * includes/class-empty-cart.php, so these rules only ever apply to an empty
 * cart. Nothing here can reach the filled cart: every selector is scoped to
 * `.rn-empty-cart`, which exists only in that replacement.
 *
 * WooCommerce's own sad-face illustration is not hidden here — the class that
 * paints it, `.with-empty-cart-icon`, is simply never emitted.
 */

body.rn-design-system .rn-empty-cart {
  max-width: 520px;
  margin-inline: auto;
  padding-block: clamp(28px, 5vw, 56px);
  text-align: center;
}

body.rn-design-system .rn-empty-cart__icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  margin-block-end: 20px;
  border-radius: var(--rn-radius-md);
  color: var(--rn-primary);
  background: rgba(37, 99, 235, 0.1);
}

/*
 * The extra class outranks WooCommerce's own `.wc-block-cart__empty-cart__title`
 * rule, which forces `font-size: inherit`.
 */
body.rn-design-system .rn-empty-cart .rn-empty-cart__title {
  margin-block: 0 10px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Defensive: if a future WooCommerce build moves the icon onto the base class. */
body.rn-design-system .rn-empty-cart .rn-empty-cart__title::before {
  content: none;
}

body.rn-design-system .rn-empty-cart__text {
  margin-block: 0 24px;
  color: var(--rn-text);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.65;
}

body.rn-design-system .rn-empty-cart__actions {
  margin-block-end: 20px;
}

body.rn-design-system .rn-empty-cart__cta {
  display: inline-flex;
  min-height: 52px;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border-radius: var(--rn-radius-md);
  color: var(--rn-white);
  background: var(--rn-primary);
  font-family: var(--rn-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

body.rn-design-system .rn-empty-cart__cta:hover,
body.rn-design-system .rn-empty-cart__cta:focus {
  color: var(--rn-white);
  background: var(--rn-primary-hover);
}

body.rn-design-system .rn-empty-cart__cta:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 3px;
}

body.rn-design-system .rn-empty-cart__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-empty-cart__trust li {
  margin: 0;
  padding: 0;
  color: var(--rn-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Decorative separator, so the list still reads as three items to a screen reader. */
body.rn-design-system .rn-empty-cart__trust li + li::before {
  margin-inline-end: 10px;
  color: var(--rn-border);
  content: "\00b7";
}

body.rn-design-system .rn-empty-cart__more {
  margin-block: 18px 0;
  font-size: 0.875rem;
}

body.rn-design-system .rn-empty-cart__more a {
  color: var(--rn-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.rn-design-system .rn-empty-cart__more a:hover {
  color: var(--rn-primary-hover);
}

body.rn-design-system .rn-empty-cart__more a:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 3px;
}

@media (max-width: 359px) {
  /* Below 360px the CTA label wraps; keep it inside the viewport. */
  body.rn-design-system .rn-empty-cart__cta {
    width: 100%;
    padding-inline: 16px;
  }
}

/* ==========================================================================
   Product range (1.8.0)
   Components for the round plate, square plate and table stand pages, the
   cross-linking product cluster, and the category grid now that the category
   holds four products. Everything reuses the existing tokens and the card,
   step, longform and FAQ patterns of the card page.
   ========================================================================== */

/* Purchase panel: groups the product does not have, and an empty panel. */
body.rn-design-system .rn-purchase[hidden],
body.rn-design-system .rn-purchase__group[hidden] {
  display: none;
}

/*
 * Unavailable and sold-out choices (1.9.0). The card is a disabled button, so
 * it cannot be clicked or focused; it says why in words, never by colour or
 * opacity alone, and the price lines are emptied by the script.
 */
body.rn-design-system .rn-choice:disabled,
body.rn-design-system .rn-choice.is-unavailable {
  border-style: dashed;
  border-color: var(--rn-border);
  color: var(--rn-muted);
  background: var(--rn-surface);
  box-shadow: none;
  cursor: not-allowed;
}

body.rn-design-system .rn-choice:disabled:hover {
  border-color: var(--rn-border);
  background: var(--rn-surface);
}

body.rn-design-system .rn-choice:disabled .rn-choice__title,
body.rn-design-system .rn-choice:disabled .rn-choice__desc {
  color: var(--rn-muted);
}

body.rn-design-system .rn-choice:disabled .rn-choice__swatch {
  opacity: 0.45;
}

body.rn-design-system .rn-choice__state {
  color: var(--rn-muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}

body.rn-design-system .rn-choice__state[hidden] {
  display: none;
}

/* "Keuzes wissen": WooCommerce's own reset, offered where the cards are. */
body.rn-design-system .rn-purchase__reset {
  justify-self: start;
  min-height: 44px;
  padding: 10px 2px;
  border: 0;
  color: var(--rn-primary);
  background: none;
  cursor: pointer;
  font-family: var(--rn-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

body.rn-design-system .rn-purchase__reset:hover {
  color: var(--rn-primary-hover);
}

body.rn-design-system .rn-purchase__reset:focus-visible {
  outline: 2px solid var(--rn-primary);
  outline-offset: 2px;
}

body.rn-design-system .rn-purchase__reset[hidden] {
  display: none;
}

/* Attribute choices (Kleur): two compact cards side by side. */
body.rn-design-system .rn-purchase__choices--attr {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.rn-design-system .rn-choice--attr {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 52px;
}

body.rn-design-system .rn-choice__swatch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid #CBD5E1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--rn-white);
}

body.rn-design-system .rn-choice--attr.is-selected .rn-choice__swatch {
  border-color: var(--rn-primary);
}

/* Two-column band: specifications beside where the product is used. */
body.rn-design-system .rn-product-split {
  display: grid;
  gap: 40px;
}

body.rn-design-system .rn-product-split > * {
  min-width: 0;
  margin-block: 0;
}

body.rn-design-system .rn-product-split h2 {
  margin-block: 0 16px;
  color: var(--rn-heading);
  font-family: var(--rn-font-heading);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

body.rn-design-system .rn-product-split p {
  margin-block: 0 18px;
  color: var(--rn-text);
  font-size: 1rem;
  line-height: 1.7;
}

@media (min-width: 900px) {
  body.rn-design-system .rn-product-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

/* Specification list: a definition list read as a two-column table. */
body.rn-design-system .rn-specs {
  margin: 0;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
  overflow: hidden;
}

body.rn-design-system .rn-specs__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
  padding: 14px clamp(16px, 2.5vw, 24px);
  border-top: 1px solid var(--rn-border);
}

body.rn-design-system .rn-specs__row:first-child {
  border-top: 0;
}

body.rn-design-system .rn-specs dt,
body.rn-design-system .rn-specs dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

body.rn-design-system .rn-specs dt {
  color: var(--rn-muted);
  font-weight: 600;
}

body.rn-design-system .rn-specs dd {
  color: var(--rn-heading);
  font-weight: 600;
}

/* Chips reused from the homepage need a little air above on product pages. */
body.rn-design-system .rn-product-split .rn-home-chips {
  margin-block: 4px 20px;
}

/*
 * Product cluster: "Bekijk ook onze andere Google Review NFC producten".
 * Rendered by includes/class-product-cluster.php. The name link carries a
 * full-card overlay, so the whole card is one click target with one focus
 * stop; the "Bekijk product" label only looks like a button.
 */
body.rn-design-system .rn-product-section--cluster {
  border-top: 1px solid var(--rn-border);
}

body.rn-design-system .rn-cluster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.rn-design-system .rn-cluster__card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rn-border);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-white);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

body.rn-design-system .rn-cluster__card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--rn-shadow-md);
}

body.rn-design-system .rn-cluster__card:focus-within {
  border-color: var(--rn-primary);
  box-shadow: var(--rn-focus-ring);
}

/* Square frame reserved before the image loads: no layout shift. */
body.rn-design-system .rn-cluster__media {
  aspect-ratio: 1 / 1;
  background: var(--rn-surface);
}

body.rn-design-system .rn-cluster__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.rn-design-system .rn-cluster__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

body.rn-design-system .rn-cluster__name {
  margin: 0;
  font-family: var(--rn-font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
}

body.rn-design-system .rn-cluster__link {
  color: var(--rn-heading);
  text-decoration: none;
}

body.rn-design-system .rn-cluster__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.rn-design-system .rn-cluster__link:focus-visible {
  outline: none;
}

body.rn-design-system .rn-cluster__desc {
  margin: 0;
  color: var(--rn-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}

body.rn-design-system .rn-cluster__price {
  margin: auto 0 0;
  padding-block-start: 4px;
  color: var(--rn-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

body.rn-design-system .rn-cluster__price strong {
  color: var(--rn-heading);
  font-size: 1.125rem;
  font-weight: 700;
}

body.rn-design-system .rn-cluster__price .woocommerce-price-suffix {
  color: var(--rn-muted);
  font-size: 0.8125rem;
}

body.rn-design-system .rn-cluster__button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-block-start: 6px;
  padding: 10px 18px;
  border: 1.5px solid var(--rn-primary);
  border-radius: var(--rn-radius-md);
  color: var(--rn-primary);
  background: var(--rn-white);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  transition: color 160ms ease, background-color 160ms ease;
}

body.rn-design-system .rn-cluster__card:hover .rn-cluster__button {
  color: var(--rn-white);
  background: var(--rn-primary);
}

/* Phones and small tablets: image beside the text keeps each card readable
   without a full-width square per product, and three products never leave an
   orphan card on a two-column row. */
@media (max-width: 767px) {
  body.rn-design-system .rn-cluster__card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
  }

  /* A square thumbnail, never stretched to the text height: a product
     photo cropped to a tall strip would hide the product. */
  body.rn-design-system .rn-cluster__media {
    align-self: start;
    margin: 14px 0 14px 14px;
    overflow: hidden;
    border-radius: var(--rn-radius-md);
  }

  body.rn-design-system .rn-cluster__body {
    gap: 6px;
    padding: 14px 16px 16px;
  }

  body.rn-design-system .rn-cluster__name {
    font-size: 1rem;
  }

  body.rn-design-system .rn-cluster__desc {
    font-size: 0.875rem;
  }

  body.rn-design-system .rn-cluster__button {
    align-self: flex-start;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.875rem;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  body.rn-design-system .rn-cluster__card {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  body.rn-design-system .rn-cluster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  body.rn-design-system .rn-cluster {
    gap: 24px;
  }
}

/*
 * Four cards (the homepage range, 1.10.0): two by two on tablets, four across
 * from 1024px. Three across would leave the fourth product alone on a row.
 */
@media (min-width: 768px) {
  body.rn-design-system .rn-cluster--count-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body.rn-design-system .rn-cluster--count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Alternative / complement label on product pages. Text, not colour alone. */
body.rn-design-system .rn-cluster__relation {
  display: inline-flex;
  align-self: flex-start;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--rn-border);
  border-radius: 999px;
  color: var(--rn-text);
  background: var(--rn-surface);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

body.rn-design-system .rn-cluster__relation--alternatief {
  border-color: rgba(37, 99, 235, 0.22);
  color: var(--rn-primary);
  background: rgba(37, 99, 235, 0.08);
}

body.rn-design-system .rn-cluster__more {
  margin: clamp(20px, 3vw, 28px) 0 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

body.rn-design-system .rn-cluster__more a {
  color: var(--rn-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.rn-design-system .rn-cluster__more a:hover {
  color: var(--rn-primary-hover);
}

/*
 * Category grid with the full range. WooCommerce's `columns-3` track leaves
 * the fourth product alone on a second row; one column on phones, two from
 * 560px and four across from 1024px keep the range in balanced rows.
 */
body.rn-design-system.rn-cat-archive:not(.rn-cat-single-product) .wc-block-product-template__responsive[class*="columns-"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 559px) {
  body.rn-design-system.rn-cat-archive:not(.rn-cat-single-product) .wc-block-product-template__responsive[class*="columns-"] {
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (min-width: 560px) {
  body.rn-design-system.rn-cat-archive:not(.rn-cat-single-product) .wc-block-product-template__responsive[class*="columns-"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  body.rn-design-system.rn-cat-archive:not(.rn-cat-single-product) .wc-block-product-template__responsive[class*="columns-"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/*
 * Header with five links (1.9.0 adds "Alle producten"). Measured against the
 * live header: from 768px the five links fit as they are; between 660 and
 * 767px they fit on one line only with a slightly smaller logo and tighter
 * links, still 44px tall. Below 660px the header already took two rows with
 * four links; it now does so at 88px instead of 90–100px. Below 600px the
 * Navigation block's own menu button takes over, untouched.
 */
@media (min-width: 600px) and (max-width: 767px) {
  body.rn-design-system .rn-header__inner {
    gap: 8px;
  }

  body.rn-design-system .rn-site-header .wp-block-image,
  body.rn-design-system .rn-site-header .wp-block-site-logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  body.rn-design-system .rn-site-header .wp-block-image img,
  body.rn-design-system .rn-site-header .wp-block-site-logo img {
    width: auto;
    max-width: 112px;
    height: auto;
  }

  body.rn-design-system .rn-header__actions {
    gap: 4px;
  }

  body.rn-design-system .rn-site-nav .wp-block-navigation__container {
    gap: 0;
  }

  body.rn-design-system .rn-site-nav .wp-block-navigation-item__content {
    padding-inline: 5px;
    font-size: 0.8125rem;
  }
}

/* High-contrast and motion accessibility */

@media (forced-colors: active) {
  body.rn-design-system :where(a, button, input, select, textarea, summary):focus-visible,
  body.rn-design-system .woocommerce :where(input, select, textarea):focus,
  body.rn-design-system :where(.reviewnfc-configurator, .reviewnfc-product-configurator, .rn-configurator, [data-reviewnfc-configurator]) :where(input, select, textarea):focus,
  body.rn-design-system :where(.rn-field__input, .rn-field__select, .rn-field__textarea):focus {
    outline-color: Highlight;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.rn-design-system *,
  body.rn-design-system *::before,
  body.rn-design-system *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body.rn-design-system :where(.rn-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .wc-block-components-product-button__button, .rn-cta > .wp-block-button__link) {
    transform: none !important;
  }
}