:root {
  --ik-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ik-mobile-tab-height: 64px;
}

.ik-mobile-tabbar,
.ik-mobile-filter-button,
.ik-mobile-filter-dialog {
  display: none;
}

.ik-recipe-cook-button {
  background: #c4452b;
  border: 2px solid #9c321c;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  min-height: 46px;
  padding: 10px 16px;
}

.ik-recipe-cook-button:hover,
.ik-recipe-cook-button:focus-visible {
  background: #9c321c;
}

.ik-cook-mode {
  background: #f7f3e8;
  border: 0;
  color: #211b18;
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  width: 100vw;
}

.ik-cook-mode::backdrop { background: #f7f3e8; }
.ik-cook-mode-open { overflow: hidden; }
.ik-cook-mode-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto auto; min-height: 100dvh; }
.ik-cook-mode-header { align-items: center; background: #fff; border-bottom: 1px solid #d9cfc3; display: flex; gap: 16px; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px; }
.ik-cook-mode-header h2 { font: 400 clamp(24px, 7vw, 34px)/1 "Gochi Hand", "Segoe Print", cursive; margin: 0; }
.ik-cook-mode-kicker { color: #9c321c; font: 850 12px/1.2 "Open Sans", sans-serif; letter-spacing: .09em; margin: 0 0 4px; text-transform: uppercase; }
.ik-cook-mode-close { align-items: center; background: #2c1b14; border: 0; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 48px; font: 700 28px/1 sans-serif; height: 48px; justify-content: center; }
.ik-cook-mode-progress { background: #fff; display: grid; gap: 8px; padding: 0 16px 12px; }
.ik-cook-mode-progress span { font: 800 14px/1.2 "Open Sans", sans-serif; }
.ik-cook-mode-progress progress { accent-color: #c4452b; height: 8px; width: 100%; }
.ik-cook-mode-step { align-content: start; display: grid; overflow: auto; padding: clamp(20px, 6vw, 36px) 18px; }
.ik-cook-mode-step > ol { list-style: none; margin: 0; padding: 0; }
.ik-cook-mode-step > ol > li { background: #fff; border: 2px solid #2c1b14; display: grid; gap: 18px; grid-template-columns: 56px minmax(0, 1fr); list-style: none; padding: clamp(20px, 6vw, 32px); }
.ik-cook-mode-step .ik-recipe-step-number { align-items: center; background: #171712; border-radius: 50%; color: #fff; display: flex; font: 900 21px/1 "Open Sans", sans-serif; height: 52px; justify-content: center; width: 52px; }
.ik-cook-mode-step h3 { font-size: clamp(24px, 7vw, 34px); line-height: 1.08; margin: 0; }
.ik-cook-mode-step p { font-size: clamp(18px, 4.8vw, 22px); line-height: 1.55; }
.ik-cook-mode-step .ik-recipe-window { color: #9c321c; font-size: 14px; font-weight: 900; letter-spacing: .06em; margin: 0 0 7px; text-transform: uppercase; }
.ik-cook-mode-step .ik-recipe-cue { border-left: 4px solid #c4452b; padding-left: 12px; }
.ik-cook-step-ingredients { border-top: 1px solid #d9cfc3; margin-top: 20px; padding-top: 18px; }
.ik-cook-step-ingredients h4 { color: #9c321c; font: 900 15px/1.2 "Open Sans", sans-serif; letter-spacing: .07em; margin: 0 0 12px; text-transform: uppercase; }
.ik-cook-step-ingredient-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ik-cook-step-ingredient { align-items: center; background: #f7f3e8; border: 1px solid #d9cfc3; display: grid; gap: 12px; grid-template-columns: 52px minmax(0, 1fr); min-height: 82px; padding: 12px; }
.ik-cook-step-ingredient .ik-recipe-icon { height: 48px; width: 48px; }
.ik-cook-step-ingredient .ik-recipe-icon img { height: 100%; object-fit: contain; width: 100%; }
.ik-cook-step-ingredient > div { display: grid; gap: 3px; min-width: 0; }
.ik-cook-step-ingredient strong { font: 850 16px/1.25 "Open Sans", sans-serif; }
.ik-cook-step-ingredient span,
.ik-cook-step-ingredient small { font: 650 14px/1.35 "Open Sans", sans-serif; }
.ik-cook-step-ingredient small { color: #665850; }
.ik-cook-step-ingredients-empty { color: #665850; font-size: 16px !important; margin: 0; }
.ik-cook-mode-verify { align-items: center; background: #fff; border-top: 1px solid #d9cfc3; display: flex; font: 800 16px/1.3 "Open Sans", sans-serif; gap: 12px; min-height: 54px; padding: 10px 18px; }
.ik-cook-mode-verify input { accent-color: #c4452b; height: 22px; width: 22px; }
.ik-cook-mode-ingredients { background: #fff; border-block: 1px solid #d9cfc3; max-height: 44dvh; overflow: auto; }
.ik-cook-mode-ingredients summary { cursor: pointer; font: 850 17px/1.2 "Open Sans", sans-serif; min-height: 48px; padding: 14px 18px; }
.ik-cook-mode-ingredients > div { padding: 0 18px 18px; }
.ik-cook-mode-ingredients .ik-recipe-sidebar { display: grid; gap: 18px; position: static; }
.ik-cook-mode-ingredients .ik-recipe-section { margin: 0; }
.ik-cook-mode-ingredients .ik-recipe-section > h2 { font-size: 22px; }
.ik-cook-mode-options { background: #fff; display: flex; gap: 8px; padding: 10px 16px; }
.ik-cook-mode-options button { background: transparent; border: 1px solid #2c1b14; color: #211b18; flex: 1; font: 800 14px/1.2 "Open Sans", sans-serif; min-height: 44px; padding: 8px; }
.ik-cook-mode-controls { background: #2c1b14; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; padding: 12px 16px calc(12px + var(--ik-mobile-safe-bottom)); }
.ik-cook-mode-controls button { background: #fff; border: 2px solid #fff; color: #211b18; font: 900 17px/1.1 "Open Sans", sans-serif; min-height: 52px; padding: 10px; }
.ik-cook-mode-controls button:last-child { background: #c4452b; border-color: #c4452b; color: #fff; }
.ik-cook-mode-controls button:disabled { opacity: .45; }

@media (max-width: 760px) {
  body.ik-mobile-kitchen-page { padding-bottom: calc(var(--ik-mobile-tab-height) + var(--ik-mobile-safe-bottom)); }

  .ik-cook-mode-step { padding: 12px; }
  .ik-cook-mode-step > ol > li {
    gap: 14px;
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .ik-cook-step-ingredient-grid { grid-template-columns: 1fr; }

  .ik-mobile-tabbar {
    align-items: stretch;
    background: #fff;
    border-top: 1px solid #d9cfc3;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    left: 0;
    padding-bottom: var(--ik-mobile-safe-bottom);
    position: fixed;
    right: 0;
    z-index: 9998;
  }

  .ik-mobile-tab {
    align-items: center;
    color: #665850;
    display: flex;
    flex-direction: column;
    font: 750 11px/1.05 "Open Sans", Arial, sans-serif;
    gap: 4px;
    justify-content: center;
    min-height: var(--ik-mobile-tab-height);
    padding: 7px 2px 6px;
    text-decoration: none;
  }

  .ik-mobile-tab-icon { font-size: 21px; line-height: 1; }
  .ik-mobile-tab.is-active,
  .ik-mobile-tab[aria-current="page"] { color: #9c321c; }

  .ik-dashboard-sidebar { display: block; }
  .ik-dashboard-shell { display: block !important; }
  .ik-dashboard-header { background: rgba(255, 255, 255, .96); border-bottom: 1px solid #e6ddd2; min-height: 61px; padding: 8px 4px !important; position: sticky; top: 0; z-index: 40; }
  .ik-dashboard-header .ik-eyebrow { display: none; }
  .ik-dashboard-header h1 { font-size: clamp(23px, 6.5vw, 29px) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ik-dashboard-header > div { min-width: 0; }
  .ik-dashboard-header .ik-button { font-size: 14px; min-height: 44px; padding-inline: 11px; }
  #my-kitchen-library.ik-dashboard-panel { padding-inline: 0; }
  #my-kitchen-library > .ik-dashboard-panel-head { padding-inline: 4px; }
  #my-kitchen-library .ik-library { padding-inline: 0; }

  .ik-dashboard :is(button, .ik-button, input, select, summary),
  .ik-recipe :is(button, .ik-recipe-breadcrumb a) { min-height: 44px; }

  .ik-library-filter { position: relative; }
  .ik-library-search { background: #fff; display: block; margin-inline: 12px; padding-block: 10px; position: sticky; top: calc(81px + env(safe-area-inset-top, 0px)); width: calc(100% - 24px) !important; z-index: 30; }
  .ik-library-search input { font-size: 16px !important; min-height: 46px !important; padding: 10px 16px !important; }
  .ik-library-filter-list { gap: 7px !important; overflow-x: auto; padding: 0 12px 4px; scrollbar-width: none; }
  .ik-library-filter-list::-webkit-scrollbar { display: none; }
  .ik-library-filter-list button { flex: 0 0 auto; min-height: 44px; padding: 9px 14px !important; }
  .ik-library-tools { align-items: center !important; display: flex !important; flex-direction: row !important; justify-content: space-between; margin: 0 12px 14px !important; }
  .ik-library-tools-controls { display: grid !important; gap: 14px !important; grid-template-columns: 1fr !important; width: 100%; }
  .ik-library-select { align-items: center !important; display: grid !important; gap: 12px; grid-template-columns: minmax(72px, .7fr) minmax(0, 1.3fr); padding: 12px 2px; white-space: normal; }
  .ik-library-select + .ik-library-select { border-top: 1px solid #e6ddd2; }
  .ik-library-select select { font-size: 16px !important; justify-self: end; max-width: 220px; min-height: 44px !important; padding: 8px 36px 8px 12px !important; width: 100%; }
  .ik-mobile-filter-button { background: #fff; border: 2px solid #2c1b14; color: #211b18; display: inline-flex; font: 850 15px/1 "Open Sans", sans-serif; justify-content: center; min-height: 44px; padding: 12px 18px; }
  .ik-mobile-filter-dialog { background: transparent; border: 0; height: 100dvh; margin: 0; max-height: none; max-width: none; padding: 0; width: 100vw; }
  .ik-mobile-filter-dialog[open] { display: block; }
  .ik-mobile-filter-dialog::backdrop { background: rgba(33, 27, 24, .62); }
  .ik-mobile-filter-sheet { background: #fff; border-radius: 22px 22px 0 0; bottom: 0; display: grid; gap: 12px; left: 0; max-height: 84dvh; overflow: auto; padding: 22px 18px calc(18px + var(--ik-mobile-safe-bottom)); position: fixed; right: 0; }
  .ik-mobile-filter-sheet h2 { font-size: 25px; margin: 0; }
  .ik-mobile-filter-close { background: #c4452b; border: 2px solid #9c321c; border-radius: 999px; color: #fff; font: 850 16px/1 "Open Sans", sans-serif; min-height: 50px; padding: 12px 20px; }

  .ik-library-card { cursor: pointer; padding: 16px !important; }
  .ik-library-card > .ik-favourite-button { min-height: 44px; }
  .ik-library-card .ik-library-title-row { align-items: center; gap: 12px; grid-template-columns: minmax(0, 1fr) 82px !important; }
  .ik-library-card .ik-library-card-icon { width: 82px; }
  .ik-library-card .ik-library-card-footer { margin-top: 10px; }
  .ik-library-card .ik-actions { display: flex !important; margin-top: 10px; width: 100%; }
  .ik-library-card .ik-actions .ik-button { min-height: 44px; width: 100%; }
  .ik-library-card h3 a { color: inherit; text-decoration: none; }
  .ik-library-card :is(.ik-favourite-button, .ik-library-title-row > a) { position: relative; z-index: 2; }

  .ik-recipe-notes-table,
  .ik-recipe-notes-table tbody,
  .ik-recipe-notes-table tr,
  .ik-recipe-notes-table td { display: block; width: 100%; }
  .ik-recipe-notes-scroll { overflow: visible !important; }
  .ik-recipe-notes-table { min-width: 0 !important; }
  .ik-recipe-notes-table thead { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .ik-recipe-notes-table tbody[data-note-entry],
  .ik-recipe-notes-table:not(.ik-past-me-table) tbody > tr:not(.ik-recipe-note-edit-row) { background: #fff; border: 1px solid #d9cfc3; display: grid; gap: 8px; margin-bottom: 14px; padding: 14px; }
  .ik-recipe-notes-table td { border: 0 !important; padding: 0 !important; }
  .ik-recipe-notes-table td[data-label]::before { color: #8e321d; content: attr(data-label); display: block; font-size: 12px; font-weight: 900; letter-spacing: .06em; margin-bottom: 3px; text-transform: uppercase; }
  .ik-recipe-note-edit-row { background: #f7f3e8; margin: -14px 0 14px; padding: 14px; }

  .ik-platform.ik-recipe { font-size: 17px; }
  .ik-recipe-section > h2,
  .ik-recipe-callout h2,
  .ik-recipe-allergens h2 { font-size: clamp(25px, 7vw, 32px); }
  .ik-recipe-steps h3 { font-size: clamp(22px, 6vw, 28px); }
  .ik-recipe-breadcrumb a { align-items: center; display: inline-flex; }
  .ik-recipe-callout-toggle { align-items: center; display: inline-flex; font-size: 14px; }
  .ik-recipe-toolbar-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .ik-recipe-toolbar-actions > * { min-width: 0; width: 100% !important; }
  .ik-recipe-cook-button { grid-column: 1 / -1; }

  .ik-install-app-card { margin-top: 24px; padding: 24px !important; }
}

.ik-install-app-card { padding: clamp(24px, 4vw, 32px); }
.ik-install-app-card > :first-child { margin-top: 0; }
.ik-install-app-card > :last-child { margin-bottom: 0; }

@media (max-width: 420px) {
  .ik-recipe-toolbar-actions { grid-template-columns: 1fr; }
  .ik-recipe-cook-button { grid-column: auto; }
}

@media (display-mode: standalone) {
  .ik-dashboard-header { padding-top: env(safe-area-inset-top, 0px); }
}

@media print {
  .ik-mobile-tabbar,
  .ik-recipe-cook-button,
  .ik-cook-mode { display: none !important; }
}