/* Baseline Natural Skincare canonical page styling. */

/* --- Skincare foundation --- */
:root{
    /* Softer mirrored skincare gradient: broader light centre, gentler transition, less dark edge weight. */
    --skin-deep:#b8644d;
    --skin-peach:#cf8167;
    --skin-wash:#dc9f88;
    --skin-milk:#e1ad9b;
    --skin-cream:#e8c1b2;
    --skin-page-gradient: linear-gradient(90deg,
      var(--skin-deep) 0%,
      var(--skin-peach) 10%,
      var(--skin-wash) 24%,
      var(--skin-milk) 38%,
      var(--skin-cream) 48%,
      var(--skin-cream) 52%,
      var(--skin-milk) 62%,
      var(--skin-wash) 76%,
      var(--skin-peach) 90%,
      var(--skin-deep) 100%
    );
    --bg:var(--skin-cream);
    --bg-2:var(--skin-milk);
    --bg-3:var(--skin-wash);
    --header-gradient: var(--skin-page-gradient);
    --page-bg: var(--skin-page-gradient);
    --hero-bg: var(--skin-page-gradient);
    --homebar-bg: var(--skin-page-gradient);
    --banner-pill-bg: var(--skin-page-gradient);
  }
*{box-sizing:border-box}
  html,body{
    margin:0;
    padding:0;
    min-height:100%;
    background:var(--page-bg);
    color:var(--ink);
    font-family:var(--font);
    scroll-behavior:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  body{ min-height: 100svh; background:var(--page-bg); }

  html[data-app="skin"] .bl-homebar,
  body[data-app="skin"] .bl-homebar,
  html[data-app="skin"] .bl-top-header,
  body[data-app="skin"] .bl-top-header,
  html[data-app="skin"] .bl-pill-menu,
  body[data-app="skin"] .bl-pill-menu,
  html[data-app="skin"] .bl-homebar::before,
  body[data-app="skin"] .bl-homebar::before{
    background: var(--skin-page-gradient) !important;
  }


  /* Header with natural green */
  .badge{background:rgba(239,210,197,0.86); color:var(--accent-2);padding:7px 11px;border-radius:999px;font-size:16px;font-weight:760;border:1px solid var(--border-2);box-shadow:var(--shadow-soft);}

  /* Tabs */
  .tab{appearance:none;border:none;cursor:pointer;background:rgba(239,210,197,0.66);padding:10px 14px;border-radius:999px;font-size:16px;font-weight:760;color:var(--muted);border:1px solid rgba(122,74,58,0.12);box-shadow:0 10px 22px -20px rgba(35,23,19,0.25);transition:transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;}
  .tab:hover{transform:translateY(-1px);background:rgba(239,210,197,0.80);border-color:rgba(188,95,70,0.28);box-shadow:0 16px 30px -24px rgba(188,95,70,0.35)}

  /* Active tab: keep text non-white */

  /* Header is part of normal document flow (non-sticky) */
  .tab[aria-selected="true"]{
    color: var(--ink);
    background: linear-gradient(135deg, var(--accent), var(--skin-peach));
    border-color: rgba(35,23,19,0.18);
    box-shadow: 0 22px 46px -34px rgba(188,95,70,0.88);
  }

  /* Keep headings visible beneath the sticky header */
[id]{
  scroll-margin-top: calc(var(--homebar-h) + 18px);
}

  /* Layout width is owned by css/baseline-sitewide.css. */
  .section{display:none; animation:fade var(--dur-3) var(--ease-soft)}
  .section.active{display:block}
  @keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

  /* Cards */
/* Micro-reassurance: cards gently deepen on hover/focus */
.card{
  transition:
    transform var(--dur-2) var(--ease-cushion),
    box-shadow var(--dur-2) var(--ease-soft),
    filter var(--dur-2) var(--ease-soft);
}
.card:hover,
.card:focus-within{
  transform: translateY(-2px);
  box-shadow: var(--shadow), var(--glow-soft);
  filter: saturate(1.02);
}

  .card{background:linear-gradient(180deg, rgba(247,233,220,0.94), rgba(255,210,184,0.86));border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow: var(--shadow);}

/* Warm "hug" cards */
.card{position:relative; overflow:hidden; padding:20px;}
.card{
  box-shadow: var(--shadow);
  /* Containment: a soft inner edge so content feels held */
  background-clip: padding-box;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,235,220,0.42), inset 0 -14px 40px -28px rgba(188,95,70,0.25);
  opacity:0.9;
}

.card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(188,95,70,0.42), rgba(215,168,108,0.30), rgba(244,198,183,0.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
  .grid{display:grid; gap:14px; grid-template-columns:1fr;}
  @media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

  h2{margin:0 0 var(--space-2) 0; font-size:34px; line-height:1.15}
  h3{margin:var(--space-4) 0 var(--space-1) 0; font-size:28px; color:var(--accent-2); line-height:1.25}
  h4{margin:var(--space-3) 0 var(--space-1) 0; font-size:20px; color:var(--ink)}
  p{margin:0 0 var(--space-3) 0; line-height:1.58}
  ul,ol{margin:0 0 var(--space-3) 20px; padding:0}
  li{margin:6px 0; position:relative}
  .divider{height:1px;background:linear-gradient(90deg, rgba(188,95,70,0.18), rgba(122,74,58,0.10), rgba(215,168,108,0.14));margin:14px 0}

  /* Congruent button language (inviting, optional) */
.btnlike,
.action,
.print-btn,
.multiplier button,
.back-fab,
.top-fab,
.side-recipe-nav a{
  border-radius:999px;
  border:1px solid rgba(188,95,70,0.22);
  background:linear-gradient(180deg, rgba(247,233,220,0.88), rgba(255,231,214,0.82));
  color:var(--accent-2);
  box-shadow:0 14px 26px -24px rgba(188,95,70,0.26);
  transition:transform var(--dur-2) var(--ease-cushion), box-shadow var(--dur-2) var(--ease-soft), filter var(--dur-2) var(--ease-soft);
}
.btnlike:hover,
.action:hover,
.print-btn:hover,
.multiplier button:hover,
.back-fab:hover,
.top-fab:hover,
.side-recipe-nav a:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 36px -30px rgba(188,95,70,0.38);
  filter:saturate(1.02);
}
.btnlike:active,
.action:active,
.print-btn:active,
.multiplier button:active,
.back-fab:active,
.top-fab:active,
.side-recipe-nav a:active{
  transform:translateY(0px);
}
.btnlike:focus-visible,
.action:focus-visible,
.print-btn:focus-visible,
.multiplier button:focus-visible,
.back-fab:focus-visible,
.top-fab:focus-visible,
.side-recipe-nav a:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ring), 0 18px 36px -30px rgba(188,95,70,0.38);
}

  /* Overview routine chips */
  .actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
  .action{display:inline-flex;align-items:center;gap:10px;padding:10px 12px;border-radius:999px;background:linear-gradient(180deg, rgba(247,233,220,0.86), rgba(255,231,214,0.80));border:1px solid rgba(188,95,70,0.22);font-size:16px;text-decoration:none;color:var(--accent-2);font-weight:770;box-shadow:0 14px 26px -24px rgba(188,95,70,0.30);transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;}
  .action:hover{transform:translateY(-1px); box-shadow:0 10px 14px -14px rgba(0,0,0,.35)}
  .a-icon{font-size:16px}

  /* Link styles */
  /* Links: inviting rather than commanding */
a{
  color:var(--link);
  text-decoration: none;
  background-image: linear-gradient(transparent, transparent), linear-gradient(rgba(188,95,70,0.26), rgba(188,95,70,0.26));
  background-size: 100% 0px, 100% 2px;
  background-position: 0 100%, 0 100%;
  background-repeat:no-repeat;
  transition: color var(--dur-2) var(--ease-soft), background-size var(--dur-2) var(--ease-soft), filter var(--dur-2) var(--ease-soft);
}
a:hover{
  color:var(--link-hover);
  background-size: 100% 0px, 100% 4px;
  filter:saturate(1.02);
}
  .info-link{display:inline-block; font-size:16px; color:var(--link); text-decoration:none;
    margin:0 0 6px 0; border-bottom:1px dotted #9fb7a5;
  }
  .info-link:hover{color:var(--link-hover)}
  .ing-link{color:var(--link); text-decoration:none; border-bottom:1px dotted #9fb7a5; padding-bottom:1px}
  .ing-link:hover{color:var(--link-hover)}

  /* Tooltips */
  [data-tip]{cursor:help; border-bottom:1px dotted #a9bcae;}
  [data-tip]::after{
    content: attr(data-tip);
    position:absolute; left:0; top:100%;
    transform: translateY(6px);
    background: var(--tip-bg);
    color: var(--tip-ink);
    border:1px solid var(--tip-border);
    border-radius:14px;
    padding:8px 10px;
    font-size:16px; line-height:1.25;
    min-width: 220px; max-width: 360px;
    box-shadow:0 16px 38px -32px rgba(20,10,6,.55);
    white-space:normal; opacity:0; pointer-events:none;
    transition: opacity .15s ease, transform .15s ease; z-index:20;
  }
  [data-tip]:hover::after,
  [data-tip]:focus-visible::after,
  [data-tip]:focus-within::after{ opacity:1; transform: translateY(4px); pointer-events:auto; }

  /* Nested cards (e.g., Recipe Overview inside Recipes) */
.card .card{margin-top: var(--space-4);}

  /* Recipes grid */
  .recipes{display:grid; gap:14px}
  @media (min-width:900px){.recipes{grid-template-columns:1fr 1fr}}
  .recipe.card{break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid;}
  .note{font-size:1em; color:var(--muted);}
  .print-btn{float:right;margin:-6px -6px 8px 8px;font-size:16px;font-weight:800;border-radius:999px;border:1px solid rgba(224,122,95,0.35);background:linear-gradient(135deg,var(--accent-soft), #ffe9df);color:var(--accent-2);padding:7px 11px;cursor:pointer;box-shadow:0 14px 26px -22px rgba(224,122,95,.55);}
  .print-btn:hover{background:#efd3c9}

  /* Footer */
  .footer{max-width:1100px;margin:44px auto 64px;padding:0 20px;color:var(--muted);font-size:16px;
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  }

  /* Floating buttons */
  .back-fab, .top-fab{left:16px;bottom:16px;background:rgba(239,210,197,0.82);color:var(--accent-2);border:1px solid rgba(122,74,58,0.14);box-shadow:0 16px 36px -30px rgba(35,23,19,0.55);}
  .back-fab{right:16px;bottom:16px;background:linear-gradient(135deg, var(--accent-soft), rgba(255,248,239,0.95));color:var(--accent-2);border:1px solid rgba(188,95,70,0.30);box-shadow:0 22px 46px -34px rgba(188,95,70,0.70);}
  .back-fab:hover{ background:#efd3c9 }
  .top-fab{left:16px;bottom:16px;background:rgba(239,210,197,0.82);color:var(--accent-2);border:1px solid rgba(122,78,58,0.14);box-shadow:0 14px 30px -26px rgba(20,10,6,0.55);}
  .top-fab:hover{ background:#d5e3d5 }
  .meta-line{margin:2px 0}
  /* Recipe multiplier */
  .multiplier{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 12px;margin:12px 0 14px 0;border:1px solid rgba(188,95,70,0.22);border-radius:16px;background:linear-gradient(180deg, rgba(247,233,220,0.90), rgba(255,231,214,0.84));box-shadow:0 14px 26px -26px rgba(188,95,70,0.22);}
  .multiplier label{font-size:16px;font-weight:800;color:var(--muted);}
  .multiplier select{padding:9px 10px;border-radius:14px;border:1px solid rgba(122,74,58,0.14);font-weight:850;outline:none;background:rgba(239,210,197,0.88);color:var(--ink);}
  .multiplier select:focus{box-shadow:0 0 0 4px var(--ring); border-color:#ead1c8}
  .multiplier input{width:110px;padding:9px 10px;border-radius:14px;border:1px solid rgba(122,74,58,0.14);font-weight:800;outline:none;background:rgba(239,210,197,0.88);}
  .multiplier input:focus{box-shadow:0 0 0 4px var(--ring); border-color:#ead1c8}
  .multiplier button{padding:9px 11px;border-radius:999px;border:1px solid rgba(188,95,70,0.26);background:linear-gradient(135deg, var(--accent-soft), rgba(255,248,239,0.95));color:var(--accent-2);font-weight:850;cursor:pointer;font-size:16px;}
  .multiplier button.secondary{background:linear-gradient(180deg, rgba(239,210,197,0.88), rgba(255,231,214,0.82));border-color:rgba(188,95,70,0.26);color:var(--accent-2);}
  .multiplier .mini-note{font-size:16px; color:var(--muted);}

/* Nurturing typography */
h1,h2{font-family:var(--font-soft); letter-spacing:.2px}
h3{font-family:var(--font-soft)}
.care-line{
  margin-top:6px;
  font-size:18px;
  color:var(--muted);
  max-width: 58ch;
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .section{animation:none !important}
  .card,.tab,.action,.print-btn,.multiplier button,.back-fab,.top-fab{transition:none !important}
}

  /* Ingredient Library filter (by recipe) */
  .filter-bar{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    margin: 10px 0 14px 0;
    padding: 12px 12px;
    border:1px solid rgba(188,95,70,0.22);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(247,233,220,0.90), rgba(255,231,214,0.84));
    box-shadow:0 14px 26px -26px rgba(188,95,70,0.22);
  }
  .filter-bar label{ font-size:16px; font-weight:850; color:var(--muted); }
  .filter-bar select{
    min-width: 260px;
    padding:9px 10px;
    border-radius:14px;
    border:1px solid rgba(122,74,58,0.14);
    font-weight:850;
    outline:none;
    background:rgba(239,210,197,0.88);
    color:var(--ink);
  }
  .filter-bar select:focus{ box-shadow:0 0 0 4px var(--ring); border-color:rgba(188,95,70,0.30); }
  .filter-bar .hint{ font-size:16px; color:var(--muted); }
  .filter-bar .clear{
    margin-left:auto;
    padding:9px 12px;
    border-radius:999px;
    border:1px solid rgba(188,95,70,0.22);
    background:linear-gradient(180deg, rgba(239,210,197,0.88), rgba(255,231,214,0.82));
    font-weight:850; font-size:16px; cursor:pointer;
    color:var(--accent-2);
  }

  /* Ingredient Library sort (contextual) */
  .filter-bar .sort-wrap{ display:none; align-items:center; gap:8px; }
  .filter-bar .sort-wrap label{ margin-left:6px; }
  .filter-bar .sort-wrap[data-show="true"]{ display:flex; }

  .ingredient-recipe-link a{
    font-size:16px;
    font-weight:760;
    color:var(--link);
    padding:8px 12px;
    border-radius:999px;
    border:1px solid rgba(188,95,70,0.22);
    background:linear-gradient(180deg, rgba(247,233,220,0.88), rgba(255,231,214,0.82));
    text-decoration:none;
    box-shadow:0 10px 22px -20px rgba(188,95,70,0.32);
  }
  .ingredient-recipe-link a:hover{
    color:var(--link-hover);
  }


  /* Recipe view controls */
  .back-btn,
  .scale-toggle,
  .scale-apply{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:9px 14px;
    border-radius:999px;
    border:1px solid rgba(188,95,70,0.22);
    background:linear-gradient(180deg, rgba(239,210,197,0.88), rgba(255,231,214,0.82));
    color:var(--accent-2);
    font-size:16px;
    font-weight:850;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 10px 22px -20px rgba(188,95,70,0.32);
  }
  .back-btn:hover,
  .scale-toggle:hover,
  .scale-apply:hover{ color:var(--accent-2); filter:brightness(1.02); }
  .scale-block{ margin:14px 0 0; }
  .scale-toggle{ margin:0 0 10px; }
  .scale-tools{ margin:0; }
  .scale-msg{ margin-top:8px; }
  .recipe-page > .back-btn{ margin:0 0 12px; }

  /* Ensure layout fits viewport without manual zoom */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  @media (min-width: 900px){
    .card{ padding: 28px 30px; }
  }


  /* Massage glide slider (recipe-specific) */
  .glide-controller{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(280px, 0.95fr);
    gap:16px;
    align-items:start;
    margin:14px 0 16px 0;
    padding:14px 16px;
    border:1px solid rgba(188,95,70,0.22);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(247,233,220,0.92), rgba(255,231,214,0.86));
    box-shadow:0 14px 26px -26px rgba(188,95,70,0.22);
  }
  .glide-control-main,
  .glide-control-explainer{ min-width:0; }
  .glide-control-stack{
    display:grid;
    gap:14px;
    min-width:0;
  }
  .glide-control-explainer{
    display:flex;
    flex-direction:column;
    min-height:100%;
  }
  .glide-slider-head{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:start;
    gap:8px 12px;
    margin-bottom:10px;
  }
  .glide-label{
    min-width:0;
    font-size:16px;
    font-weight:850;
    color:var(--muted);
  }
  .glide-readout{
    max-width:100%;
    font-size:15px;
    font-weight:900;
    color:var(--accent-2);
    text-align:right;
    white-space:nowrap;
  }
  .glide-slider-wrap{
    padding:8px 0 4px;
  }
  .glide-slider{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:12px;
    margin:0;
    border-radius:999px;
    border:none;
    background:linear-gradient(90deg, rgba(188,95,70,0.28), rgba(188,95,70,0.10));
    outline:none;
    box-shadow: inset 0 0 0 1px rgba(188,95,70,0.18);
    cursor:pointer;
  }
  .glide-slider::-webkit-slider-runnable-track{
    height:12px;
    border-radius:999px;
    background:transparent;
  }
  .glide-slider::-moz-range-track{
    height:12px;
    border:none;
    border-radius:999px;
    background:transparent;
  }
  .glide-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:24px;
    height:24px;
    margin-top:-6px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(247,233,220,0.95), 0 8px 18px -10px rgba(188,95,70,0.65);
  }
  .glide-slider::-moz-range-thumb{
    width:24px;
    height:24px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(247,233,220,0.95), 0 8px 18px -10px rgba(188,95,70,0.65);
  }
  .glide-slider:focus-visible{
    box-shadow:0 0 0 4px var(--ring), inset 0 0 0 1px rgba(188,95,70,0.18);
  }
  .glide-scale{
    display:flex;
    justify-content:space-between;
    gap:16px;
    margin-top:10px;
    font-size:16px;
    color:var(--muted);
  }
  .glide-scale span:last-child{ text-align:right; }
  .glide-control-explainer{
    padding:12px 14px;
    border:1px solid rgba(188,95,70,0.18);
    border-radius:16px;
    background:rgba(255,255,255,0.18);
  }
  .glide-explain-title{
    margin:0 0 8px 0;
    font-size:16px;
    font-weight:900;
    color:var(--accent-2);
  }
  .glide-explain{
    margin:0 0 10px 0;
  }
  .glide-breakdown{
    font-size:16px;
    color:var(--muted);
  }
  @media (max-width: 900px){
    .glide-controller,
    .glide-controller--paired{
      grid-template-columns:1fr;
    }
  }
  @media (max-width: 760px){
    .glide-slider-head{ grid-template-columns:1fr; }
    .glide-readout{ text-align:left; white-space:normal; }
  }
  .glide-slider[disabled]{
    cursor:not-allowed;
    opacity:0.78;
  }

  .variant-switcher{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:14px 0 12px 0;
  }
  .variant-tab{
    appearance:none;
    border:none;
    cursor:pointer;
    padding:10px 14px;
    border-radius:999px;
    font-size:16px;
    font-weight:850;
    color:var(--accent-2);
    border:1px solid rgba(188,95,70,0.22);
    background:linear-gradient(180deg, rgba(239,210,197,0.88), rgba(255,231,214,0.82));
    box-shadow:0 10px 22px -20px rgba(188,95,70,0.32);
    transition:transform var(--dur-2) var(--ease-cushion), box-shadow var(--dur-2) var(--ease-soft), filter var(--dur-2) var(--ease-soft), background var(--dur-2) var(--ease-soft);
  }
  .variant-tab:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 36px -30px rgba(188,95,70,0.38);
    filter:saturate(1.02);
  }
  .variant-tab:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px var(--ring), 0 18px 36px -30px rgba(188,95,70,0.38);
  }
  .variant-tab[aria-selected="true"]{
    color:var(--ink);
    background:linear-gradient(135deg, var(--accent), var(--skin-peach));
    border-color:rgba(35,23,19,0.18);
    box-shadow:0 22px 46px -34px rgba(188,95,70,0.88);
  }
  .variant-panel[hidden]{
    display:none;
  }

  #recipes .recipe-main{ min-width:0; }
  #recipes .recipes{ display:none; }
  #recipes.recipe-open-mode .recipes,
  #recipes.recipe-detail-open .recipes{ display:block; }
  #recipes .recipe-page{ display:none; }
  #recipes.recipe-open-mode .recipe-page.is-open,
  #recipes.recipe-detail-open .recipe-page.is-open{ display:block; }
  #recipes.recipe-open-mode #recipes-landing,
  #recipes.recipe-detail-open #recipes-landing{ display:none; }

  .multiplier input[type="number"]{
    width:88px;
    min-width:88px;
    flex:0 0 88px;
    box-sizing:border-box;
    appearance:auto;
    -webkit-appearance:auto;
    -moz-appearance:auto;
  }

  @media print{
    .glide-controller,
    .variant-switcher{
      display:none !important;
    }
  }

/* --- Compact recipe layout --- */
/* Final page-local recipe compact override: keeps the card design, removes only darker editable-option slabs. */
body[data-app] #recipes .recipe-controls,
body[data-app] #recipes .multiplier.recipe-controls,
body[data-app] #recipes .scale-block,
body[data-app] #recipes .scale-tools,
body[data-app] #recipes .variant-switcher,
body[data-app] #recipes .glide-controller,
body[data-app] #recipes .glide-control-explainer{
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
  box-shadow:none!important;
}
body[data-app] #recipes .variant-heading,
body[data-app] #recipes .recipe-native-variant-switcher{display:none!important;}
body[data-app] #recipes .recipe-page:not(.recipe-options-open) .glide-controller{display:none!important;}
body[data-app] #recipes .recipe-page.recipe-options-open .glide-controller{display:grid!important;}
body[data-app] #recipes .recipe-edit-options[hidden]{display:none!important;}
@media print{
  body[data-app] #recipes .recipe-option-strip,
  body[data-app] #recipes .recipe-edit-options,
  body[data-app] #recipes .variant-switcher,
  body[data-app] #recipes .variant-heading,
  body[data-app] #recipes .glide-controller,
  body[data-app] #recipes .slider-save-row,
  body[data-app] #recipes .recipe-controls,
  body[data-app] #recipes .multiplier,
  body[data-app] #recipes .scale-block,
  body[data-app] #recipes .scale-tools,
  body[data-app] #recipes .back-btn,
  body[data-app] #recipes .print-btn,
  body[data-app] #recipes .recipe-actions{display:none!important;}
  body[data-app] #recipes .print-summary{display:block!important;}
}

/* --- Recipe page safety --- */
body[data-app] #recipes .recipe-page:not(.recipe-options-open) .recipe-edit-options,
body[data-app] #recipes .recipe-page:not(.recipe-options-open) > .multiplier.recipe-controls,
body[data-app] #recipes .recipe-page:not(.recipe-options-open) .glide-controller{display:none!important;}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options{display:block!important;}
html body[data-app] #recipes .recipe-variant-field select.recipe-variant-select{background:var(--showall-bg,var(--card-bg,rgba(255,255,255,.22)))!important;color:var(--ink,#111)!important;-webkit-text-fill-color:currentColor!important;}

/* --- Recipe options --- */
/* BASELINE-RECIPE-OPTIONS-ACTUAL-FIX-20260527 */
body[data-app] #recipes .recipe-option-strip{
  position:relative !important;
  z-index:30 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin:6px 0 12px 0 !important;
  overflow:visible !important;
}
body[data-app] #recipes .recipe-variant-field{
  position:relative !important;
  display:block !important;
  flex:0 0 320px !important;
  width:320px !important;
  min-width:0 !important;
  max-width:min(320px, 100%) !important;
  margin:0 !important;
  padding:0 !important;
}
body[data-app] #recipes .recipe-variant-field::before{
  content:'Variant:' !important;
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  pointer-events:none !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1 !important;
}
body[data-app] #recipes .recipe-variant-field > .label,
body[data-app] #recipes .recipe-option-strip > .recipe-variant-field > span.label{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}
html body[data-app] #recipes .recipe-variant-field select.recipe-variant-select{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:7px 34px 7px 88px !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, rgba(255,255,255,.22)) !important;
  background-image:var(--showall-bg, none) !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  letter-spacing:normal !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.12) !important;
  appearance:auto !important;
  -webkit-appearance:auto !important;
}
html body[data-app] #recipes .recipe-options-toggle,
html body[data-app] #recipes .recipe-edit-options .reset,
html body[data-app] #recipes .recipe-edit-options .apply,
html body[data-app] #recipes .recipe-edit-options .scale-toggle,
html body[data-app] #recipes .recipe-edit-options .scale-apply{
  min-height:40px !important;
  height:40px !important;
  width:auto !important;
  max-width:max-content !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, rgba(255,255,255,.22)) !important;
  background-image:var(--showall-bg, none) !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  padding:7px 12px !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.12) !important;
  box-sizing:border-box !important;
  align-self:center !important;
  cursor:pointer !important;
}
html body[data-app] #recipes .recipe-edit-options .reset{
  color:#9b2f22 !important;
  -webkit-text-fill-color:#9b2f22 !important;
}
body[data-app] #recipes .recipe-edit-options[hidden]{
  display:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options{
  display:block !important;
  width:100% !important;
  margin:0 0 14px 0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .multiplier.recipe-controls,
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .recipe-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:100% !important;
  max-width:100% !important;
  gap:12px !important;
  padding:0 !important;
  margin:0 0 14px 0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row{
  --recipe-edit-label-col:220px;
  --recipe-edit-field-col:300px;
  display:grid !important;
  grid-template-columns:var(--recipe-edit-label-col) var(--recipe-edit-field-col) max-content !important;
  justify-content:start !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .label{
  grid-column:1 !important;
  margin:0 !important;
  white-space:nowrap !important;
  justify-self:start !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-number,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > input,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .oat-toggle{
  grid-column:2 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:start !important;
  box-sizing:border-box !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .reset,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .apply{
  grid-column:3 !important;
  justify-self:start !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row--scale,
body[data-app] #recipes .recipe-edit-options .scale-block{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .scale-tools{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .scale-block:not(.is-open) .scale-tools{
  display:none !important;
}
@media (max-width:720px){
  body[data-app] #recipes .recipe-option-strip{
    align-items:stretch !important;
  }
  body[data-app] #recipes .recipe-variant-field,
  body[data-app] #recipes .recipe-options-toggle{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
  body[data-app] #recipes .recipe-edit-options .recipe-control-row{
    grid-template-columns:1fr !important;
  }
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .label,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-number,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-select,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > select,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > input,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .oat-toggle,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .reset,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .apply{
    grid-column:1 !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* --- Skincare main-page additions --- */
:root{ --homebar-h: 56px; } /* fallback */
  /* System chooser */
  .bl-system-wrap{ position: relative; display:flex; align-items:center; }
  .bl-system-toggle{
    all: unset;
    cursor: pointer;
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.16);
    background: rgba(239,210,197,.22);
    backdrop-filter: blur(8px) saturate(120%);
    color: var(--ink);
    font-weight: 850;
    letter-spacing:.02em;
    box-shadow: 0 14px 30px -26px rgba(35,23,19,.30);
  }
  .bl-system-toggle .caret{ font-weight: 900; opacity:.85; transform: translateY(-1px); }
  .bl-system-toggle:focus-visible{
    outline:none;
    box-shadow: 0 0 0 4px rgba(0,0,0,.18), 0 14px 30px -26px rgba(35,23,19,.30);
  }

  .bl-system-menu{
    position:absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    max-width: min(92vw, 380px);
    border-radius: 16px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,.14);
    background: linear-gradient(180deg, rgba(247,233,220,.96), rgba(255,231,214,.90));
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 22px 56px -38px rgba(0,0,0,.55);
    color: var(--ink);
  }
  .bl-system-menu a{
    display:block;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 820;
    color: var(--ink);
    text-decoration:none;
  }
  .bl-system-menu a:hover{
    background: rgba(188,95,70,.12);
  }
  .bl-system-menu .small{
    display:block;
    font-size: 16px;
    font-weight: 650;
    color: var(--muted);
    margin-top: 3px;
  }
  .bl-system-menu .divider{
    height:1px;
    margin: 10px 6px;
    background: rgba(0,0,0,.10);
    pointer-events: none;
}