/* The cook view (SOUS-261; docs/cook_view.md).
 *
 * Read from a counter: a laptop at arm's length or a phone propped against
 * the backsplash, in either orientation, at whatever text size the cook has
 * set. So: everything is sized in rem / clamp(), the view is one flex column
 * that fills the window (100dvh, so mobile browser bars don't cover the
 * buttons), and the ONLY thing that scrolls is the step. Previous / Next and
 * the timer tray are always on screen; the tray is capped at a third of the
 * window and scrolls inside itself.
 */

/* The cook view takes the whole window; the site chrome under it is removed
   rather than covered, so it is out of the tab order too. */
body:has(.cook-view) {
  overflow: hidden;
}

body:has(.cook-view) > header,
body:has(.cook-view) > footer {
  display: none;
}

.cook-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100dvh;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-light);
}

/* The step is the thing to read, and it follows the cook's text size all the
   way up. The chrome around it -- the bar, Previous / Next, the tray -- stops
   growing at 1.5x, or at large text sizes on a small phone it would leave no
   room for the step at all (mobile clamps its chrome the same way). Its
   buttons are sized in em off this, not in Bootstrap's rem. */
.cook-bar,
.cook-nav,
.cook-tray {
  font-size: min(1rem, 24px);
}

.cook-bar .btn,
.cook-nav .btn,
.cook-tray .btn {
  --bs-btn-font-size: 0.875em;
  --bs-btn-padding-x: 0.6em;
  --bs-btn-padding-y: 0.25em;
}

.cook-nav .btn {
  --bs-btn-font-size: 1.15em;
  --bs-btn-padding-y: 0.45em;
}

.cook-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25em 0.75em;
  padding: 0.5em 1em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.cook-title {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  font-size: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cook-position {
  font-weight: 600;
  white-space: nowrap;
}

.cook-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: min(1rem, 4vw);
}

.cook-step-number {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.cook-step-text {
  margin: 0 0 1rem;
  /* Large, growing with the window and with the cook's text size, but never
     so large that a phone fits fewer than a dozen characters on a line. */
  font-size: min(clamp(1.5rem, 1rem + 2.5vw, 2.75rem), 11vw);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Without JavaScript every step shows, so they need telling apart. */
.cook-step + .cook-step {
  margin-top: 2rem;
}

.cook-step-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* A chip sits inside the step's text, so it is sized off that text (em) and
   never wider than the line it is on. */
.cook-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  max-width: 100%;
  margin: 0 0.2em;
  padding: 0.1em 0.65em;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background-color: #fff;
  color: var(--info);
  font-size: max(1rem, 0.65em);
  font-weight: 600;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cook-step-after .cook-chip,
.cook-prep .cook-chip {
  font-size: 1rem;
  margin: 0;
}

.cook-chip:disabled {
  opacity: 0.6;
}

.cook-chip-running {
  background-color: var(--primary);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.cook-prep-heading {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.cook-prep-list {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.cook-limit {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: #6c757d;
}

.cook-nav {
  display: flex;
  gap: 0.75em;
  padding: 0.5em 1em;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* If a label cannot fit (huge text on a small phone) it is the WORD that is
   cut short, never the chevron. */
.cook-nav .btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  white-space: nowrap;
}

.cook-nav .btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The tray: at most a third of the window, scrolling inside itself. */
.cook-tray {
  flex: 0 0 auto;
  max-height: 33dvh;
  overflow-y: auto;
  padding: 0.5em 1em;
  border-top: 2px solid var(--primary);
  background-color: #fff;
}

.cook-tray-rows,
.cook-done-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Name and time on one line while they fit; the buttons wrap under them
   rather than squeezing the name out. */
.cook-tray-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em 0.75em;
  padding: 0.35em 0;
}

.cook-tray-row + .cook-tray-row {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cook-tray-name {
  flex: 1 1 8em;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.cook-tray-state {
  color: #6c757d;
  font-size: 0.875em;
}

.cook-tray-remaining {
  font-size: 1.35em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cook-tray-actions,
.cook-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
}

.cook-tray-notes {
  margin: 0.25em 0 0;
  font-size: 0.8125em;
  color: #6c757d;
}

/* The Done state covers everything, and scrolls if it must: its buttons can
   always be reached. A modal <dialog>: the browser's own box (inset, capped
   size, border, padding, colours) is undone here, and `display` is set only
   while it is open -- a closed dialog must stay display: none. */
.cook-done {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  overflow-y: auto;
  padding: 1rem;
  background-color: var(--info);
  color: #fff;
  animation: cook-done-pulse 1.2s ease-in-out infinite alternate;
}

.cook-done[open] {
  display: flex;
}

.cook-done-rows {
  margin: auto;
  width: 100%;
  max-width: 40rem;
  text-align: center;
}

.cook-done-row + .cook-done-row {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.cook-done-word {
  margin: 0;
  font-size: clamp(2.5rem, 2rem + 5vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
}

.cook-done-name,
.cook-done-cue {
  margin: 0.25rem 0 0;
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  overflow-wrap: anywhere;
}

.cook-done-note {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

.cook-done-actions {
  justify-content: center;
  margin-top: 1rem;
}

@keyframes cook-done-pulse {
  from { background-color: var(--info); }
  to { background-color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  .cook-done {
    animation: none;
  }
}

.cook-manual {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  border: 0;
  border-radius: var(--hp-radius);
  padding: 1.25rem;
}

.cook-manual::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

.cook-manual-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cook-manual-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.cook-manual-custom legend {
  float: none;
  width: 100%;
  font-size: 1rem;
}

.cook-manual-custom label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cook-manual-custom input {
  width: 5.5rem;
}

/* A phone on its side: the window is wide and very short. Give the step the
   height -- the title goes (it is the tab's title too), the chrome tightens. */
@media (max-height: 480px) {
  .cook-title {
    display: none;
  }

  .cook-bar,
  .cook-nav,
  .cook-tray {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }

  .cook-stage {
    padding: 0.5rem 1rem;
  }

  .cook-step-text {
    font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  }

  .cook-nav .btn {
    --bs-btn-padding-y: 0.2em;
  }
}
/* =========================================================================
   Homepage redesign prototype  (/homepage_options)
   Everything is namespaced under `.hp-body` / `.hp` so it can live in the
   sprockets require_tree bundle without leaking onto production pages.
   ========================================================================= */

.hp-body {
  margin: 0;
  background: #0e1311;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.hp {
  --hp-sage: #5c8d89;
  --hp-sage-deep: #2d5362;
  --hp-orange: #f4a259;
  --hp-cream: #f7f4ec;
  --hp-ink: #1f2724;
  --hp-gold: #d9bd7a;
  --hp-radius: 18px;
  --hp-switcher-h: 64px;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--hp-ink);
  line-height: 1.6;
}

.hp a { text-decoration: none; }
.hp img { display: block; max-width: 100%; }
.hp h1, .hp h2, .hp h3 { margin: 0; line-height: 1.08; }
.hp p { margin: 0; }
.hp section { scroll-margin-top: calc(var(--hp-switcher-h) + 12px); }

/* ----- Prototype ribbon -------------------------------------------------- */
.hp-ribbon {
  display: flex; gap: .6rem; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #2d5362, #5c8d89);
  color: #fff; font-size: .82rem; padding: .5rem 1rem; text-align: center;
}
.hp-ribbon .fa-flask { color: var(--hp-gold); }

/* ----- Sticky concept switcher ------------------------------------------ */
.hp-switcher {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 19, 17, .82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
.hp-switcher__inner {
  min-height: var(--hp-switcher-h);
  display: flex; align-items: center; gap: 1rem;
  max-width: 1240px; margin: 0 auto; padding: .55rem 1.1rem;
}
.hp-switcher__brand {
  display: flex; align-items: baseline; gap: .4rem; font-weight: 700;
  font-family: 'Montserrat', sans-serif; letter-spacing: -.3px; white-space: nowrap;
}
.hp-switcher__brand i { color: var(--hp-orange); }
.hp-switcher__brand em { font-style: normal; font-weight: 400; opacity: .55; font-size: .85rem; }

.hp-switcher__tabs {
  display: flex; gap: .4rem; margin: 0 auto; flex: 1 1 auto;
  justify-content: center; overflow-x: auto; scrollbar-width: none;
}
.hp-switcher__tabs::-webkit-scrollbar { display: none; }

.hp-tab {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1px; padding: .4rem .9rem; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; background: transparent; color: #fff; cursor: pointer;
  white-space: nowrap; transition: background .25s, border-color .25s, transform .25s;
}
.hp-tab:hover { background: rgba(255, 255, 255, .08); }
.hp-tab__name { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: .92rem; }
.hp-tab__kind { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; opacity: .6; }
.hp-tab.is-active {
  background: linear-gradient(120deg, var(--hp-orange), #e8895f);
  border-color: transparent; color: #20140b;
}
.hp-tab.is-active .hp-tab__kind { opacity: .8; }

.hp-switcher__notes-toggle {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: .45rem .8rem; cursor: pointer; font-size: .82rem;
  transition: background .25s;
}
.hp-switcher__notes-toggle:hover { background: rgba(255, 255, 255, .08); }
.hp-switcher__notes-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }
.hp-switcher__notes-toggle i { color: var(--hp-gold); }

.hp-notes {
  max-width: 1240px; margin: 0 auto; padding: 0 1.1rem 1rem;
  color: rgba(255, 255, 255, .82);
}
.hp-notes__tagline { font-weight: 600; color: #fff; margin-bottom: .25rem; }
.hp-notes__rationale { font-size: .9rem; line-height: 1.55; }

/* ----- Concept stage ----------------------------------------------------- */
.hp-stage { background: var(--hp-cream); }
.hp-concept[hidden] { display: none; }

/* ----- Motion primitives (shared) --------------------------------------- */
.hp-reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--hp-delay, 0s);
  will-change: opacity, transform;
}
.hp-reveal.is-revealed { opacity: 1; transform: none; }

/* Elements that are also parallax targets own `transform` via inline style on
   every scroll frame, so they must NOT transition transform (that would make
   parallax lag by .7s). They reveal with opacity only. */
.hp-reveal[data-hp-parallax] { transform: none; transition: opacity .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--hp-delay, 0s); }
.hp-reveal[data-hp-parallax].is-revealed { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hp [data-hp-parallax] { transform: none !important; }
  .dg-marquee__track { animation: none !important; }
  .hp * { scroll-behavior: auto !important; }
}

/* shared section width helper */
.rc-features, .rc-showcase, .rc-stats, .rc-cta,
.cs-trust, .cs-story, .cs-steps, .cs-stats, .cs-app, .cs-loved,
.dg-gallery, .dg-craft, .dg-features, .dg-final {
  padding-left: clamp(1.1rem, 5vw, 5rem);
  padding-right: clamp(1.1rem, 5vw, 5rem);
}

/* =========================================================================
   CONCEPT A — Refined Classic
   ========================================================================= */
.rc { background: var(--hp-cream); color: var(--hp-ink); }
.rc-h1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -.02em; color: #233a36; }
.rc-h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: #233a36; }
.rc-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--hp-sage); margin-bottom: .8rem; }
.rc-lead { font-size: clamp(1rem, 1.5vw, 1.18rem); color: #4a5751; max-width: 42ch; }

.rc-nav {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem clamp(1.1rem, 5vw, 5rem);
  max-width: 1240px; margin: 0 auto;
}
.rc-nav__brand { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.3rem; color: #233a36; }
.rc-nav__brand i { color: var(--hp-orange); }
.rc-nav__links { display: flex; gap: 1.4rem; margin-left: auto; }
.rc-nav__links a { color: #51605a; font-weight: 500; }
.rc-nav__links a:hover { color: var(--hp-sage); }
.rc-nav__actions { display: flex; align-items: center; gap: .9rem; }
.rc-link { color: #233a36; font-weight: 600; }

.rc-btn {
  display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px;
  padding: .6rem 1.2rem; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s; cursor: pointer; border: 1.5px solid transparent;
}
.rc-btn--lg { padding: .85rem 1.6rem; font-size: 1.02rem; }
.rc-btn--solid { background: var(--hp-sage); color: #fff; box-shadow: 0 10px 24px -12px rgba(45, 83, 98, .8); }
.rc-btn--solid:hover { background: #4e7b77; transform: translateY(-2px); }
.rc-btn--ghost { background: transparent; color: #233a36; border-color: rgba(45, 83, 98, .35); }
.rc-btn--ghost:hover { border-color: var(--hp-sage); transform: translateY(-2px); }

.rc-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; max-width: 1240px; margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem);
}
.rc-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0; }
.rc-hero__cta--center { justify-content: center; }
.rc-definition { font-size: .92rem; color: #6a766f; border-left: 3px solid var(--hp-orange); padding-left: .8rem; }
.rc-hero__art { position: relative; }
.rc-hero__img { width: 100%; border-radius: var(--hp-radius); box-shadow: 0 40px 80px -40px rgba(31, 39, 36, .7); }
.rc-hero__badge {
  position: absolute; bottom: 1rem; left: 1rem; background: #fff; color: #233a36;
  border-radius: 999px; padding: .5rem .9rem; font-weight: 600; font-size: .85rem;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5);
}
.rc-hero__badge i { color: var(--hp-orange); }

.rc-features { max-width: 1240px; margin: 0 auto; padding-top: clamp(2rem, 5vw, 4rem); text-align: center; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.2rem; text-align: left; }
.rc-card { background: #fff; border-radius: var(--hp-radius); padding: 1.8rem; border: 1px solid #ece7dc; transition: transform .3s, box-shadow .3s; }
.rc-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(45, 83, 98, .45); }
.rc-card__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(92, 141, 137, .12); color: var(--hp-sage); font-size: 1.3rem; margin-bottom: 1rem; }
.rc-card h3 { font-family: 'Montserrat', sans-serif; font-size: 1.2rem; margin-bottom: .5rem; color: #233a36; }
.rc-card p { color: #5a665f; }

.rc-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); }
.rc-showcase__img { width: 100%; border-radius: var(--hp-radius); box-shadow: 0 40px 80px -45px rgba(31, 39, 36, .7); }
.rc-checks { list-style: none; padding: 0; margin: 1.3rem 0 0; display: grid; gap: .6rem; }
.rc-checks li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: #3c4742; }
.rc-checks i { color: var(--hp-sage); }

.rc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 8vw, 5rem); max-width: 1240px; margin: clamp(3rem, 6vw, 5rem) auto 0; text-align: center; }
.rc-stats strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 2.4rem; color: var(--hp-sage); }
.rc-stats span { color: #6a766f; font-size: .9rem; }

.rc-cta { margin-top: clamp(3rem, 6vw, 5rem); }
.rc-cta__inner {
  max-width: 1240px; margin: 0 auto; text-align: center;
  background: linear-gradient(120deg, #5c8d89, #2d5362); color: #fff;
  border-radius: 28px; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem;
}
.rc-cta__inner .rc-h2, .rc-cta__inner .rc-lead { color: #fff; }
.rc-cta__inner .rc-lead { margin: .8rem auto 0; }
.rc-cta__inner .rc-btn--solid { background: #fff; color: #233a36; }
.rc-cta__inner .rc-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }

.rc-footer { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 2.5rem clamp(1.1rem, 5vw, 5rem); color: #6a766f; font-size: .9rem; }
.rc-footer i { color: var(--hp-orange); }

/* =========================================================================
   CONCEPT B — Culinary Studio (flagship)
   ========================================================================= */
.cs { background: #fbfaf6; color: #1f2724; }
.cs-h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(2.6rem, 7vw, 5.4rem); letter-spacing: -.02em; }
.cs-h1 span { color: var(--hp-orange); font-style: italic; }
.cs-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.01em; color: #20302b; }
.cs-h2--center { text-align: center; max-width: 18ch; margin: 0 auto; }
.cs-eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; font-weight: 600; color: var(--hp-gold); }
.cs-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 700; color: var(--hp-sage); margin-bottom: .7rem; }
.cs-lead { font-size: clamp(1.05rem, 1.6vw, 1.32rem); color: #4a5751; max-width: 52ch; }
.cs-body { font-size: 1.06rem; color: #4a5751; margin-top: .8rem; max-width: 46ch; }

.cs-nav {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem clamp(1.1rem, 5vw, 5rem); color: #fff;
}
.cs-nav__brand { display: inline-flex; align-items: center; gap: .55rem; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; color: #fff; }
.cs-nav__mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hp-orange); color: #20140b; font-size: .9rem; }
.cs-nav__links { display: flex; gap: 1.5rem; margin-left: auto; }
.cs-nav__links a { color: rgba(255, 255, 255, .85); font-weight: 500; }
.cs-nav__links a:hover { color: #fff; }
.cs-nav__actions { display: flex; align-items: center; gap: 1rem; }
.cs-link { color: #fff; font-weight: 600; }

.cs-btn { display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; padding: .65rem 1.3rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; }
.cs-btn--lg { padding: .95rem 1.8rem; font-size: 1.05rem; }
.cs-btn--solid { background: var(--hp-orange); color: #20140b; box-shadow: 0 16px 34px -16px rgba(244, 162, 89, .9); }
.cs-btn--solid:hover { transform: translateY(-2px); background: #f7b06f; }
.cs-btn--glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .4); backdrop-filter: blur(6px); }
.cs-btn--glass:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.cs-btn--light { background: #fff; color: #20302b; }
.cs-btn--light:hover { transform: translateY(-2px); }

.cs-hero { position: relative; min-height: min(92vh, 820px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; color: #fff; }
.cs-hero__bg { position: absolute; inset: -12% 0; z-index: 0; }
.cs-hero__img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14, 19, 17, .55) 0%, rgba(14, 19, 17, .35) 40%, rgba(14, 19, 17, .82) 100%); }
.cs-hero__inner { position: relative; z-index: 2; max-width: 1240px; width: 100%; margin: 0 auto; padding: 6rem clamp(1.1rem, 5vw, 5rem) 4rem; }
.cs-hero__inner .cs-lead { color: rgba(255, 255, 255, .9); margin-top: 1.2rem; }
.cs-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.cs-hero__cta--center { justify-content: center; }
.cs-hero__cue { position: absolute; z-index: 2; bottom: 1.6rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.cs-hero__cue span { width: 1px; height: 34px; background: rgba(255, 255, 255, .6); animation: cs-cue 1.8s ease-in-out infinite; }
@keyframes cs-cue { 0%, 100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

.cs-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(1.5rem, 5vw, 3.5rem); padding-top: 2.2rem; padding-bottom: 2.2rem; color: #51605a; font-weight: 600; border-bottom: 1px solid #eee6d8; }
.cs-trust .fa-star { color: var(--hp-gold); font-size: .8rem; }
.cs-trust div { display: inline-flex; align-items: center; gap: .5rem; }
.cs-trust .fa-bolt, .cs-trust .fa-leaf, .cs-trust .fa-ad { color: var(--hp-sage); }

.cs-story { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 7vw, 6rem); padding-bottom: clamp(2rem, 5vw, 4rem); display: grid; gap: clamp(3rem, 7vw, 6rem); }
.cs-row { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.cs-row--reverse .cs-row__art { order: 2; }
.cs-row__img { width: 100%; border-radius: 22px; box-shadow: 0 50px 90px -50px rgba(31, 39, 36, .75); }
.cs-textlink { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem; color: var(--hp-sage); font-weight: 700; }
.cs-textlink::after { content: "→"; transition: transform .2s; }
.cs-textlink:hover::after { transform: translateX(4px); }

.cs-steps { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-steps__grid { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.cs-steps__grid li { background: #fff; border: 1px solid #eee6d8; border-radius: 20px; padding: 2rem; }
.cs-steps__grid span { font-family: 'Fraunces', serif; font-size: 1rem; color: var(--hp-orange); font-weight: 700; }
.cs-steps__grid h3 { font-family: 'Fraunces', serif; font-size: 1.5rem; margin: .4rem 0 .5rem; }
.cs-steps__grid p { color: #5a665f; }

.cs-stats { background: linear-gradient(120deg, #233a36, #2d5362); color: #fff; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 8vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.cs-stats strong { display: block; font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--hp-orange); }
.cs-stats span { opacity: .85; font-size: .92rem; }

.cs-app { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cs-app__list { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: .7rem; }
.cs-app__list li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: #3c4742; }
.cs-app__list i { color: var(--hp-sage); }
.cs-app__device { display: flex; justify-content: center; }
.cs-phone { width: min(330px, 78vw); aspect-ratio: 9 / 17; border-radius: 38px; padding: 12px; background: #1f2724; box-shadow: 0 50px 90px -40px rgba(31, 39, 36, .8); }
.cs-phone__img { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; }

.cs-loved { max-width: 1240px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.cs-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
.cs-quotes figure { margin: 0; background: #fff; border: 1px solid #eee6d8; border-radius: 20px; padding: 1.8rem; }
.cs-quotes blockquote { margin: 0 0 1rem; font-family: 'Fraunces', serif; font-size: 1.2rem; line-height: 1.4; color: #20302b; }
.cs-quotes figcaption { color: var(--hp-sage); font-weight: 600; font-size: .9rem; }

.cs-final { background: linear-gradient(120deg, var(--hp-orange), #e8895f); color: #20140b; padding: clamp(3.5rem, 8vw, 6rem) 1.5rem; text-align: center; }
.cs-final__inner { max-width: 760px; margin: 0 auto; }
.cs-final__h { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.02em; }
.cs-final .cs-lead { color: #3a2614; margin: 1rem auto 0; }

.cs-footer { background: #1f2724; color: rgba(255, 255, 255, .75); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; padding: 2.4rem clamp(1.1rem, 5vw, 5rem); font-size: .9rem; }
.cs-footer .cs-nav__brand { color: #fff; }

/* =========================================================================
   CONCEPT C — Dark Gourmet (divergent)
   ========================================================================= */
.dg { background: #0e1311; color: #ece7da; }
.dg-h1 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(2.6rem, 6.5vw, 5rem); letter-spacing: -.01em; color: #fbf4e6; }
.dg-h1 em { color: var(--hp-gold); font-style: italic; }
.dg-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(1.8rem, 4vw, 3rem); color: #fbf4e6; }
.dg-eyebrow { display: inline-flex; align-items: center; gap: .7rem; text-transform: uppercase; letter-spacing: .22em; font-size: .76rem; font-weight: 600; color: var(--hp-gold); }
.dg-eyebrow--center { justify-content: center; }
.dg-rule { width: 34px; height: 1px; background: var(--hp-gold); opacity: .6; }
.dg-lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: #b9b3a4; max-width: 50ch; }
.dg-muted { color: #908a7c; }

.dg-nav { display: flex; align-items: center; gap: 1rem; padding: 1.4rem clamp(1.1rem, 5vw, 5rem); max-width: 1320px; margin: 0 auto; }
.dg-nav__brand { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.35rem; color: #fbf4e6; }
.dg-nav__brand i { color: var(--hp-gold); }
.dg-nav__links { display: flex; gap: 1.5rem; margin-left: auto; margin-right: 1.2rem; }
.dg-nav__links a { color: #b9b3a4; font-weight: 500; }
.dg-nav__links a:hover { color: var(--hp-gold); }

.dg-btn { display: inline-flex; align-items: center; gap: .55rem; border-radius: 999px; padding: .65rem 1.3rem; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; transition: transform .2s, background .2s, box-shadow .2s; }
.dg-btn--lg { padding: .95rem 1.8rem; font-size: 1.04rem; }
.dg-btn--gold { background: linear-gradient(120deg, #e7cf93, #cbaa63); color: #221b09; box-shadow: 0 16px 36px -16px rgba(217, 189, 122, .7); }
.dg-btn--gold:hover { transform: translateY(-2px); }
.dg-btn--outline { background: transparent; color: #ece7da; border-color: rgba(236, 231, 218, .3); }
.dg-btn--outline:hover { border-color: var(--hp-gold); color: var(--hp-gold); transform: translateY(-2px); }

.dg-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; max-width: 1320px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem); }
.dg-hero__art { overflow: hidden; border-radius: 24px; }
.dg-hero__img { width: 100%; border-radius: 24px; box-shadow: 0 60px 110px -50px rgba(0, 0, 0, .9); }
.dg-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.dg-hero__copy .dg-lead { margin-top: 1.2rem; }
.dg-hero__copy .dg-eyebrow { margin-bottom: 1rem; }

.dg-marquee { overflow: hidden; border-top: 1px solid rgba(217, 189, 122, .18); border-bottom: 1px solid rgba(217, 189, 122, .18); padding: .9rem 0; }
.dg-marquee__track { display: inline-flex; gap: 1.6rem; white-space: nowrap; font-family: 'Fraunces', serif; font-size: 1.5rem; color: #6f6957; animation: dg-marquee 22s linear infinite; }
.dg-marquee__track span { letter-spacing: .04em; }
.dg-dot { color: var(--hp-gold); }
@keyframes dg-marquee { to { transform: translateX(-50%); } }

.dg-gallery { max-width: 1320px; margin: 0 auto; padding-top: clamp(3rem, 6vw, 5rem); }
.dg-gallery__head { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.8rem; }
.dg-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 78vw); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; scrollbar-width: thin; }
.dg-rail__item { scroll-snap-align: start; margin: 0; }
.dg-rail__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; box-shadow: 0 40px 80px -45px rgba(0, 0, 0, .9); }
.dg-rail__item figcaption { margin-top: .8rem; color: #b9b3a4; font-family: 'Fraunces', serif; font-style: italic; }

.dg-craft { max-width: 1100px; margin: 0 auto; padding-top: clamp(4rem, 9vw, 7rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.dg-statement { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1.3; color: #d9d3c4; }
.dg-statement em { color: var(--hp-gold); font-style: italic; }
.dg-statement span { color: #fbf4e6; }

.dg-features { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.dg-glass { background: rgba(255, 255, 255, .04); border: 1px solid rgba(217, 189, 122, .2); border-radius: 20px; padding: 2rem; backdrop-filter: blur(6px); }
.dg-glass i { font-size: 1.5rem; color: var(--hp-gold); }
.dg-glass h3 { font-family: 'Fraunces', serif; font-size: 1.5rem; margin: 1rem 0 .5rem; color: #fbf4e6; }
.dg-glass p { color: #b9b3a4; }

.dg-feature-image { position: relative; overflow: hidden; }
.dg-feature-image__img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.dg-feature-image__overlay { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: linear-gradient(180deg, rgba(14, 19, 17, .35), rgba(14, 19, 17, .72)); padding: 1.5rem; }
.dg-feature-image__overlay p { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.4rem, 3.5vw, 2.6rem); color: #fbf4e6; max-width: 22ch; }

.dg-final { text-align: center; padding-top: clamp(4rem, 8vw, 6.5rem); padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.dg-final__h { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(2.2rem, 5.5vw, 4rem); color: #fbf4e6; margin: 1.2rem 0 2rem; }

.dg-footer { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; max-width: 1320px; margin: 0 auto; padding: 2.4rem clamp(1.1rem, 5vw, 5rem); color: #908a7c; font-size: .9rem; border-top: 1px solid rgba(217, 189, 122, .15); }
.dg-footer .dg-nav__brand { font-size: 1.1rem; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
  .hp-switcher__inner { flex-wrap: wrap; gap: .6rem; }
  .hp-switcher__brand { width: 100%; justify-content: center; }
  .hp-switcher__tabs { order: 3; width: 100%; justify-content: flex-start; }
  .hp-tab__kind { display: none; }
  .hp-switcher__notes-toggle { margin-left: auto; }

  .rc-nav__links, .cs-nav__links, .dg-nav__links { display: none; }

  .rc-hero, .rc-showcase, .cs-row, .cs-row--reverse, .cs-app, .dg-hero {
    grid-template-columns: 1fr;
  }
  .rc-showcase .rc-showcase__art { order: 2; }
  .cs-row--reverse .cs-row__art { order: 0; }
  .dg-hero { direction: ltr; }
  .dg-hero__art { order: 2; }

  .rc-grid, .cs-steps__grid, .cs-quotes, .dg-features { grid-template-columns: 1fr; }
  .cs-hero { min-height: 78vh; }
  .cs-hero__inner { padding-top: 7rem; }
}

@media (max-width: 520px) {
  .rc-hero__cta .rc-btn, .cs-hero__cta .cs-btn, .dg-hero__cta .dg-btn { width: 100%; justify-content: center; }
  .rc-stats { gap: 1.5rem 2.5rem; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Sticky footer styles */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
  background-color: #fcfcfc;
}

footer a.text-muted {
  color: #9aa0a6 !important;
  font-weight: 300;
  transition: color 0.2s ease;
}

footer a.text-muted:hover {
  color: #747a80 !important;
  text-decoration: none;
}

footer .text-muted {
  color: #9aa0a6 !important;
}

.footer-links {
  line-height: 1.8;
}

/* Authentication pages styling */
.auth-links {
  margin-top: 1rem;
}

.auth-links a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s;
}

.auth-links a:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/* "or" divider between the password form and social sign-in buttons */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9aa0a6;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ece7dc;
}

.auth-divider span {
  padding: 0 1rem;
}

/* Google/Apple sign-in buttons */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 600;
}

.btn-social--google {
  background-color: #fff;
  color: #343a40;
}

.btn-social--google:hover,
.btn-social--google:focus {
  background-color: #f7f4ec;
  color: #343a40;
}

.btn-social .fa-google {
  color: #ea4335;
}

:root {
  --primary: #5c8d89;       /* Sage green */
  --secondary: #f4a259;     /* Warm orange */
  --success: #68b684;       /* Fresh green */
  --info: #2d5362;          /* Deep teal */
  --warning: #f4e285;       /* Soft yellow */
  --danger: #e45641;        /* Rustic red */
  --light: #f8f9fa;         /* Off white */
  --dark: #343a40;          /* Deep charcoal */
  --bg-light: #f7f4ec;      /* Refined Classic cream background */
  --accent: #bc4749;        /* Accent red */

  /* Refined Classic design tokens (selected live design). Promoted to :root
     so the shared .rc-* components also render on the live homepage. */
  --hp-sage: #5c8d89;
  --hp-sage-deep: #2d5362;
  --hp-orange: #f4a259;
  --hp-cream: #f7f4ec;
  --hp-ink: #1f2724;
  --hp-gold: #d9bd7a;
  --hp-radius: 18px;
  --rc-heading: #233a36;    /* Deep green headings */
}

/* Typography */
body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #343a40;
  margin: 0;
  padding: 0;
  background-color: var(--bg-light);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--rc-heading);
}

.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Multi-word nav labels ("Shopping List", "New Recipe") must never wrap
   onto a second line; the navbar collapses to the toggler instead. */
.navbar .nav-link {
  white-space: nowrap;
}

/* The user-name button is the one flexible item in the nowrap bar: when the
   full item set is wider than the container, it shrinks (truncating the name)
   instead of the bar overflowing. min-width: 0 must hold on every flex level
   between the bar and the button, or none of them may shrink below content. */
.navbar .navbar-collapse,
.navbar .nav-cluster,
.navbar .user-menu {
  min-width: 0;
}

.navbar .user-menu .dropdown-toggle {
  max-width: 100%;
}

.navbar .user-menu-label {
  max-width: 12rem;
}

.card-title {
  font-weight: 600;
}

/* Profile avatars (SOUS-133): one square derivative, rendered at any size. */
.avatar {
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ecef;
  color: #495057;
  font-weight: 600;
  line-height: 1;
}

.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

.text-info {
  color: var(--info) !important;
}

.fw-medium {
  font-weight: 500;
}

/* Better link styling */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: darken(var(--primary), 10%);
}

.welcome-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.header {
  margin-bottom: 2rem;
}

.title-with-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  gap: 0;
  padding: 0;
}

.logo-img {
  width: 70px;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.05));
  mix-blend-mode: multiply;
}

.logo-img-mobile {
  width: 60px;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.05));
  mix-blend-mode: multiply;
  margin: 0;
  padding: 0;
}

.mobile-title {
  margin: 0 0 0.5rem 0;
  padding: 0;
  width: 100%;
  white-space: nowrap;
}

.mobile-title h1 {
  font-size: 2rem !important;
}

.welcome-container h1 {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.welcome-container p {
  font-size: 1.2rem;
  color: var(--dark);
  margin-bottom: 2rem;
}

.definition {
  font-size: 1rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.0128em; /* reduced by another 20% from 0.016em */
  font-style: normal;
  line-height: 1.4;
}

.break-opportunity {
  display: inline;
}

@media (max-width: 576px) {
  .break-opportunity {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

.extra-bold {
  font-weight: 900;
  letter-spacing: 0.01em;
}

.hero-banner {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--secondary), var(--accent));
  color: white;
  padding: 3rem 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.banner-content h2 {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  font-weight: 700;
}

.banner-content p {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 600px;
  margin: 0 auto;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.feature {
  flex: 1;
  min-width: 250px;
  background-color: #fff;
  border-radius: 12px;
  padding: 1.8rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  border-top: 4px solid var(--secondary);
}

.feature:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.feature h3 {
  color: var(--primary);
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
}

.feature p {
  font-size: 1rem;
  color: var(--dark);
  opacity: 0.8;
}

/* Bootstrap overrides */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #4b7a76;
  border-color: #4b7a76;
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-dark {
  background-color: var(--info) !important;
}

.card {
  border-radius: var(--hp-radius);
  border: 1px solid #ece7dc;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.2s ease-in-out;
}

.card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.card-header {
  border-bottom: none;
  padding: 1rem 1.25rem;
}

/* Recipe Cards */
.recipe-card {
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
}

.recipe-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

.card-img-container {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.card-img-top {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.recipe-card:hover .card-img-top {
  transform: scale(1.05);
}

/* Fills the image area so the whole picture is a click target (SOUS-61) */
.recipe-card-image-link {
  display: block;
  height: 100%;
}

.recipe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Sits above the image link even while invisible — let clicks fall
     through to the link, except on the View Recipe button itself */
  pointer-events: none;
}

.recipe-overlay .btn {
  pointer-events: auto;
}

.recipe-card:hover .recipe-overlay {
  opacity: 1;
}

.recipe-time-badge {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-radius: 20px;
  background-color: var(--bg-light);
  color: var(--info);
  font-weight: 500;
}

.recipe-description {
  font-size: 0.9rem;
  color: var(--dark);
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.8rem;
}

/* Clamp card titles to two lines so cards in a row stay aligned */
.recipe-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6rem;
}

.recipe-card-title a:hover {
  text-decoration: underline;
}

/* Recipe Placeholder */
.recipe-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  background: linear-gradient(135deg, #e8f1f0, #dae5e3);
  color: var(--primary);
  overflow: hidden;
  position: relative;
}

.recipe-placeholder::before {
  content: "🍳";
  font-size: 3.5rem;
  margin-bottom: 10px;
  opacity: 0.8;
}

.recipe-placeholder span {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.7;
}

/* Related recipes ("More Recipes" sidebar on the recipe show page) */
.related-recipe {
  color: var(--dark);
}

.related-recipe-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex-shrink: 0;
}

.related-recipe-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f1f0, #dae5e3);
}

.related-recipe-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
}

/* Tag styling */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
  border-radius: 4px;
  font-size: 0.75em;
  text-transform: capitalize;
}

.badge-tag {
  background-color: var(--light);
  color: var(--primary);
  border: 1px solid rgba(92, 141, 137, 0.2);
  transition: all 0.2s ease;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  display: inline-block;
}

.badge-tag:hover {
  background-color: var(--primary);
  color: white;
}

/* Retag action sitting alongside the tag chips on the recipe show page.
   Deliberately quiet -- the chips are the content, this is the tool. */
.recipe-tag-chips .badge-tag:last-child {
  margin-right: 0;
}

.recipe-retag-link {
  font-size: 0.8rem;
  border: 0;
  vertical-align: baseline;
}

.recipe-retag-link:hover {
  color: var(--primary) !important;
}

/* Active filter chips */
.filter-chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--bg-light);
  color: var(--info);
  border: 1px solid rgba(45, 83, 98, 0.15);
  border-radius: 20px;
  padding: 0.3em 0.75em;
  font-size: 0.85rem;
  font-weight: 500;
}

.filter-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.4rem;
  width: 1.1rem;
  height: 1.1rem;
  line-height: 1;
  border-radius: 50%;
  color: var(--info);
  text-decoration: none;
  font-weight: 700;
}

.filter-chip-remove:hover {
  background-color: var(--danger);
  color: white;
}

/* Tag selection in form */
.tag-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.tag-selection .form-check-inline {
  margin-right: 0;
  margin-bottom: 0.5rem;
}

.tag-selection .form-check-input {
  margin-right: 0.3rem;
}

.tag-selection .form-check-label.badge-tag {
  cursor: pointer;
  margin-right: 0;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  padding: 0.4em 0.8em;
  border-radius: 20px;
}

.tag-selection .form-check-input:checked + .badge-tag {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.tag-selection .badge-tag {
  padding: 0.4em 0.8em;
  transition: all 0.2s ease;
}

/* Copy URL button styling */
.copy-url-btn {
  transition: all 0.2s ease;
}

.copy-url-btn:hover {
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: white;
}

/* Category tags styling */
.list-group-item.border-primary {
  border-left: 3px solid var(--primary) !important;
  background-color: rgba(92, 141, 137, 0.08) !important;
}

/* Better table styling */
.table-responsive {
  border-radius: 12px;
  overflow: hidden;
}

.table th {
  font-weight: 600;
  background-color: rgba(92, 141, 137, 0.1);
}

.table-hover tbody tr:hover {
  background-color: rgba(92, 141, 137, 0.05);
}

/* Form placeholder styling */
::placeholder {
  color: rgba(128, 128, 128, 0.65) !important;
  opacity: 0.85 !important;
}

/* For older browsers */
::-webkit-input-placeholder {
  color: rgba(128, 128, 128, 0.65) !important;
  opacity: 0.85 !important;
}

::-moz-placeholder {
  color: rgba(128, 128, 128, 0.65) !important;
  opacity: 0.85 !important;
}

/* Barcode scanner - QuaggaJS video/canvas sizing */
#barcode-scanner-viewport {
  position: relative;
}

#barcode-scanner-viewport video,
#barcode-scanner-viewport canvas,
#barcode-scanner-viewport canvas.drawingBuffer {
  width: 100%;
  height: auto;
}

/* =========================================================================
   Refined Classic alignment — production-wide chrome
   Brings buttons and forms in line with the selected live design. Cards,
   background and headings are aligned via the tokens/rules above. The full
   set of homepage concepts remains reviewable at /homepage_options.
   ========================================================================= */

/* Pill buttons with a gentle lift, matching Refined Classic */
.btn {
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease;
}

.btn-lg {
  padding: 0.7rem 1.5rem;
}

.btn-primary {
  box-shadow: 0 10px 24px -12px rgba(45, 83, 98, 0.8);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover {
  transform: translateY(-2px);
}

/* Forms: sage focus ring */
.form-control:focus,
.form-select:focus {
  border-color: var(--hp-sage);
  box-shadow: 0 0 0 0.2rem rgba(92, 141, 137, 0.2);
}

/* Live homepage (home#welcome) reuses the shared .rc-* components but sits
   inside the layout's .container, so the concept's full-bleed horizontal
   padding is dropped in favour of the container gutters. */
.rc-live .rc-hero,
.rc-live .rc-features,
.rc-live .rc-showcase,
.rc-live .rc-cta {
  padding-left: 0;
  padding-right: 0;
}