/* =========================================================
   RECIPANION MOBILE CONCEPT V1
   Warm Editorial Kitchen
   ========================================================= */

@media (max-width: 760px) {

  :root {
    --mobile-coral: #dc7658;
    --mobile-teal: #5f9290;
    --mobile-amber: #d7a744;
    --mobile-green: #4f7c58;
    --mobile-deep-green: #31543a;
  }


  /* =======================================================
     PAGE
     ======================================================= */

  html,
  body {
    background:
      #faf7f0 !important;
  }


  body {
    padding-bottom:
      118px;
  }


  main > .container {
    padding-left:
      18px;

    padding-right:
      18px;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  header {
    background:
      transparent !important;

    border-bottom:
      0 !important;
  }


  header .container {
    padding-top:
      22px;

    padding-bottom:
      14px;
  }


  header .recipanion-brand-logo {
    width:
      54px !important;

    height:
      54px !important;

    flex-basis:
      54px !important;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .recipanion-concept-hero {
    position:
      relative;

    overflow:
      hidden;

    min-height:
      255px !important;

    margin:
      14px 0 22px !important;

    padding:
      28px 26px !important;

    border:
      1px solid #eadfd1 !important;

    border-radius:
      26px !important;

    background:
      linear-gradient(
        125deg,
        #fffaf2 0%,
        #fff6eb 54%,
        #f6e9df 100%
      ) !important;

    box-shadow:
      0 12px 36px
      rgba(63, 48, 36, .055) !important;
  }


  .recipanion-concept-hero::before {
    content:
      "";

    position:
      absolute;

    left:
      0;

    top:
      26px;

    width:
      4px;

    height:
      64px;

    border-radius:
      0 6px 6px 0;

    background:
      var(--mobile-coral);
  }


  .recipanion-hero-copy {
    position:
      relative;

    z-index:
      2;

    max-width:
      88%;
  }


  .recipanion-hero-kicker {
    display:
      inline-flex;

    margin-bottom:
      14px;

    color:
      var(--mobile-coral);

    font-size:
      11px;

    font-weight:
      800;

    letter-spacing:
      .08em;

    text-transform:
      uppercase;
  }


  .recipanion-concept-hero h2 {
    max-width:
      330px;

    margin:
      0 0 12px !important;

    font-size:
      clamp(
        32px,
        9vw,
        42px
      ) !important;

    line-height:
      1.02 !important;

    letter-spacing:
      -.035em;

    color:
      #293129 !important;
  }


  .recipanion-concept-hero p {
    max-width:
      330px;

    margin:
      0 0 22px !important;

    font-size:
      15px !important;

    line-height:
      1.5 !important;

    color:
      #70776e !important;
  }


  .recipanion-hero-cta {
    display:
      inline-flex;

    align-items:
      center;

    gap:
      10px;

    min-height:
      46px;

    padding:
      0 18px;

    border:
      0;

    border-radius:
      13px;

    background:
      var(--mobile-coral);

    color:
      #fff;

    font:
      inherit;

    font-size:
      14px;

    font-weight:
      800;

    box-shadow:
      0 7px 18px
      rgba(220, 118, 88, .20);
  }


  .recipanion-hero-cta:active {
    transform:
      scale(.98);
  }


  .recipanion-hero-cta span {
    font-size:
      18px;
  }


  /* decorative food/leaf rhythm */

  .recipanion-hero-decoration {
    position:
      absolute;

    right:
      -12px;

    bottom:
      -10px;

    width:
      150px;

    height:
      150px;

    opacity:
      .76;
  }


  .hero-leaf {
    position:
      absolute;

    display:
      block;

    width:
      38px;

    height:
      74px;

    border-radius:
      100% 0 100% 0;

    background:
      rgba(
        79,
        124,
        88,
        .16
      );

    transform:
      rotate(35deg);
  }


  .hero-leaf-one {
    right:
      22px;

    bottom:
      12px;
  }


  .hero-leaf-two {
    right:
      75px;

    bottom:
      4px;

    width:
      27px;

    height:
      54px;

    background:
      rgba(
        215,
        167,
        68,
        .16
      );

    transform:
      rotate(-18deg);
  }


  .hero-dot {
    position:
      absolute;

    display:
      block;

    border-radius:
      50%;
  }


  .hero-dot-one {
    width:
      56px;

    height:
      56px;

    right:
      12px;

    top:
      12px;

    background:
      rgba(
        220,
        118,
        88,
        .08
      );
  }


  .hero-dot-two {
    width:
      26px;

    height:
      26px;

    right:
      92px;

    top:
      35px;

    background:
      rgba(
        95,
        146,
        144,
        .10
      );
  }


  /* =======================================================
     HOME CARDS
     ======================================================= */

  .home-actions {
    display:
      grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap:
      13px !important;
  }


  .home-actions .big-action {
    position:
      relative;

    display:
      flex !important;

    flex-direction:
      column;

    align-items:
      flex-start !important;

    justify-content:
      flex-start !important;

    min-height:
      192px !important;

    padding:
      20px !important;

    overflow:
      hidden;

    border:
      1px solid
      #e1e3dc !important;

    border-radius:
      22px !important;

    background:
      #fffdf9 !important;

    color:
      #293129 !important;

    text-align:
      left !important;

    box-shadow:
      0 5px 18px
      rgba(41, 49, 41, .035);

    transition:
      transform .14s ease,
      box-shadow .14s ease;
  }


  .home-actions .big-action:active {
    transform:
      scale(.985);
  }


  .home-actions .action-icon {
    margin:
      0 0 16px !important;

    color:
      #616b61 !important;
  }


  .home-actions
  .action-icon
  .r-icon {
    width:
      30px !important;

    height:
      30px !important;

    stroke-width:
      1.8;
  }


  .home-actions .action-title {
    margin-top:
      0;

    font-size:
      20px !important;

    line-height:
      1.1 !important;

    letter-spacing:
      -.018em;
  }


  .home-actions .action-subtitle {
    margin-top:
      6px;

    font-size:
      12.5px !important;

    line-height:
      1.35;

    color:
      #858b82 !important;
  }


  .home-card-link {
    margin-top:
      auto;

    padding-top:
      18px;

    font-size:
      11px;

    font-weight:
      800;

    letter-spacing:
      .01em;
  }


  /* Recipes = coral */

  .home-recipes-action
  .action-icon,
  .home-card-link-recipes {
    color:
      var(--mobile-coral) !important;
  }


  /* Account = brand green */

  .home-account-action
  .action-icon,
  .home-card-link-account {
    color:
      var(--mobile-green) !important;
  }


  /* Shopping = teal */

  .home-shopping-action
  .action-icon,
  .home-card-link-shopping {
    color:
      var(--mobile-teal) !important;
  }


  /* Week menu = amber */

  .home-week-action
  .action-icon,
  .home-card-link-week {
    color:
      var(--mobile-amber) !important;
  }


  .home-account-action::after {
    display:
      none !important;
  }


  /* tiny module accent line */

  .home-actions .big-action::before {
    content:
      "";

    position:
      absolute;

    left:
      20px;

    top:
      0;

    width:
      34px;

    height:
      3px;

    border-radius:
      0 0 4px 4px;

    background:
      #bbb;
  }


  .home-recipes-action::before {
    background:
      var(--mobile-coral) !important;
  }


  .home-account-action::before {
    background:
      var(--mobile-green) !important;
  }


  .home-shopping-action::before {
    background:
      var(--mobile-teal) !important;
  }


  .home-week-action::before {
    background:
      var(--mobile-amber) !important;
  }


  /* =======================================================
     BOTTOM NAV
     ======================================================= */

  .bottom-nav {
    left:
      14px !important;

    right:
      14px !important;

    bottom:
      calc(
        12px +
        env(
          safe-area-inset-bottom
        )
      ) !important;

    width:
      auto !important;

    padding:
      8px !important;

    border:
      1px solid
      rgba(
        221,
        227,
        216,
        .95
      ) !important;

    border-radius:
      25px !important;

    background:
      rgba(
        255,
        253,
        249,
        .97
      ) !important;

    box-shadow:
      0 14px 38px
      rgba(
        41,
        49,
        41,
        .12
      ) !important;

    backdrop-filter:
      blur(18px);

    -webkit-backdrop-filter:
      blur(18px);
  }


  .bottom-nav button,
  .bottom-nav a {
    min-height:
      62px;

    border-radius:
      18px !important;
  }


  .bottom-nav .active {
    background:
      #edf3e9 !important;

    color:
      var(--mobile-deep-green) !important;
  }


  .bottom-nav .active .r-icon {
    color:
      var(--mobile-deep-green) !important;
  }


  /* =======================================================
     SMALL PHONES
     ======================================================= */

  @media (max-width: 390px) {

    .home-actions .big-action {
      min-height:
        178px !important;

      padding:
        17px !important;
    }


    .home-actions .action-title {
      font-size:
        18px !important;
    }


    .home-card-link {
      font-size:
        10px;
    }


    .recipanion-concept-hero {
      padding:
        24px 22px !important;
    }

  }

}


/* === HOME SIMPLER V2 === */
@media (max-width: 760px) {

  .recipanion-concept-hero {
    min-height: auto !important;
    margin: 10px 0 16px !important;
    padding: 18px 22px !important;
    border-radius: 22px !important;
    background: #fffaf2 !important;
    box-shadow: 0 6px 18px rgba(63, 48, 36, .04) !important;
  }

  .recipanion-concept-hero::before {
    top: 18px !important;
    height: 46px !important;
  }

  .recipanion-hero-kicker {
    display: none !important;
  }

  .recipanion-concept-hero h2 {
    max-width: none !important;
    margin: 0 0 8px !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }

  .recipanion-concept-hero p {
    max-width: none !important;
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .recipanion-hero-cta,
  .recipanion-hero-decoration {
    display: none !important;
  }

  .home-account-action {
    display: none !important;
  }

  .home-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .home-recipes-action {
    grid-column: 1 / -1 !important;
    min-height: 138px !important;
  }

  .home-shopping-action,
  .home-week-action {
    min-height: 148px !important;
  }

  .home-actions .big-action {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .home-actions .action-icon {
    margin: 0 0 12px !important;
  }

  .home-actions .action-title {
    font-size: 18px !important;
  }

  .home-actions .action-subtitle {
    margin-top: 6px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .home-card-link {
    margin-top: 14px !important;
    padding-top: 0 !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   HOME CLEAN V3
   No hero, no duplicate account tile
   ========================================================= */

@media (max-width: 760px) {

  main > .container {
    padding-top: 18px;
  }


  .home-actions {
    margin-top: 0 !important;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;
  }


  /* Recepten is de primaire Home-actie */
  .home-recipes-action {
    grid-column: 1 / -1 !important;

    min-height: 150px !important;
  }


  .home-shopping-action,
  .home-week-action {
    min-height: 154px !important;
  }


  .home-actions .big-action {
    padding: 20px !important;
  }

}