.elementor-widget-container .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-container .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-20804 .elementor-element.elementor-element-afbfab4{--display:flex;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-20804 .elementor-element.elementor-element-0318bf6{width:100%;max-width:100%;}body.elementor-page-20804:not(.elementor-motion-effects-element-type-background), body.elementor-page-20804 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #DBE4F1 0%, #DBE4F1 100%);}/* Start custom CSS for html, class: .elementor-element-0318bf6 *//* =========================================
   FRCS MOCKS GRID — FINAL (scoped + safe)
   Only affects the shortcode wrapper you control: .otoprep-mocks
   Fixes 2/3/1 caused by legacy clear/float behaviour.
   ========================================= */

.otoprep-mocks ul.products{
  display: flex !important;         /* flex ignores clear:both issues */
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}

/* 3 columns */
.otoprep-mocks ul.products li.product{
  float: none !important;
  clear: none !important;           /* critical: stops item 3 + 6 being forced down */
  width: calc((100% - 28px) / 3) !important;  /* 2 gaps x 14px = 28px */
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Some themes apply clear on .first/.last — explicitly neutralise */
.otoprep-mocks ul.products li.product.first,
.otoprep-mocks ul.products li.product.last{
  clear: none !important;
}

/* Some themes/plugins inject clear elements — hide them */
.otoprep-mocks ul.products .clear,
.otoprep-mocks ul.products li.clear,
.otoprep-mocks ul.products br,
.otoprep-mocks ul.products br.clear{
  display: none !important;
}

/* Make sure inner content can’t overflow its card */
.otoprep-mocks ul.products li.product *{
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive */
@media (max-width: 900px){
  .otoprep-mocks ul.products li.product{
    width: calc((100% - 14px) / 2) !important;
  }
}
@media (max-width: 520px){
  .otoprep-mocks ul.products li.product{
    width: 100% !important;
  }
}/* End custom CSS */