/* =========================================================
   AR BEAUTY LABS
   MAKEUP RECOMMENDATIONS
   ========================================================= */


/* ---------------------------------------------------------
   ROOT / MODAL SAFETY
   --------------------------------------------------------- */

.mr-app{
  position:relative;

  width:100%;
  max-width:1180px;

  margin:0 auto;
  padding:8px 18px 24px;

  box-sizing:border-box;

  color:#fff;
}

.mr-app *,
.mr-app *::before,
.mr-app *::after{
  box-sizing:border-box;
}


/*
  Important:
  Prevent global homepage section styles such as
  section { padding:96px 0; }
  from affecting recommendation screens.
*/

.btm-overlay .mr-step{
  padding:0;
  margin:0;
}


/* ---------------------------------------------------------
   PROGRESS
   --------------------------------------------------------- */

.mr-progress{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  max-width:420px;

  margin:2px auto 32px;
  padding:0 10px;
}

.mr-progress span{
  position:relative;
  z-index:2;

  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 30px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;

  background:#3A3338;

  color:rgba(255,255,255,.38);

  font-size:9px;
  font-weight:700;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.mr-progress span.is-active{
  color:#fff;

  background:#E84A8A;
  border-color:#E84A8A;

  box-shadow:
    0 0 0 4px rgba(232,74,138,.10);
}

.mr-progress i{
  width:64px;
  height:1px;

  flex:1;

  background:rgba(255,255,255,.10);
}


/* ---------------------------------------------------------
   STEP BASE
   --------------------------------------------------------- */

.mr-step{
  width:100%;
  max-width:1040px;

  margin:0 auto;

  animation:mr-step-in .32s ease;
}

.mr-step[hidden]{
  display:none !important;
}

@keyframes mr-step-in{
  from{
    opacity:0;
    transform:translateY(7px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* ---------------------------------------------------------
   TYPOGRAPHY
   --------------------------------------------------------- */

.mr-kicker{
  display:block;

  margin:0 0 9px;

  color:#F06C9F;

  font-size:9px;
  font-weight:800;
  line-height:1.2;

  letter-spacing:.15em;
  text-transform:uppercase;
}

.mr-step h3{
  max-width:720px;

  margin:0;

  color:#fff;

  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(27px,3vw,39px);
  font-weight:400;
  line-height:1.08;
}

.mr-lede{
  max-width:620px;

  margin:13px 0 27px;

  color:rgba(255,255,255,.53);

  font-size:11.5px;
  line-height:1.7;
}


/* =========================================================
   STEP 1
   LOOK SELECTION
   3 + 2 layout
   ========================================================= */

.mr-look-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));

  gap:12px;

  width:100%;
  max-width:900px;

  margin:0 auto;
}


/* First three = each spans 2 columns */

.mr-look-card:nth-child(1),
.mr-look-card:nth-child(2),
.mr-look-card:nth-child(3){
  grid-column:span 2;
}


/* Last two centered and wider */

.mr-look-card:nth-child(4){
  grid-column:2 / span 2;
}

.mr-look-card:nth-child(5){
  grid-column:4 / span 2;
}


.mr-look-card{
  position:relative;

  min-height:132px;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:20px;

  overflow:hidden;

  text-align:left;

  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(232,74,138,.08),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.025)
    );

  color:#fff;

  font:inherit;

  cursor:pointer;

  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.mr-look-card::before{
  content:"";

  position:absolute;

  top:17px;
  left:18px;

  width:7px;
  height:7px;

  border-radius:50%;

  background:rgba(255,255,255,.18);

  transition:.25s ease;
}

.mr-look-card:hover{
  transform:translateY(-3px);

  border-color:rgba(232,74,138,.36);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(232,74,138,.13),
      transparent 45%
    ),
    rgba(255,255,255,.055);
}

.mr-look-card.is-active{
  border-color:rgba(232,74,138,.72);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(240,108,159,.20),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(232,74,138,.17),
      rgba(232,74,138,.055)
    );

  box-shadow:
    inset 0 0 0 1px rgba(232,74,138,.08);
}

.mr-look-card.is-active::before{
  background:#F06C9F;

  box-shadow:
    0 0 0 4px rgba(232,74,138,.10);
}

.mr-look-card strong{
  position:relative;
  z-index:1;

  display:block;

  color:#fff;

  font-size:13px;
  font-weight:650;
}

.mr-look-card span{
  position:relative;
  z-index:1;

  display:block;

  margin-top:6px;

  color:rgba(255,255,255,.43);

  font-size:9.5px;
  line-height:1.45;
}


/* =========================================================
   STEP 2
   MAKEUP CATEGORIES
   ========================================================= */

.mr-category-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:10px;

  width:100%;
  max-width:850px;

  margin:0 auto;
}

.mr-category-grid button{
  min-width:0;
  min-height:68px;

  display:flex;
  align-items:center;

  gap:11px;

  padding:13px 15px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.022)
    );

  color:rgba(255,255,255,.72);

  font:inherit;
  text-align:left;

  cursor:pointer;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

.mr-category-grid button:hover{
  transform:translateY(-2px);

  border-color:rgba(232,74,138,.35);

  color:#fff;
}

.mr-category-grid button.is-active{
  border-color:rgba(232,74,138,.62);

  background:
    linear-gradient(
      135deg,
      rgba(232,74,138,.16),
      rgba(232,74,138,.055)
    );

  color:#fff;
}

.mr-category-icon{
  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 36px;

  border-radius:11px;

  background:rgba(232,74,138,.08);

  color:#F06C9F;

  font-size:14px;

  transition:.2s ease;
}

.mr-category-grid button.is-active .mr-category-icon{
  background:rgba(232,74,138,.18);
}

.mr-category-grid strong{
  min-width:0;

  overflow:hidden;

  color:inherit;

  font-size:10.5px;
  font-weight:600;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/* =========================================================
   COMMON BUTTONS
   ========================================================= */

.mr-actions{
  width:100%;
  max-width:900px;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:10px;

  margin:28px auto 0;
}

.mr-primary,
.mr-secondary{
  min-height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 18px;

  border-radius:999px;

  font:inherit;
  font-size:10px;
  font-weight:700;

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.mr-primary{
  border:1px solid #E84A8A;

  background:#E84A8A;

  color:#fff;
}

.mr-primary:hover{
  transform:translateY(-1px);

  background:#CB3D77;
  border-color:#CB3D77;
}

.mr-secondary{
  border:1px solid rgba(255,255,255,.14);

  background:rgba(255,255,255,.035);

  color:rgba(255,255,255,.72);
}

.mr-secondary:hover{
  color:#fff;

  border-color:rgba(255,255,255,.24);

  background:rgba(255,255,255,.06);
}


/* =========================================================
   STEP 3
   CAMERA / UPLOAD
   ========================================================= */

.mr-input-modes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:10px;

  width:100%;
  max-width:720px;

  margin:0 auto 14px;
}

.mr-input-mode{
  min-width:0;

  display:flex;
  align-items:center;

  gap:11px;

  padding:12px 14px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;

  background:rgba(255,255,255,.035);

  color:#fff;

  font:inherit;
  text-align:left;

  cursor:pointer;

  transition:.22s ease;
}

.mr-input-mode:hover{
  border-color:rgba(232,74,138,.32);
}

.mr-input-mode.is-active{
  border-color:rgba(232,74,138,.55);

  background:
    linear-gradient(
      135deg,
      rgba(232,74,138,.14),
      rgba(232,74,138,.045)
    );
}

.mr-input-mode > span{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 38px;

  border-radius:11px;

  background:rgba(232,74,138,.10);

  color:#F06C9F;

  font-size:15px;
}

.mr-input-mode div{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:3px;
}

.mr-input-mode strong{
  color:#fff;

  font-size:10.5px;
  font-weight:650;
}

.mr-input-mode small{
  overflow:hidden;

  color:rgba(255,255,255,.40);

  font-size:8.5px;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ---------------------------------------------------------
   CAMERA WORKSPACE
   --------------------------------------------------------- */

.mr-input-workspace{
  position:relative;

  width:100%;
  max-width:720px;

  min-height:360px;

  margin:0 auto;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;

  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(232,74,138,.10),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #453A41,
      #342E33
    );
}

.mr-source{
  width:100%;
  min-height:360px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  padding:30px;

  text-align:center;
}

.mr-source[hidden]{
  display:none !important;
}


/*
   Important:
   JS creates a <video> dynamically.
   Keep it from becoming a huge wide canvas.
*/

.mr-source video,
.mr-source canvas{
  display:block;

  width:auto !important;
  max-width:100% !important;

  height:360px !important;
  max-height:360px !important;

  margin:0 auto;

  object-fit:cover;

  border-radius:16px;
}


/*
   If the camera is 16:9, this keeps the visual
   portrait-ish and appropriate for face analysis.
*/

.mr-source[data-mr-source="camera"] video,
.mr-source[data-mr-source="camera"] canvas{
  width:min(100%,480px) !important;
  aspect-ratio:4 / 3;

  object-fit:cover;
}


/* ---------------------------------------------------------
   FACE PLACEHOLDER
   --------------------------------------------------------- */

.mr-face-frame{
  position:relative;

  width:84px;
  height:108px;

  margin:0 auto 17px;

  border:1px solid rgba(255,255,255,.19);
  border-radius:48% 48% 44% 44%;
}

.mr-face-frame::before,
.mr-face-frame::after,
.mr-face-frame span::before,
.mr-face-frame span::after{
  content:"";

  position:absolute;

  width:16px;
  height:16px;

  border-style:solid;
  border-color:#E84A8A;
}

.mr-face-frame::before{
  top:-1px;
  left:-1px;

  border-width:2px 0 0 2px;
}

.mr-face-frame::after{
  top:-1px;
  right:-1px;

  border-width:2px 2px 0 0;
}

.mr-face-frame span::before{
  bottom:-1px;
  left:-1px;

  border-width:0 0 2px 2px;
}

.mr-face-frame span::after{
  right:-1px;
  bottom:-1px;

  border-width:0 2px 2px 0;
}

.mr-source > strong{
  color:#fff;

  font-size:13px;
  font-weight:600;
}

.mr-source > p{
  max-width:340px;

  margin:7px auto 17px;

  color:rgba(255,255,255,.45);

  font-size:9.5px;
  line-height:1.55;
}


/* =========================================================
   UPLOAD
   ========================================================= */

.mr-upload-zone{
  width:100%;
  max-width:480px;

  min-height:240px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:7px;

  margin:0 auto;
  padding:28px;

  border:1px dashed rgba(232,74,138,.42);
  border-radius:18px;

  background:rgba(232,74,138,.045);

  color:#fff;

  font:inherit;

  cursor:pointer;

  transition:.22s ease;
}

.mr-upload-zone:hover{
  transform:translateY(-2px);

  border-color:rgba(232,74,138,.75);

  background:rgba(232,74,138,.075);
}

.mr-upload-zone > span{
  width:45px;
  height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:4px;

  border-radius:50%;

  background:rgba(232,74,138,.11);

  color:#F06C9F;

  font-size:19px;
}

.mr-upload-zone strong{
  color:#fff;

  font-size:11.5px;
}

.mr-upload-zone small{
  max-width:300px;

  color:rgba(255,255,255,.38);

  font-size:8.5px;
  line-height:1.5;
}


/* ---------------------------------------------------------
   UPLOAD PREVIEW
   --------------------------------------------------------- */

.mr-upload-preview{
  position:relative;

  width:100%;
  max-width:480px;

  margin:0 auto;
}

.mr-upload-preview img{
  display:block;

  width:auto;
  max-width:100%;

  height:auto;
  max-height:340px;

  margin:0 auto;

  object-fit:contain;

  border-radius:16px;
}

.mr-upload-preview button{
  position:absolute;

  right:12px;
  bottom:12px;

  padding:8px 12px;

  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;

  background:rgba(30,25,29,.82);

  color:#fff;

  font:inherit;
  font-size:8.5px;

  cursor:pointer;

  backdrop-filter:blur(6px);
}


/* =========================================================
   SKIP / MANUAL PROFILE
   ========================================================= */

.mr-skip{
  display:block;

  margin:14px auto 0;
  padding:6px 10px;

  border:0;

  background:transparent;

  color:rgba(255,255,255,.44);

  font:inherit;
  font-size:9.5px;

  cursor:pointer;

  transition:.2s ease;
}

.mr-skip:hover{
  color:#F06C9F;
}

.mr-manual-profile{
  width:100%;
  max-width:720px;

  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;

  align-items:end;

  gap:12px;

  margin:18px auto 0;
  padding:16px;

  border:1px solid rgba(255,255,255,.09);
  border-radius:15px;

  background:rgba(255,255,255,.035);
}

.mr-manual-profile[hidden]{
  display:none !important;
}

.mr-manual-profile > div{
  min-width:0;
}

.mr-manual-profile label{
  display:block;

  margin:0 0 6px;

  color:rgba(255,255,255,.44);

  font-size:8.5px;
}

.mr-manual-profile select{
  width:100%;
  min-height:40px;

  padding:8px 10px;

  outline:none;

  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;

  background:#332D32;

  color:#fff;

  font:inherit;
  font-size:10px;
}


/* =========================================================
   STEP 4
   RECOMMENDATION RESULTS
   ========================================================= */

.mr-result-heading{
  width:100%;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:30px;

  margin:0 0 22px;
  padding:0 2px 18px;

  border-bottom:1px solid rgba(255,255,255,.08);
}

.mr-result-heading h3{
  max-width:560px;
}

.mr-profile-summary{
  flex:0 0 auto;

  padding:10px 13px;

  text-align:right;

  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;

  background:rgba(255,255,255,.025);
}

.mr-profile-summary strong{
  display:block;

  color:#F06C9F;

  font-size:10.5px;
  font-weight:700;
}

.mr-profile-summary span{
  display:block;

  margin-top:4px;

  color:rgba(255,255,255,.43);

  font-size:8.5px;
}

.mr-profile-summary b{
  color:rgba(255,255,255,.72);

  font-weight:500;
}


/* ---------------------------------------------------------
   RESULT GRID
   --------------------------------------------------------- */

.mr-results-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));

  align-items:stretch;

  gap:12px;

  width:100%;
}


/* ---------------------------------------------------------
   RESULT CARD
   --------------------------------------------------------- */

.mr-result-card{
  min-width:0;
  min-height:190px;

  display:flex;
  flex-direction:column;

  padding:17px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(232,74,138,.07),
      transparent 45%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.022)
    );
}

.mr-result-card-top{
  min-height:20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin:0 0 15px;
}

.mr-result-category{
  overflow:hidden;

  color:#F06C9F;

  font-size:7.5px;
  font-weight:800;

  letter-spacing:.12em;
  text-transform:uppercase;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ---------------------------------------------------------
   SHADE
   --------------------------------------------------------- */

.mr-result-color{
  width:44px;
  height:44px;

  display:block;

  flex:0 0 44px;

  margin:0 0 12px;

  border:2px solid rgba(255,255,255,.11);
  border-radius:50%;

  background:var(--mr-color);

  box-shadow:
    0 6px 18px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.mr-result-card > strong{
  display:block;

  overflow:hidden;

  margin:0;

  color:#fff;

  font-size:11.5px;
  font-weight:650;

  text-overflow:ellipsis;
  white-space:nowrap;
}

.mr-result-card > small{
  display:block;

  margin:4px 0 0;

  color:rgba(255,255,255,.36);

  font-size:8px;
  line-height:1.3;
}


/* ---------------------------------------------------------
   OPTIONAL SHADE NAVIGATION
   If we add previous/next shade buttons in JS
   --------------------------------------------------------- */

.mr-result-options{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:8px;

  margin-top:auto;
  padding-top:16px;
}

.mr-result-option-btn{
  min-width:32px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0 9px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:9px;

  background:rgba(255,255,255,.035);

  color:rgba(255,255,255,.62);

  font:inherit;
  font-size:10px;

  cursor:pointer;

  transition:.2s ease;
}

.mr-result-option-btn:hover{
  color:#fff;

  border-color:rgba(232,74,138,.35);

  background:rgba(232,74,138,.08);
}

.mr-result-option-label{
  flex:1;

  overflow:hidden;

  color:rgba(255,255,255,.34);

  font-size:7.5px;
  text-align:center;

  text-overflow:ellipsis;
  white-space:nowrap;
}


/* =========================================================
   WHY THESE WORK
   ========================================================= */

.mr-why{
  width:100%;

  margin:18px 0 0;
  padding:15px 17px;

  border:1px solid rgba(232,74,138,.14);
  border-left:2px solid #E84A8A;
  border-radius:0 12px 12px 0;

  background:
    linear-gradient(
      90deg,
      rgba(232,74,138,.075),
      rgba(232,74,138,.025)
    );
}

.mr-why .mr-kicker{
  margin-bottom:5px;
}

.mr-why p{
  max-width:780px;

  margin:0;

  color:rgba(255,255,255,.52);

  font-size:9.5px;
  line-height:1.65;
}


/* =========================================================
   RESULT ACTIONS
   ========================================================= */

.mr-result-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:10px;

  width:100%;

  margin:20px 0 0;
}

.mr-try-look{
  min-width:145px;
}


/* =========================================================
   ANALYSIS OVERLAY
   ========================================================= */

.mr-analysis{
  position:absolute;

  inset:-4px 4px 0;

  z-index:50;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  min-height:420px;

  padding:30px;

  border:1px solid rgba(255,255,255,.08);
  border-radius:19px;

  background:rgba(48,41,46,.94);

  text-align:center;

  backdrop-filter:blur(10px);
}

.mr-analysis[hidden]{
  display:none !important;
}

.mr-spinner{
  width:46px;
  height:46px;

  margin:0 0 16px;

  border:2px solid rgba(255,255,255,.12);
  border-top-color:#E84A8A;

  border-radius:50%;

  animation:mr-spin .8s linear infinite;
}

@keyframes mr-spin{
  to{
    transform:rotate(360deg);
  }
}

.mr-analysis strong{
  color:#fff;

  font-size:13px;
  font-weight:650;
}

.mr-analysis span{
  margin-top:5px;

  color:rgba(255,255,255,.42);

  font-size:8.5px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:900px){

  .mr-app{
    padding-left:14px;
    padding-right:14px;
  }


  /* 2 + 2 + 1 */

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

    max-width:680px;
  }

  .mr-look-card:nth-child(n){
    grid-column:auto;
  }

  .mr-look-card:nth-child(5){
    grid-column:1 / -1;

    width:calc(50% - 6px);

    justify-self:center;
  }


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


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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:640px){

  .mr-app{
    padding:4px 6px 20px;
  }


  .mr-progress{
    max-width:300px;

    margin-bottom:25px;
  }

  .mr-progress i{
    width:32px;
  }


  .mr-step h3{
    font-size:27px;
  }


  /* LOOKS */

  .mr-look-grid{
    grid-template-columns:1fr;

    gap:9px;
  }

  .mr-look-card:nth-child(n){
    grid-column:auto;

    width:100%;
  }

  .mr-look-card{
    min-height:105px;

    padding:16px;
  }


  /* CATEGORIES */

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

    gap:8px;
  }

  .mr-category-grid button{
    min-height:60px;

    padding:10px;
  }

  .mr-category-icon{
    width:31px;
    height:31px;

    flex-basis:31px;
  }


  /* INPUT */

  .mr-input-modes{
    grid-template-columns:1fr;
  }

  .mr-input-workspace,
  .mr-source{
    min-height:320px;
  }

  .mr-source{
    padding:20px;
  }

  .mr-source video,
  .mr-source canvas{
    width:100% !important;
    height:auto !important;
    max-height:320px !important;

    aspect-ratio:4 / 3;

    object-fit:cover;
  }


  /* MANUAL */

  .mr-manual-profile{
    grid-template-columns:1fr;

    align-items:stretch;
  }


  /* RESULTS */

  .mr-result-heading{
    align-items:flex-start;
    flex-direction:column;

    gap:14px;
  }

  .mr-profile-summary{
    width:100%;

    text-align:left;
  }

  .mr-results-grid{
    grid-template-columns:1fr;
  }

  .mr-result-card{
    min-height:175px;
  }


  /* ACTIONS */

  .mr-actions,
  .mr-result-actions{
    flex-wrap:wrap;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:420px){

  .mr-category-grid{
    grid-template-columns:1fr;
  }

  .mr-primary,
  .mr-secondary{
    flex:1;
  }

}