@charset "utf-8";

/*
Theme Name: Savorly - Recipe & Food Blog HTML5 Template
Author: Metropolitanthemes
Version: 1.0.0

%%%%%%% Table of CSS %%%%%%%

1. General
   1.1 Typography
   1.2 Spacing & Grounds
   1.3 Section Titles
   1.4 Buttons & Links
   1.5 Forms
   1.6 Shared Pieces
   1.7 Doodle Icons
2. Preloader
3. Header
   3.1 Top Bar
   3.2 Brand Row
   3.3 Menu Row
   3.4 Main Menu
   3.5 Home Mega Menu
   3.6 Sticky Header
4. Offcanvas Menu
5. Custom Select
6. Language Picker
7. Components
   7.1 Recipe Cards
   7.2 Journal Cards
   7.3 Cook Cards
   7.4 Reader Notes
   7.5 Category Strip
   7.6 Press Wall
   7.7 Tabs, Pagination, Arrows
   7.8 Accordion
   7.9 Breadcrumb
8. Home One
   8.1 Hero
   8.2 Editor's Picks
   8.3 Tonight's Recipe
   8.4 Planner Invite
   8.5 Press & Partnership
9. Home Two
   9.1 Featured Post Slider
   9.2 Free Recipe Book
   9.3 Sidebar
   9.4 Kitchen Timer
   9.5 From My Shelf
   9.6 Cookbooks Band
   9.7 Next Recipe Countdown
10. Home Three
   10.1 Hero
   10.2 This Week's Plan
   10.3 Today On Your Plan
   10.4 Wednesday Films
   10.5 Popular This Week
11. Recipe Pages
   11.1 Recipe Index
   11.2 The Recipe
   11.3 Categories
   11.4 Saved Recipes
   11.5 Submit A Recipe
12. Kitchen Pages
   12.1 Meal Planner
   12.2 Kitchen Tools
   12.3 Timers
   12.4 Cooking Videos
13. Inner Pages
   13.1 Journal
   13.2 Accounts
   13.3 About & Cooks
   13.4 Work With Us
   13.5 Gallery, FAQ & Contact
   13.6 Coming Soon & 404
14. Shop
   14.1 Shared Shop Pieces
   14.2 Shop Grid
   14.3 Product Page
   14.4 Bag, Checkout & Wishlist
15. Subheader
16. Footer
   16.1 Photo Strip
   16.2 Invite & Whisk
   16.3 Widgets
   16.4 Copyright
*/

/*======================
1. General
========================*/
:root {
  /* brand: the food blog's butter accent on a white page with near-black type */
  --sv-butter: #FEE86D;
  --sv-butter-rgb: 254, 232, 109;
  --sv-butter-deep: #FBDD33;
  --sv-ink: #0E0D0B;
  --sv-ink-rgb: 14, 13, 11;
  --sv-ink-deep: #070706;
  --sv-paprika: #C4472B;
  --sv-turmeric: #E9A825;
  /* the ground baked into the shop photographs, the same in both themes */
  --sv-product: #FFFFFF;
  /* semantic (the dark theme swaps these) */
  --sv-bg: #FFFFFF;
  --sv-bg-rgb: 255, 255, 255;
  --sv-surface: #FFFFFF;
  --sv-surface-rgb: 255, 255, 255;
  --sv-mist: #F6F6F4;
  --sv-mist-rgb: 246, 246, 244;
  --sv-cream: #FAF5E4;
  --sv-cream-rgb: 250, 245, 228;
  --sv-heading: #0E0D0B;
  --sv-heading-rgb: 14, 13, 11;
  --sv-text: #6B6768;
  --sv-muted: #757071;
  --sv-line: #EBE8E5;
  --sv-line-2: #DDDBDB;
  --sv-tonal: rgba(14, 13, 11, 0.055);
  --sv-tonal-2: rgba(14, 13, 11, 0.1);
  --sv-primary: #FEE86D;
  --sv-on-primary: #0E0D0B;
  --sv-accent-text: #7A5C00;
  --sv-ok-text: #2F7D4E;
  --sv-night: #121110;
  --sv-night-rgb: 18, 17, 16;
  --sv-shadow: 0 16px 40px rgba(14, 13, 11, 0.08);
  --sv-shadow-lg: 0 28px 64px rgba(14, 13, 11, 0.16);
  --sv-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* type */
  --sv-ff-head: 'Merriweather', Georgia, serif;
  --sv-ff-body: 'Catamaran', 'Helvetica Neue', Arial, sans-serif;
  --sv-fs-h1: clamp(38px, 3.5vw, 56px);
  --sv-fs-h2: clamp(30px, 2.45vw, 40px);
  --sv-fs-h3: clamp(21px, 1.55vw, 24px);
  --sv-fs-h4: 20px;
  --sv-fs-h5: 18px;
  --sv-fs-h6: 16px;
  /* WebGL texture colours (per section below) */
  --gl-1: #FFFFFF;
  --gl-2: #C4472B;
  --gl-3: #E9A825;
  --gl-alpha: 0.8;
}
[data-theme="dark"] {
  --sv-bg: #121110;
  --sv-bg-rgb: 18, 17, 16;
  --sv-surface: #1B1916;
  --sv-surface-rgb: 27, 25, 22;
  --sv-mist: #181613;
  --sv-mist-rgb: 24, 22, 19;
  --sv-cream: #221F17;
  --sv-cream-rgb: 34, 31, 23;
  --sv-heading: #F4EFE6;
  --sv-heading-rgb: 244, 239, 230;
  --sv-text: #B9B3AA;
  --sv-muted: #9C968C;
  --sv-line: rgba(255, 255, 255, 0.09);
  --sv-line-2: rgba(255, 255, 255, 0.16);
  --sv-tonal: rgba(255, 255, 255, 0.07);
  --sv-tonal-2: rgba(255, 255, 255, 0.13);
  --sv-accent-text: #F5D66B;
  --sv-ok-text: #8FD9A8;
  --sv-night: #0A0908;
  --sv-night-rgb: 10, 9, 8;
  --sv-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  --sv-shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.5);
  --gl-1: #121110;
}
/* bands that stay dark in both themes */
.is-night {
  --sv-heading: #F4EFE6;
  --sv-heading-rgb: 244, 239, 230;
  --sv-text: rgba(244, 239, 230, 0.76);
  --sv-muted: rgba(244, 239, 230, 0.6);
  --sv-line: rgba(255, 255, 255, 0.13);
  --sv-line-2: rgba(255, 255, 255, 0.2);
  --sv-tonal: rgba(255, 255, 255, 0.08);
  --sv-tonal-2: rgba(255, 255, 255, 0.15);
  --sv-accent-text: #FEE86D;
  --sv-surface: #1F1D19;
  --sv-surface-rgb: 31, 29, 25;
  --sv-mist: #1A1815;
  background-color: var(--sv-night);
  color: var(--sv-text);
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--sv-bg);
  color: var(--sv-text);
  font-family: var(--sv-ff-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.4s ease;
}
body.oc-open {
  overflow: hidden;
}
/* a hidden element stays hidden, whatever display its component gives it */
[hidden] {
  display: none !important;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--sv-ease), background-color 0.3s var(--sv-ease);
}
a:hover {
  color: var(--sv-accent-text);
}
::selection {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
:focus-visible {
  outline: 3px solid var(--sv-butter-deep);
  outline-offset: 3px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sv-line-2) transparent;
}

/*----- 1.1 Typography -----*/
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-weight: 400;
}
h1 {
  font-size: var(--sv-fs-h1);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
h2 {
  font-size: var(--sv-fs-h2);
  line-height: 1.26;
}
h3 {
  font-size: var(--sv-fs-h3);
  line-height: 1.4;
}
h4 {
  font-size: var(--sv-fs-h4);
  line-height: 1.45;
}
h5 {
  font-size: var(--sv-fs-h5);
  line-height: 1.5;
}
h6 {
  font-size: var(--sv-fs-h6);
  line-height: 1.55;
}
/* a heading at its outline level that looks like another level */
.sv-h3 {
  font-size: var(--sv-fs-h3);
  line-height: 1.4;
}
.sv-h4 {
  font-size: var(--sv-fs-h4);
  line-height: 1.45;
}
.sv-h5 {
  font-size: var(--sv-fs-h5);
  line-height: 1.5;
}
.sv-h6 {
  font-size: var(--sv-fs-h6);
  line-height: 1.55;
}
h1 em,
h2 em,
h3 em {
  font-style: italic;
}
p {
  margin: 0 0 18px;
}
p:last-child {
  margin-bottom: 0;
}
.sv-lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--sv-text);
}
.sv-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* the blog's butter underline under one word of a title; the reveal draws it on */
.sv-hl {
  background-image: linear-gradient(var(--sv-butter), var(--sv-butter));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.16em;
  padding: 0 0.04em;
}
.is-night .sv-hl {
  background-image: linear-gradient(var(--sv-butter), var(--sv-butter));
}
/* small caps meta voice: times, levels, dates, labels */
.sv-caps {
  font-family: var(--sv-ff-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/*----- 1.2 Spacing & Grounds -----*/
.sec-pt-110 {
  padding-top: 110px;
}
.sec-pb-110 {
  padding-bottom: 110px;
}
.sec-pt-80 {
  padding-top: 80px;
}
.sec-pb-80 {
  padding-bottom: 80px;
}
.sv-bg-mist {
  background-color: var(--sv-mist);
}
.sv-bg-cream {
  background-color: var(--sv-cream);
}
.sv-bg-butter {
  background-color: var(--sv-butter);
  --sv-heading: #0E0D0B;
  --sv-text: #3F3A33;
  --sv-muted: #57503F;
  --sv-accent-text: #0E0D0B;
  --sv-line: rgba(14, 13, 11, 0.14);
  --sv-tonal: rgba(14, 13, 11, 0.08);
  color: var(--sv-text);
}
/* a photo texture under a section: the kitchen's own photograph, washed in the section's ground */
.sv-photo-ground {
  position: relative;
  isolation: isolate;
}
.sv-photo-ground > .pg-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35);
}
.sv-photo-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 100% 0%, rgba(var(--sv-butter-rgb), 0.26), transparent 70%), linear-gradient(rgba(var(--sv-bg-rgb), 0.93), rgba(var(--sv-bg-rgb), 0.93));
}
/* the one photo band style: a cover photo under an ink wash from the copy side, cream copy */
.sv-photo-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--sv-night);
  --sv-heading: #F4EFE6;
  --sv-text: rgba(244, 239, 230, 0.82);
  --sv-muted: rgba(244, 239, 230, 0.64);
  --sv-accent-text: #FEE86D;
  --sv-line: rgba(255, 255, 255, 0.16);
  --sv-tonal: rgba(255, 255, 255, 0.1);
  color: var(--sv-text);
}
.sv-photo-band > .band-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(14, 13, 11, 0.94) 0%, rgba(14, 13, 11, 0.8) 46%, rgba(14, 13, 11, 0.3) 100%);
}

/*----- 1.3 Section Titles -----*/
/* the section head: a small caps eyebrow with a butter dot, the serif title with one word underlined, a quiet lead */
.sv-title {
  margin-bottom: 54px;
}
.sv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sv-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sv-butter);
  box-shadow: 0 0 0 3px rgba(var(--sv-butter-rgb), 0.35);
}
.sv-title h2 {
  max-width: 760px;
}
.sv-title .sv-lead {
  max-width: 620px;
  margin: 20px 0 0;
}
.sv-title.text-center h2,
.sv-title.text-center .sv-lead {
  margin-left: auto;
  margin-right: auto;
}
.sv-title.is-split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.sv-title.is-split .sv-lead {
  max-width: 480px;
  margin: 0;
}
/* the blog's small title with a hairline running to the edge ("Featured ———") */
.sv-rule-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
  font-size: 19px;
  line-height: 1.3;
}
.sv-rule-title::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 3px double var(--sv-line-2);
}
.sv-rule-title a {
  flex-shrink: 0;
  order: 3;
  font-family: var(--sv-ff-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/*----- 1.4 Buttons & Links -----*/
.sv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 54px;
  padding: 0 34px;
  border: 0;
  border-radius: 0;
  background: var(--sv-primary);
  color: var(--sv-on-primary);
  font-family: var(--sv-ff-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.35s var(--sv-ease), color 0.35s var(--sv-ease), box-shadow 0.35s var(--sv-ease);
}
.sv-btn i {
  position: relative;
  font-size: 13px;
  transition: transform 0.4s var(--sv-ease), opacity 0.3s ease;
}
/* house physics: the arrow slides out and a twin slides in */
.sv-btn i.fa-arrow-right::after {
  content: "\f061";
  position: absolute;
  left: -22px;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sv-btn:hover {
  background: var(--sv-ink);
  color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(14, 13, 11, 0.2);
}
.sv-btn:hover i.fa-arrow-right {
  transform: translateX(22px);
}
.sv-btn:hover i.fa-arrow-right::after {
  opacity: 1;
}
.sv-btn:hover i.fa-arrow-right::before {
  opacity: 0;
}
.sv-btn.is-ink {
  background: var(--sv-ink);
  color: #FFFFFF;
}
.sv-btn.is-ink:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
[data-theme="dark"] .sv-btn.is-ink,
.is-night .sv-btn.is-ink {
  background: #F4EFE6;
  color: var(--sv-ink);
}
.sv-btn.is-tonal {
  background: var(--sv-tonal);
  color: var(--sv-heading);
}
.sv-btn.is-tonal i {
  color: var(--sv-accent-text);
}
.sv-btn.is-tonal:hover {
  background: var(--sv-ink);
  color: #FFFFFF;
}
.sv-btn.is-tonal:hover i {
  color: var(--sv-butter);
}
[data-theme="dark"] .sv-btn.is-tonal:hover,
.is-night .sv-btn.is-tonal:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
[data-theme="dark"] .sv-btn.is-tonal:hover i,
.is-night .sv-btn.is-tonal:hover i {
  color: var(--sv-ink);
}
.sv-btn.is-sm {
  height: 44px;
  padding: 0 22px;
  font-size: 12.5px;
}
.sv-btn.is-block {
  width: 100%;
}
.sv-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* the blog's "read more" with its arrow in a little butter box */
.sv-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--sv-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sv-link i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 16px;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 10px;
  transition: width 0.35s var(--sv-ease);
}
.sv-link:hover {
  color: var(--sv-heading);
}
.sv-link:hover i {
  width: 36px;
}
.sv-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 18px;
  border-radius: 40px;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sv-pill-link i {
  font-size: 11px;
  transition: transform 0.35s var(--sv-ease);
}
.sv-pill-link:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sv-pill-link:hover i {
  transform: translateX(4px);
}
.sv-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

/*----- 1.5 Forms -----*/
.sv-field {
  position: relative;
  margin-bottom: 20px;
}
.sv-field label,
.sv-label {
  display: block;
  margin-bottom: 8px;
  color: var(--sv-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.sv-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 50px 0 20px;
  border: 1px solid var(--sv-line-2);
  border-radius: 0;
  background: var(--sv-surface);
  color: var(--sv-heading);
  font-family: var(--sv-ff-body);
  font-size: 16.5px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
textarea.sv-input {
  height: 170px;
  padding-top: 16px;
  resize: vertical;
}
.sv-input::placeholder {
  color: var(--sv-muted);
}
.sv-input:focus {
  border-color: var(--sv-heading);
  box-shadow: 0 0 0 4px rgba(var(--sv-butter-rgb), 0.5);
  outline: 0;
}
.sv-input.is-invalid {
  border-color: #C8402E;
}
.sv-field > i {
  position: absolute;
  right: 20px;
  top: 50px;
  color: var(--sv-muted);
  font-size: 15px;
  pointer-events: none;
}
.sv-field.is-area > i {
  top: 54px;
}
.form-status {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--sv-muted);
}
.form-status.is-ok {
  color: var(--sv-ok-text);
}
.form-status.is-error {
  color: #B43A28;
}
[data-theme="dark"] .form-status.is-error,
.is-night .form-status.is-error {
  color: #F29A8A;
}
.sv-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15.5px;
  cursor: pointer;
}
.sv-check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--sv-ink);
}
[data-theme="dark"] .sv-check input {
  accent-color: var(--sv-butter);
}
input[type="range"] {
  width: 100%;
  accent-color: var(--sv-ink);
}
[data-theme="dark"] input[type="range"] {
  accent-color: var(--sv-butter);
}

/*----- 1.6 Shared Pieces -----*/
/* buttons start bare; each control draws its own face */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.sv-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--sv-ease);
}
.sv-social a:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
  transform: translateY(-3px);
}
/* a round portrait beside a name */
.sv-face {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
/* the card's round tonal tools: share and save */
.sv-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 13px;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--sv-ease);
}
.sv-round:hover {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
.sv-round.is-on,
.sv-round[aria-pressed="true"] {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
[data-theme="dark"] .sv-round:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sv-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 22px;
  box-shadow: 0 0 0 12px rgba(var(--sv-butter-rgb), 0.3);
  transition: transform 0.4s var(--sv-ease), box-shadow 0.4s var(--sv-ease);
}
.sv-play i {
  margin-left: 4px;
}
.sv-play:hover {
  color: var(--sv-ink);
  transform: scale(1.06);
  box-shadow: 0 0 0 20px rgba(var(--sv-butter-rgb), 0.22);
}
.sv-stars {
  display: inline-flex;
  gap: 3px;
  color: #E3B21C;
  font-size: 13px;
}
.sv-avatars {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
}
.sv-avatars .faces {
  display: flex;
}
.sv-avatars .faces img,
.sv-avatars .faces .more {
  width: 46px;
  height: 46px;
  margin-left: -12px;
  border: 3px solid var(--sv-bg);
  border-radius: 50%;
  object-fit: cover;
}
.sv-avatars .faces img:first-child {
  margin-left: 0;
}
.sv-avatars .faces .more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 12px;
  font-weight: 800;
}
.sv-avatars .txt {
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--sv-text);
}
.sv-avatars .txt b {
  display: block;
  color: var(--sv-heading);
  font-size: 16px;
  font-weight: 700;
}
.sv-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: var(--sv-ink);
  color: #FFFFFF;
  font-size: 15px;
  box-shadow: var(--sv-shadow-lg);
  transform: translate(-50%, 140%);
  transition: transform 0.5s var(--sv-ease);
}
.sv-toast i {
  color: var(--sv-butter);
}
.sv-toast.is-shown {
  transform: translate(-50%, 0);
}
.sv-back-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--sv-butter);
  color: var(--sv-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s var(--sv-ease), background-color 0.3s ease;
}
.sv-back-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sv-back-top:hover {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
/* WebGL texture layers sit under a section's content */
.sv-gl {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.sv-gl.is-on {
  opacity: 1;
}

/*----- 1.7 Doodle Icons -----*/
.sv-ico {
  display: inline-flex;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}
.sv-ico img {
  width: 100%;
  height: 100%;
}
.sv-ico .ico-night,
[data-theme="dark"] .sv-ico .ico-day,
.is-night .sv-ico .ico-day,
.sv-photo-band .sv-ico .ico-day {
  display: none;
}
[data-theme="dark"] .sv-ico .ico-night,
.is-night .sv-ico .ico-night,
.sv-photo-band .sv-ico .ico-night {
  display: block;
}
/* the butter band keeps the dark pen in both themes */
[data-theme="dark"] .sv-bg-butter .sv-ico .ico-day {
  display: block;
}
[data-theme="dark"] .sv-bg-butter .sv-ico .ico-night {
  display: none;
}

/*======================
2. Preloader
========================*/
/* Recipe Shuffle: three recipe cards rise as a stack, fan out from one corner, the front card turns over to
   show the logo, and the stack slides away with the panel. Once a visit. */
.sv-preloader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sv-mist);
}
.sv-intro-seen .sv-preloader,
.no-js .sv-preloader {
  display: none;
}
.pre-stack {
  position: relative;
  width: 210px;
  height: 270px;
  perspective: 1100px;
}
.pre-card {
  position: absolute;
  inset: 0;
  transform-origin: 50% 118%;
}
.pre-card,
.pc-face,
.pc-back {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 10px 16px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(14, 13, 11, 0.16), 0 0 0 1px rgba(14, 13, 11, 0.05);
}
.pre-card.is-top {
  padding: 0;
  background: none;
  box-shadow: none;
  transform-style: preserve-3d;
}
.pc-face,
.pc-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.pc-back {
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
}
.pc-back img {
  width: 170px;
  height: auto;
}
.pc-photo {
  display: block;
  height: 180px;
  overflow: hidden;
}
.pc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-line {
  display: block;
  height: 9px;
  margin: 2px 6px 0;
  background: #ECE9E4;
}
.pc-line.is-short {
  width: 52%;
  height: 7px;
  background: var(--sv-butter);
}

/*======================
3. Header
========================*/
/* The food blog's three-tier header: a thin ink bar, the brand row, and the menu row between two hairlines.
   Style one (Home 1 + inner pages): logo left, recipe search with its butter button, saved and bag.
   Style two (Home 2): the ink menu bar on top, the logo centred under it. Style three (Home 3): the logo centred,
   the menu row under it. Sticky: only the menu row stays, with a small logo. */
.sv-header {
  position: relative;
  z-index: 1000;
  background: var(--sv-bg);
  transition: background-color 0.4s ease;
}
.sv-logo {
  display: inline-flex;
  flex-shrink: 0;
}
.sv-logo img {
  height: 54px;
  width: auto;
}
.sv-logo .logo-light,
[data-theme="dark"] .sv-logo .logo-main {
  display: none;
}
[data-theme="dark"] .sv-logo .logo-light {
  display: block;
}
.nav-logo {
  display: none;
}
.nav-logo img {
  height: 40px;
}

/*----- 3.1 Top Bar -----*/
.header-top {
  height: 40px;
  background: var(--sv-ink);
  color: rgba(244, 239, 230, 0.82);
  font-size: 13.5px;
  font-weight: 500;
  transition: height 0.4s var(--sv-ease), opacity 0.3s ease;
}
[data-theme="dark"] .header-top {
  background: #050504;
}
.header-top .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: 100%;
}
.header-top .top-left,
.header-top .top-right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.header-top a:hover {
  color: var(--sv-butter);
}
.header-top i {
  margin-right: 5px;
  font-size: 12px;
}
.top-now {
  display: inline-flex;
  align-items: center;
}
.top-now b {
  margin-left: 5px;
  color: var(--sv-butter);
  font-weight: 700;
}
.top-now .dot {
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--sv-butter);
  box-shadow: 0 0 0 4px rgba(var(--sv-butter-rgb), 0.18);
}
.top-drop {
  opacity: 0.8;
}
.header-top .top-right > a {
  position: relative;
}
.header-top .top-right > a + a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 1px;
  height: 13px;
  background: currentColor;
  opacity: 0.3;
  transform: translateY(-50%);
}

/*----- 3.2 Brand Row -----*/
.header-brand .container {
  display: flex;
  align-items: center;
  gap: 34px;
  height: 104px;
}
.header-style-two .header-brand .container,
.header-style-three .header-brand .container {
  justify-content: center;
  height: 120px;
}
.header-style-two .header-brand .sv-logo img,
.header-style-three .header-brand .sv-logo img {
  height: 64px;
}
/* the recipe search: a plain field with the blog's square butter button */
.sv-search {
  display: flex;
  width: 100%;
}
.sv-search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--sv-line-2);
  border-right: 0;
  border-radius: 0;
  background: var(--sv-surface);
  color: var(--sv-heading);
  font-family: var(--sv-ff-body);
  font-size: 15px;
}
.sv-search input::placeholder {
  color: var(--sv-muted);
}
.sv-search input:focus {
  border-color: var(--sv-heading);
  outline: 0;
}
.sv-search button {
  flex-shrink: 0;
  width: 52px;
  height: 48px;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sv-search button:hover {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
.header-search {
  max-width: 470px;
  margin-left: auto;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.header-icon:hover {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
[data-theme="dark"] .header-icon:hover,
.is-night .header-icon:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.header-icon .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.header-icon .count:empty {
  display: none;
}
.sv-theme-toggle .ti-sun,
[data-theme="dark"] .sv-theme-toggle .ti-moon {
  display: none;
}
[data-theme="dark"] .sv-theme-toggle .ti-sun {
  display: inline-block;
}
.sv-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  background: var(--sv-butter);
  cursor: pointer;
}
.sv-menu-toggle span {
  display: block;
  height: 2px;
  background: var(--sv-ink);
  transition: width 0.3s var(--sv-ease);
}
.sv-menu-toggle span:nth-child(2) {
  width: 70%;
}
.sv-menu-toggle:hover span:nth-child(2) {
  width: 100%;
}

/*----- 3.3 Menu Row -----*/
.header-nav .container {
  display: flex;
  align-items: center;
  gap: 30px;
  border-top: 1px solid var(--sv-line);
  border-bottom: 1px solid var(--sv-line);
}
.header-style-two .header-nav {
  background: var(--sv-ink);
}
[data-theme="dark"] .header-style-two .header-nav {
  background: #050504;
}
.header-style-two .header-nav .container {
  border: 0;
}
.nav-social {
  gap: 4px;
}
.nav-social a {
  width: 30px;
  height: 30px;
  background: transparent;
  font-size: 12.5px;
}
.header-style-one .nav-social {
  margin-left: auto;
}
.header-style-two .sv-nav,
.header-style-three .sv-nav {
  margin: 0 auto;
}
.nav-right {
  display: flex;
  align-items: center;
}
.header-style-two .nav-right .header-icon {
  width: 40px;
  height: 40px;
}

/*----- 3.4 Main Menu -----*/
.sv-nav > ul {
  display: flex;
  align-items: center;
  gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-nav li {
  position: relative;
}
.sv-nav > ul > li > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 17px 0;
  color: var(--sv-heading);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sv-nav > ul > li > a i {
  font-size: 8px;
  opacity: 0.55;
  transition: transform 0.3s var(--sv-ease);
}
.nav-star {
  position: absolute;
  top: 12px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sv-butter-deep);
}
.sv-nav > ul > li:hover > a,
.sv-nav > ul > li.active > a {
  color: var(--sv-accent-text);
}
.is-night .sv-nav > ul > li:hover > a,
.is-night .sv-nav > ul > li.active > a {
  color: var(--sv-butter);
}
.sv-nav > ul > li:hover > a i {
  transform: rotate(180deg);
}
.sv-nav .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -24px;
  z-index: 50;
  min-width: 250px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  background: var(--sv-surface);
  border-top: 3px solid var(--sv-butter);
  box-shadow: var(--sv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--sv-ease), transform 0.35s var(--sv-ease), visibility 0.3s;
}
.is-night .sv-nav .sub-menu,
.is-night .sv-nav .mega-menu {
  --sv-heading: #0E0D0B;
  --sv-surface: #FFFFFF;
  --sv-line: #EBE8E5;
  --sv-accent-text: #7A5C00;
  --sv-text: #6B6768;
}
[data-theme="dark"] .is-night .sv-nav .sub-menu,
[data-theme="dark"] .is-night .sv-nav .mega-menu {
  --sv-heading: #F4EFE6;
  --sv-surface: #1B1916;
  --sv-line: rgba(255, 255, 255, 0.09);
  --sv-accent-text: #F5D66B;
  --sv-text: #B9B3AA;
}
/* a bridge over the gap, so the menu stays open while the pointer crosses it */
.sv-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.sv-nav li:hover > .sub-menu,
.sv-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sv-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 26px;
  color: var(--sv-heading);
  font-size: 16px;
  transition: color 0.3s var(--sv-ease), padding 0.35s var(--sv-ease);
}
.sv-nav .sub-menu a i {
  font-size: 9px;
  opacity: 0.5;
}
.sv-nav .sub-menu li:hover > a,
.sv-nav .sub-menu li.active > a {
  padding-left: 34px;
  color: var(--sv-accent-text);
}
.sv-nav .sub-menu .sub-menu {
  top: -17px;
  left: 100%;
}
.sv-nav .sub-menu .sub-menu::before {
  left: -12px;
  right: auto;
  top: 0;
  bottom: 0;
  width: 12px;
  height: auto;
}
/* the third level opens left where a right one would leave the window */
.sv-nav > ul > li:nth-last-child(-n+3) .sub-menu .sub-menu {
  left: auto;
  right: 100%;
}

/*----- 3.5 Home Mega Menu -----*/
.sv-nav .has-mega {
  position: static;
}
.sv-header .header-nav .container {
  position: relative;
}
.sv-nav .mega-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 50;
  width: min(920px, calc(100vw - 60px));
  padding: 28px;
  background: var(--sv-surface);
  border-top: 3px solid var(--sv-butter);
  box-shadow: var(--sv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s var(--sv-ease), transform 0.35s var(--sv-ease), visibility 0.3s;
}
.sv-nav .mega-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 20px;
}
.sv-nav .has-mega:hover > .mega-menu,
.sv-nav .has-mega:focus-within > .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mega-card {
  display: block;
  color: var(--sv-heading);
}
.mega-card .shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--sv-line);
}
.mega-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  transition: transform 0.6s var(--sv-ease);
}
.mega-card:hover img {
  transform: scale(1.04);
}
.mega-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}
.mega-meta small {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mega-meta b {
  font-family: var(--sv-ff-head);
  font-size: 16px;
  font-weight: 400;
}
.mega-card.is-current b,
.mega-card:hover b {
  color: var(--sv-accent-text);
}

/*----- 3.6 Sticky Header -----*/
.sv-header.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 12px 34px rgba(14, 13, 11, 0.1);
  animation: sv-header-in 0.6s var(--sv-ease) both;
}
.sv-header.is-sticky .header-top,
.sv-header.is-sticky .header-brand {
  display: none;
}
.sv-header.is-sticky .nav-logo {
  display: inline-flex;
}
.sv-header.is-sticky .header-nav .container {
  border-color: transparent;
}
.sv-header.is-sticky.header-style-one .nav-social {
  display: none;
}
.sv-header.is-sticky.header-style-one .sv-nav {
  margin-left: auto;
}
.sv-header.is-sticky .sv-nav > ul > li > a {
  padding: 22px 0;
}
.sv-header.is-sticky .nav-social {
  display: none;
}
.sv-header-spacer {
  display: none;
}
.sv-header-spacer.is-on {
  display: block;
}
@keyframes sv-header-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/*======================
4. Offcanvas Menu
========================*/
.sv-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow-lg);
  transform: translateX(105%);
  transition: transform 0.6s var(--sv-ease);
  overflow-y: auto;
}
.sv-offcanvas.open {
  transform: none;
}
.sv-offcanvas-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(14, 13, 11, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.sv-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}
.offcanvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px;
  border-bottom: 1px solid var(--sv-line);
}
.offcanvas-head .sv-logo img {
  height: 40px;
}
.offcanvas-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--sv-mist);
  color: var(--sv-heading);
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--sv-ease);
}
.offcanvas-close:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
  transform: rotate(90deg);
}
.offcanvas-nav {
  flex: 1;
  padding: 14px 32px 30px;
}
.oc-group {
  border-bottom: 1px solid var(--sv-line);
}
.oc-group > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  color: var(--sv-heading);
  font-family: var(--sv-ff-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.oc-group > button i {
  color: var(--sv-accent-text);
  font-size: 12px;
  transition: transform 0.35s var(--sv-ease);
}
.oc-group.is-open > button i {
  transform: rotate(45deg);
}
.oc-group ul {
  display: none;
  padding: 0 0 16px;
}
.oc-group.is-open ul {
  display: block;
}
.oc-group ul a {
  display: block;
  padding: 7px 0 7px 16px;
  border-left: 2px solid var(--sv-line);
  color: var(--sv-text);
  font-size: 16.5px;
}
.oc-group ul a:hover,
.oc-group ul a.is-current {
  border-color: var(--sv-butter);
  color: var(--sv-accent-text);
}
.offcanvas-foot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 30px 32px 34px;
}
.offcanvas-foot .label {
  font-family: var(--sv-ff-head);
  font-size: 21px;
  line-height: 1.3;
  color: var(--sv-heading);
}
.offcanvas-search {
  padding: 22px 32px 6px;
}
.oc-phone {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 500;
}
.oc-mail {
  color: var(--sv-text);
}
.oc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.oc-mail:hover {
  color: var(--sv-butter);
}

/*======================
5. Custom Select
========================*/
/* Native selects stay in the form (value, name, submit); a styled button and
   listbox are drawn over them and keep them in sync. */
.sv-select {
  position: relative;
}
.sv-select > select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0 !important;
}
.sv-select .select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
  font-size: 15px;
  text-align: left;
  color: var(--sv-heading);
  transition: border-color 0.3s var(--sv-ease);
}
.sv-select.is-open .select-button,
.sv-select .select-button:hover {
  border-color: var(--sv-heading);
}
.sv-select .select-button .select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sv-select .select-button i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--sv-accent-text);
  transition: transform 0.35s var(--sv-ease);
}
.sv-select.is-open .select-button i {
  transform: rotate(180deg);
}
.sv-select .select-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  min-width: 100%;
  max-height: 340px;
  margin: 0;
  padding: 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  background-color: var(--sv-surface);
  border-top: 2px solid var(--sv-butter);
  box-shadow: var(--sv-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s var(--sv-ease), transform 0.3s var(--sv-ease), visibility 0.3s;
}
.sv-select.opens-up .select-list {
  top: auto;
  bottom: calc(100% + 8px);
  border-top: 0;
  border-bottom: 2px solid var(--sv-butter);
  transform: translateY(-10px);
}
.sv-select.is-open .select-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sv-select .select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 20px;
  font-size: 15px;
  color: var(--sv-heading);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--sv-ease), color 0.2s var(--sv-ease);
}
.sv-select .select-option .option-meta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sv-accent-text);
}
.sv-select .select-option .option-meta.is-none {
  color: var(--sv-muted);
}
.sv-select .select-option.is-focused,
.sv-select .select-option:hover {
  background-color: var(--sv-mist);
}
.sv-select .select-option.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.sv-select .select-option.is-selected {
  color: var(--sv-accent-text);
}
.sv-select .select-option.is-selected::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: var(--sv-accent-text);
}
.sv-select.is-compact .select-button {
  height: 46px;
  border: 0;
  border-radius: 23px;
  background: var(--sv-mist);
  font-size: 14px;
  font-weight: 600;
}

/*======================
6. Language Picker
========================*/
/* Language picker: a flag and a code; the menu lists the languages that read left to right and right to left.
   The demo copy stays in English, and a right-to-left language turns the layout around. */
.sv-lang {
  position: relative;
  flex-shrink: 0;
}
.sv-lang .lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  font-family: var(--sv-ff-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sv-lang .lang-btn:hover,
.sv-lang .lang-btn[aria-expanded="true"] {
  background: #FFFFFF;
  color: var(--sv-ink);
}
.sv-lang .lang-btn > i {
  font-size: 9px;
  transition: transform 0.3s ease;
}
.sv-lang .lang-btn[aria-expanded="true"] > i {
  transform: rotate(180deg);
}
.sv-lang .flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.sv-lang.is-icon .lang-btn {
  height: 44px;
  padding: 0 15px;
  background: var(--sv-tonal);
  color: var(--sv-heading);
}
.sv-lang.is-icon .lang-btn:hover,
.sv-lang.is-icon .lang-btn[aria-expanded="true"] {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sv-lang .lang-menu {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;
  z-index: 1300;
  width: 248px;
  padding: 10px;
  border-radius: 2px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow-lg);
  font-family: var(--sv-ff-body);
  text-align: start;
  white-space: normal;
}
.sv-lang.is-up .lang-menu {
  top: auto;
  bottom: calc(100% + 12px);
}
.sv-lang.is-start .lang-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.sv-lang .lang-menu[hidden] {
  display: none;
}
.sv-lang .lang-group {
  margin: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sv-muted);
}
.sv-lang .lang-menu ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-lang .lang-menu ul + .lang-group {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sv-line);
}
.sv-lang .lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sv-heading);
  font-family: var(--sv-ff-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.sv-lang .lang-item small {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sv-muted);
}
.sv-lang .lang-item i {
  width: 12px;
  font-size: 11px;
  color: var(--sv-accent-text);
  opacity: 0;
}
.sv-lang .lang-item:hover,
.sv-lang .lang-item[aria-pressed="true"] {
  background: var(--sv-mist);
}
.sv-lang .lang-item[aria-pressed="true"] {
  font-weight: 600;
}
.sv-lang .lang-item[aria-pressed="true"] i {
  opacity: 1;
}
.sv-lang .lang-note {
  margin: 10px 10px 4px;
  padding-top: 10px;
  border-top: 1px solid var(--sv-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--sv-muted);
}

/*======================
7. Components
========================*/
/*----- 7.1 Recipe Cards -----*/
/* The blog's recipe card: a crisp photo, the caps meta (time, difficulty), the serif title, the cook's byline and
   two round tools. Hover accent: prep, cook and servings slide up over the photo's foot. */
.sv-recipe {
  position: relative;
  height: 100%;
}
.rc-img {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sv-mist);
}
.rc-img img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7.2;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.sv-recipe:hover .rc-img img {
  transform: scale(1.045);
}
.rc-flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rc-flag i {
  font-size: 10px;
}
/* the hover accent: the recipe's own figures rise over the photo's foot */
.rc-slide {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(14, 13, 11, 0.86);
  color: rgba(244, 239, 230, 0.8);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(101%);
  transition: transform 0.5s var(--sv-ease);
}
.rc-slide b {
  color: var(--sv-butter);
  font-size: 15px;
  letter-spacing: 0;
}
.sv-recipe:hover .rc-slide,
.sv-recipe:focus-within .rc-slide {
  transform: none;
}
.rc-body {
  padding-top: 20px;
}
.rc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 10px;
  color: var(--sv-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rc-meta i {
  margin-right: 5px;
  color: var(--sv-muted);
}
.rc-cat {
  display: block;
  margin-bottom: 6px;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.rc-title {
  font-size: 21px;
  line-height: 1.42;
}
.rc-title a:hover {
  color: inherit;
  background-image: linear-gradient(var(--sv-butter), var(--sv-butter));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.16em;
}
.rc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}
.rc-by {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  line-height: 1.25;
}
.rc-by b {
  display: block;
  color: var(--sv-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rc-by small {
  color: var(--sv-muted);
  font-size: 13px;
}
.rc-tools {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}
.rc-ing {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--sv-muted);
}
/* list: photo left, copy right (the blog's "Easy Weeknight Dinners") */
.sv-recipe.is-list {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}
.sv-recipe.is-list .rc-body {
  padding-top: 0;
}
.sv-recipe.is-list .rc-tools {
  margin-top: 16px;
}
/* mini: a small photo beside the title (sidebars, "Popular Recipes") */
.sv-recipe.is-mini {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 18px;
  align-items: center;
}
.sv-recipe.is-mini .rc-img img {
  aspect-ratio: 1 / 1;
}
.sv-recipe.is-mini .rc-body {
  padding-top: 0;
}
.sv-recipe.is-mini .rc-title {
  font-size: 16px;
  line-height: 1.45;
}
/* tile: a square photo and a small title (the "popular this week" grid) */
.sv-recipe.is-tile .rc-img img {
  aspect-ratio: 1 / 0.82;
}
.sv-recipe.is-tile .rc-title {
  margin-top: 12px;
  font-size: 15.5px;
  line-height: 1.45;
}
.sv-recipe.is-tile .rc-slide {
  padding: 9px 10px;
  font-size: 10px;
}
.sv-recipe.is-tile .rc-slide b {
  font-size: 13px;
}

/*----- 7.2 Journal Cards -----*/
.sv-post {
  height: 100%;
}
.pc-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--sv-mist);
}
.pc-media img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 6.6;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.sv-post:hover .pc-media img {
  transform: scale(1.04);
}
.pc-media .sv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  font-size: 18px;
}
.pc-media.is-gallery .swiper-slide img {
  aspect-ratio: 10 / 6.6;
}
.pc-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #0E0D0B;
  font-size: 12px;
  transition: background-color 0.3s ease;
}
.pc-arrow.is-prev {
  left: 14px;
}
.pc-arrow.is-next {
  right: 14px;
}
.pc-arrow:hover {
  background: var(--sv-butter);
}
.pc-body {
  padding-top: 22px;
}
.pc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 10px;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pc-meta a {
  color: var(--sv-heading);
}
.pc-title {
  font-size: 22px;
  line-height: 1.4;
}
.pc-body p {
  margin-top: 12px;
  font-size: 16px;
}
.pc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}
.sv-post.is-quote {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 44px 40px;
  background: var(--sv-butter);
  --sv-heading: #0E0D0B;
  --sv-muted: #57503F;
  --sv-text: #3F3A33;
  color: var(--sv-text);
}
.sv-post.is-quote .pq-mark {
  font-size: 34px;
  color: #0E0D0B;
}
.sv-post.is-quote .pc-title {
  font-style: italic;
  font-size: 23px;
}
.sv-post.is-wide {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.sv-post.is-wide .pc-body {
  padding-top: 0;
}
.sv-post.is-wide .pc-title {
  font-size: clamp(24px, 2vw, 30px);
}

/*----- 7.3 Cook Cards -----*/
/* instagram-style: the cook's dish as the cover, a ring-framed face over its foot, label / value figures */
.sv-cook {
  height: 100%;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line);
  transition: box-shadow 0.4s var(--sv-ease), transform 0.4s var(--sv-ease);
}
.sv-cook:hover {
  transform: translateY(-6px);
  box-shadow: var(--sv-shadow-lg);
}
.ck-cover {
  display: block;
  overflow: hidden;
}
.ck-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 6.4;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.sv-cook:hover .ck-cover img {
  transform: scale(1.05);
}
.ck-body {
  position: relative;
  padding: 0 26px 28px;
  text-align: center;
}
.ck-face {
  position: relative;
  display: inline-block;
  margin-top: -40px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, var(--sv-butter), var(--sv-turmeric), var(--sv-paprika), var(--sv-butter));
}
.ck-face img {
  display: block;
  width: 76px;
  height: 76px;
  border: 3px solid var(--sv-surface);
  border-radius: 50%;
  object-fit: cover;
}
.ck-name {
  margin-top: 12px;
  font-size: 20px;
}
.ck-role {
  margin: 4px 0 18px;
  color: var(--sv-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ck-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 22px;
  border-top: 1px solid var(--sv-line);
  border-bottom: 1px solid var(--sv-line);
}
.ck-stats div {
  padding: 12px 4px;
}
.ck-stats div + div {
  border-left: 1px solid var(--sv-line);
}
.ck-stats dt {
  color: var(--sv-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ck-stats dd {
  margin: 2px 0 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 19px;
}

/*----- 7.4 Reader Notes -----*/
.sv-note {
  height: 100%;
  margin: 0;
  padding: 34px 34px 30px;
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
}
.nt-recipe {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sv-line);
  line-height: 1.3;
}
.nt-recipe img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}
.nt-recipe small {
  display: block;
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nt-recipe b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15.5px;
  font-weight: 400;
}
.sv-note blockquote {
  margin: 14px 0 22px;
}
.sv-note blockquote p {
  margin-top: 10px;
}
.sv-note figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.3;
}
.sv-note figcaption b {
  display: block;
  color: var(--sv-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sv-note figcaption small {
  color: var(--sv-muted);
  font-size: 14px;
}

/*----- 7.5 Category Strip -----*/
/* the blog's doodle strip: a bordered row of illustrated categories */
.sv-cats {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
}
.sv-cats li + li {
  border-left: 1px solid var(--sv-line);
}
.sv-cats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 8px 22px;
  text-align: center;
  transition: background-color 0.35s ease;
}
.sv-cats .sv-ico {
  width: 60px;
  height: 60px;
  margin-bottom: 8px;
  transition: transform 0.45s var(--sv-ease);
}
.sv-cats b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15.5px;
  font-weight: 400;
}
.sv-cats small {
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sv-cats a:hover {
  background: var(--sv-cream);
  color: inherit;
}
.sv-cats a:hover .sv-ico {
  transform: translateY(-6px) rotate(-6deg);
}

/*----- 7.6 Press Wall -----*/
.sv-press {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: 30px;
}
.sv-press li {
  display: flex;
  justify-content: center;
}
.sv-press img {
  height: 34px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.sv-press li:hover img {
  opacity: 1;
}
.sv-press .pw-night,
[data-theme="dark"] .sv-press .pw-day,
.is-night .sv-press .pw-day {
  display: none;
}
[data-theme="dark"] .sv-press .pw-night,
.is-night .sv-press .pw-night {
  display: block;
}

/*----- 7.7 Tabs, Pagination, Arrows -----*/
.sv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sv-tabs button {
  height: 42px;
  padding: 0 18px;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sv-tabs button:hover {
  background: var(--sv-tonal-2);
}
.sv-tabs button.is-active {
  background: var(--sv-ink);
  color: #FFFFFF;
}
[data-theme="dark"] .sv-tabs button.is-active,
.is-night .sv-tabs button.is-active {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.is-hidden,
.is-unmatched {
  display: none !important;
}
.sv-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
}
.sv-pages a,
.sv-pages span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 40px;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 14px;
  font-weight: 700;
}
.sv-pages .is-current {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sv-pages a:hover {
  background: var(--sv-ink);
  color: #FFFFFF;
}
.sv-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 15px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.sv-arrow:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sv-arrow.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}
.sv-arrows {
  display: flex;
  gap: 10px;
}
.sv-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}
.sv-dots .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  border-radius: 50%;
  background: var(--sv-line-2);
  opacity: 1;
}
.sv-dots .swiper-pagination-bullet-active {
  background: var(--sv-ink);
}
[data-theme="dark"] .sv-dots .swiper-pagination-bullet-active {
  background: var(--sv-butter);
}

/*----- 7.8 Accordion -----*/
.acc-item {
  border-bottom: 1px solid var(--sv-line);
}
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 18px;
  line-height: 1.45;
  text-align: left;
}
.acc-head i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sv-tonal);
  font-size: 12px;
  transition: transform 0.35s var(--sv-ease), background-color 0.3s ease;
}
.acc-item.is-open .acc-head i {
  background: var(--sv-butter);
  color: var(--sv-ink);
  transform: rotate(45deg);
}
.acc-body {
  padding: 0 60px 24px 0;
}

/*----- 7.9 Breadcrumb -----*/
.sv-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--sv-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.sv-crumbs i {
  font-size: 8px;
  opacity: 0.6;
}
.sv-crumbs a {
  color: var(--sv-heading);
}
.sv-crumbs a:hover {
  color: var(--sv-accent-text);
}

/*======================
8. Home One
========================*/
/*----- 8.1 Hero -----*/
/* the blog's opening: a title on set lines with the search beside it, then its row of three tall recipe cards with
   a white caption card over each photo's foot, arrows at the sides, and the doodle strip under them */
.sv-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.hero-one {
  padding: 70px 0 80px;
}
.hero-intro {
  margin-bottom: 50px;
}
.hero-title {
  font-size: clamp(30px, 4.5vw, 68px);
  line-height: 1.14;
}
.hero-title .ln {
  display: block;
  white-space: nowrap;
}
.hero-side .sv-lead {
  margin-bottom: 24px;
}
.hero-search {
  margin-bottom: 26px;
}
.hero-search input {
  height: 56px;
  font-size: 16px;
}
.hero-search button {
  width: 60px;
  height: 56px;
}
.hero-cards {
  position: relative;
}
.hero-arrow {
  position: absolute;
  top: 42%;
  z-index: 5;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow);
}
.hero-arrow.hero-prev {
  left: -25px;
}
.hero-arrow.hero-next {
  right: -25px;
}
.sv-recipe.is-hero .rc-img img {
  aspect-ratio: 4 / 4.9;
}
.hc-cap {
  position: relative;
  z-index: 2;
  margin: -96px 18px 0;
  padding: 20px 24px 22px;
  background: var(--sv-surface);
  box-shadow: 0 10px 30px rgba(14, 13, 11, 0.07);
  transition: transform 0.5s var(--sv-ease);
}
.sv-recipe.is-hero:hover .hc-cap {
  transform: translateY(-8px);
}
.hc-cap .rc-title {
  font-size: 21px;
}
.hero-one .sv-cats {
  margin-top: 60px;
}

/*----- 8.2 Editor's Picks -----*/
.picks-list {
  display: grid;
  gap: 22px;
}
.picks-book {
  position: relative;
  display: block;
  padding: 6px;
  background: var(--sv-butter);
}
.picks-book img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.7;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.9s var(--sv-ease);
}
.picks-book:hover img {
  transform: scale(1.03);
}
.pb-tag {
  position: absolute;
  top: 26px;
  left: 26px;
  display: block;
  padding: 14px 18px;
  background: #FFFFFF;
  color: #0E0D0B;
  line-height: 1.3;
  box-shadow: 0 10px 24px rgba(14, 13, 11, 0.12);
}
.pb-tag b {
  display: block;
  font-family: var(--sv-ff-head);
  font-size: 17px;
  font-weight: 400;
}
.pb-tag small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.picks-book:hover {
  color: inherit;
}
.fresh-more {
  margin-top: 60px;
}

/*----- 8.3 Tonight's Recipe -----*/
/* the ingredient card stays (CSS sticky); each method step that reaches the middle ticks its ingredients */
.tonight-actions {
  max-width: 470px;
}
.tonight-actions p {
  margin-bottom: 20px;
}
.tn-card {
  position: sticky;
  top: 100px;
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow-lg);
}
.tn-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
}
.tn-card-body {
  padding: 26px 30px 30px;
}
.tn-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sv-line);
}
.tn-count {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tn-count b {
  color: var(--sv-heading);
  font-size: 15px;
}
.tn-ings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 22px;
}
.tn-ings li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.4;
  transition: color 0.4s ease;
}
.tn-ings b {
  color: var(--sv-heading);
  font-weight: 700;
}
.tn-ings li.is-ticked {
  color: var(--sv-muted);
}
.tn-ings li.is-ticked span:last-child {
  text-decoration: line-through;
  text-decoration-color: var(--sv-butter-deep);
  text-decoration-thickness: 2px;
}
.tick {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--sv-line-2);
  background: var(--sv-surface);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.tick::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--sv-ink);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity 0.3s ease, transform 0.4s var(--sv-ease);
}
.is-ticked > .tick,
.is-done .tick,
input:checked + .tick {
  border-color: var(--sv-butter-deep);
  background: var(--sv-butter);
}
.is-ticked > .tick::after,
.is-done .tick::after,
input:checked + .tick::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.tn-steps {
  counter-reset: none;
}
.tn-step {
  position: relative;
  min-height: 250px;
  padding: 36px 0 40px 96px;
  border-bottom: 1px solid var(--sv-line);
  transition: opacity 0.5s ease;
}
.tn-step:first-child {
  padding-top: 6px;
}
.tn-no {
  position: absolute;
  left: 0;
  top: 30px;
  color: var(--sv-line-2);
  font-family: var(--sv-ff-head);
  font-size: 58px;
  line-height: 1;
  transition: color 0.5s ease;
}
.tn-step:first-child .tn-no {
  top: 0;
}
.tn-step h3 {
  margin-bottom: 12px;
}
.tn-step.is-active .tn-no,
.tn-step.is-past .tn-no {
  color: var(--sv-heading);
}
.tn-step.is-active .tn-no {
  text-shadow: 0 0.06em 0 var(--sv-butter);
}
.tn-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 12px;
  background: var(--sv-cream);
  color: var(--sv-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sv-temp {
  font-weight: 700;
  color: var(--sv-heading);
  white-space: nowrap;
}

/*----- 8.4 Planner Invite -----*/
.invite-box {
  position: relative;
  padding: 64px 60px 60px;
  border: 2px dashed rgba(14, 13, 11, 0.32);
  text-align: center;
}
.invite-box h2 {
  margin-bottom: 34px;
}
.invite-doodle {
  position: absolute;
}
.invite-doodle .sv-ico {
  width: 86px;
  height: 86px;
}
.invite-doodle.is-a {
  left: 6%;
  top: 22%;
  transform: rotate(-12deg);
}
.invite-doodle.is-b {
  right: 7%;
  top: 14%;
  transform: rotate(10deg);
}
.invite-doodle.is-c {
  right: 14%;
  bottom: 12%;
  transform: rotate(-8deg);
}
.invite-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  margin: 0 0 38px;
}
.invite-stats div {
  padding: 4px 34px;
}
.invite-stats div + div {
  border-left: 1px solid rgba(14, 13, 11, 0.2);
}
.invite-stats dt {
  order: 2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.invite-stats dd {
  margin: 0;
  color: #0E0D0B;
  font-family: var(--sv-ff-head);
  font-size: 40px;
  line-height: 1.2;
}
.invite-stats div {
  display: flex;
  flex-direction: column-reverse;
}

/*----- 8.5 Press & Partnership -----*/
.sv-press-area .sv-press {
  margin-bottom: 70px;
}
.partner-box {
  max-width: 980px;
  margin: 0 auto;
  padding: 70px 80px;
  background: var(--sv-surface);
  text-align: center;
}
.partner-box p {
  max-width: 640px;
  margin: 22px auto 32px;
}
.partner-box b {
  color: var(--sv-heading);
}

/*======================
9. Home Two
========================*/
/*----- 9.1 Featured Post Slider -----*/
/* the personal blog's opening: one big recipe post at a time beside the sidebar, arrows on the photo */
.sv-feature {
  position: relative;
}
.feature-img {
  display: block;
  overflow: hidden;
}
.feature-img img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7.6;
  object-fit: cover;
}
.sv-feature .hero-copy {
  padding-top: 28px;
}
.feature-title {
  margin-bottom: 14px;
  font-size: clamp(28px, 2.5vw, 40px);
  line-height: 1.25;
}
.sv-feature .swiper-slide {
  background: var(--sv-bg);
}
.feature-nav {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.feature-nav .sv-arrow {
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  color: #0E0D0B;
}
.feature-nav .sv-arrow:hover {
  background: var(--sv-butter);
}
.hero-count {
  padding: 8px 14px;
  background: rgba(14, 13, 11, 0.7);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.hero-count b {
  color: var(--sv-butter);
}
.blog-rule {
  margin: 76px 0 34px;
}
.weeknight-list {
  display: grid;
  gap: 34px;
}
/* a cookbook cover cut from its mock-up: the book only, no table */
.sv-cover {
  display: block;
  overflow: hidden;
  aspect-ratio: 0.757;
}
.sv-cover img {
  display: block;
  width: 180%;
  max-width: none;
  margin: -46.4% 0 0 -40%;
}

/*----- 9.2 Free Recipe Book -----*/
.book-promo {
  position: relative;
  display: grid;
  grid-template-columns: 250px 1fr;
  align-items: center;
  gap: 30px;
  margin-top: 90px;
  padding: 34px 40px 34px 30px;
  background: var(--sv-mist);
}
.bp-covers {
  position: relative;
  height: 170px;
}
.bp-covers .sv-cover {
  position: absolute;
  width: 140px;
  border: 3px solid var(--sv-butter);
  box-shadow: 0 18px 30px rgba(14, 13, 11, 0.2);
}
.bp-covers .bp-a {
  left: 0;
  top: -46px;
  transform: rotate(-8deg);
}
.bp-covers .bp-b {
  left: 96px;
  top: -66px;
  transform: rotate(6deg);
}
.bp-title {
  margin-bottom: 8px;
  font-family: var(--sv-ff-body);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.bp-copy p {
  max-width: 420px;
  margin-bottom: 18px;
  font-size: 15.5px;
}

/*----- 9.3 Sidebar -----*/
.sv-sidebar {
  display: grid;
  gap: 32px;
}
.sb-widget {
  padding: 32px 30px;
  border: 1px solid var(--sv-line-2);
  text-align: center;
}
.sb-title {
  margin-bottom: 22px;
  font-family: var(--sv-ff-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sb-face {
  display: block;
  width: 118px;
  height: 118px;
  margin: 0 auto 20px;
  border-radius: 50%;
  object-fit: cover;
}
.sb-about p {
  font-size: 15.5px;
}
.sb-sign {
  display: block;
  margin-top: 6px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 22px;
  font-style: italic;
}
.sv-social.is-centered {
  justify-content: center;
}
.sb-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 30px;
  background: var(--sv-cream);
}
.sb-plan b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 22px;
  font-weight: 400;
}
.sb-plan small {
  display: block;
  margin: 2px 0 14px;
  font-size: 15px;
}
.sb-plan .sv-ico {
  width: 88px;
  height: 88px;
  transform: rotate(8deg);
  transition: transform 0.45s var(--sv-ease);
}
.sb-plan:hover {
  color: inherit;
}
.sb-plan:hover .sv-ico {
  transform: rotate(-4deg) scale(1.06);
}
.sb-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  overflow: hidden;
}
.sb-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.sb-tile span {
  position: relative;
  padding: 6px 14px;
  background: #FFFFFF;
  color: #0E0D0B;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sb-tile:hover img {
  transform: scale(1.08);
}
.sb-news {
  border: 0;
  background: var(--sv-mist);
}
.sb-news h2 {
  margin-bottom: 10px;
}
.sb-news p {
  font-size: 15px;
}
.sv-newsletter.is-stacked {
  display: grid;
  gap: 12px;
}
.sv-newsletter.is-stacked .sv-input {
  min-width: 0;
  height: 52px;
  background: var(--sv-surface);
  color: var(--sv-heading);
}
.sb-minis {
  display: grid;
  gap: 18px;
  text-align: left;
}
.sb-minis .sv-recipe.is-mini {
  grid-template-columns: 80px 1fr;
}
.sb-cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 8px;
}
.sb-cats a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 14.5px;
}
.sb-cats .sv-ico {
  width: 54px;
  height: 54px;
  transition: transform 0.4s var(--sv-ease);
}
.sb-cats a:hover .sv-ico {
  transform: translateY(-4px) rotate(-6deg);
}

/*----- 9.4 Kitchen Timer -----*/
/* the bake as a kitchen timer: the dial winds down from twenty-five minutes as the section scrolls by */
.sv-timer-band h2 {
  margin-bottom: 18px;
}
.bake-stages {
  margin: 30px 0 34px;
}
.bake-stages div {
  position: relative;
  padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--sv-line);
}
.bake-stages div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--sv-line-2);
  border-radius: 50%;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.bake-stages dt {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 18px;
  font-weight: 400;
  transition: color 0.4s ease;
}
.bake-stages dd {
  margin: 2px 0 0;
  font-size: 15.5px;
}
.bake-stages div.is-lit::before {
  border-color: var(--sv-butter);
  background: var(--sv-butter);
  box-shadow: 0 0 0 5px rgba(var(--sv-butter-rgb), 0.18);
}
.bake-stages div.is-lit dt {
  color: var(--sv-butter);
}
.timer-dial {
  position: relative;
  width: min(460px, 100%);
  margin: 0 auto;
}
.td-ring {
  --p: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(var(--sv-butter) calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0);
}
.td-ring::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #26231E, #141310 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.td-ticks {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(244, 239, 230, 0.4) 0deg 0.8deg, transparent 0.8deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(100% - 16px), #000 calc(100% - 15px));
  mask: radial-gradient(circle, transparent 0 calc(100% - 16px), #000 calc(100% - 15px));
}
.td-hand {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 4px;
  height: 40%;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--sv-butter);
  transform-origin: 50% 100%;
}
.td-read {
  position: absolute;
  left: 50%;
  top: 58%;
  text-align: center;
  transform: translateX(-50%);
}
.td-read b {
  display: block;
  color: #F4EFE6;
  font-family: var(--sv-ff-head);
  font-size: clamp(42px, 4vw, 62px);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.td-read small {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.td-photo {
  position: absolute;
  left: -14px;
  bottom: -10px;
  width: 34%;
  aspect-ratio: 1 / 1;
  border: 6px solid var(--sv-night);
  border-radius: 50%;
  object-fit: cover;
}

/*----- 9.5 From My Shelf -----*/
.shelf-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
}
.shelf-row li + li {
  border-left: 1px solid var(--sv-line);
}
.shelf-row a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 18px 24px;
  text-align: center;
}
.shelf-row img {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  transition: transform 0.6s var(--sv-ease);
}
.shelf-row b {
  margin-top: 14px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15.5px;
  font-weight: 400;
}
.shelf-row span {
  color: var(--sv-muted);
  font-size: 14px;
}
.shelf-row a:hover img {
  transform: translateY(-6px);
}

/*----- 9.6 Cookbooks Band -----*/
.sv-books .sv-lead {
  max-width: 480px;
  margin-top: 18px;
}
.books-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 40px;
}
.books-row a {
  width: 136px;
  border: 3px solid var(--sv-butter);
  transition: transform 0.45s var(--sv-ease);
}
.books-row a:hover {
  transform: translateY(-8px) rotate(-2deg);
}

/*----- 9.7 Next Recipe Countdown -----*/
.drop-box {
  height: 100%;
  padding: 40px 36px;
  background: var(--sv-mist);
}
.drop-box h2 {
  margin-bottom: 26px;
}
.drop-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 22px;
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
}
.drop-count li {
  padding: 14px 4px;
  text-align: center;
}
.drop-count li + li {
  border-left: 1px solid var(--sv-line);
}
.drop-count b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.drop-count small {
  color: var(--sv-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.drop-box p {
  margin-bottom: 22px;
  font-size: 15.5px;
}

/*======================
10. Home Three
========================*/
/*----- 10.1 Hero -----*/
/* the recipes-and-videos home: the week's films as slides, the copy left on set lines, the photo right with play */
.hero-three {
  padding: 64px 0 70px;
}
.hero-three .swiper-slide {
  background: var(--sv-bg);
}
.h3-slide {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 64px;
}
.h3-slide .hero-title {
  margin: 6px 0 20px;
  font-size: clamp(32px, 3.9vw, 62px);
}
.h3-slide .hero-copy p {
  max-width: 480px;
  margin-bottom: 30px;
}
.h3-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 22px;
}
.h3-foot .sv-btn {
  margin-left: auto;
}
.h3-media {
  position: relative;
  overflow: hidden;
}
.h3-media img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 7.4;
  object-fit: cover;
}
.h3-media .sv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.h3-media .sv-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.h3-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

/*----- 10.2 This Week's Plan -----*/
/* seven day cards on a track that slides sideways with the section's travel (no pin) */
.sv-week {
  overflow: clip;
  --wk-pad: calc((100vw - 1320px) / 2 + 12px);
}
.week-side {
  max-width: 460px;
}
.week-side p {
  margin-bottom: 20px;
}
.week-window {
  overflow: clip;
}
.week-track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding: 0 var(--wk-pad);
}
.wk-day {
  width: 300px;
  padding: 24px 22px 18px;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line);
}
.wk-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 3px double var(--sv-line-2);
}
.wk-head b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 21px;
  font-weight: 400;
}
.wk-head span {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wk-meals li {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  line-height: 1.3;
}
.wk-meals img {
  width: 62px;
  height: 62px;
  object-fit: cover;
}
.wk-meals small {
  display: block;
  color: var(--sv-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wk-meals b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 14.5px;
  font-weight: 400;
}
.wk-meals .is-free b {
  color: var(--sv-muted);
}
.free-dot {
  width: 62px;
  height: 62px;
  background: repeating-linear-gradient(45deg, var(--sv-mist), var(--sv-mist) 6px, var(--sv-cream) 6px, var(--sv-cream) 12px);
}

/*----- 10.3 Today On Your Plan -----*/
.today-list {
  margin-bottom: 22px;
  text-align: left;
}
.today-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--sv-line);
  line-height: 1.35;
}
.today-list small {
  display: block;
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.today-list b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15.5px;
  font-weight: 400;
}

/*----- 10.4 Wednesday Films -----*/
.wed-video {
  position: relative;
  display: block;
  overflow: hidden;
}
.wed-video img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.wed-video:hover img {
  transform: scale(1.04);
}
.wed-video .sv-play {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
}
.wv-cap {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: block;
  padding: 14px 20px;
  background: #FFFFFF;
  color: #0E0D0B;
  line-height: 1.35;
}
.wv-cap small {
  display: block;
  color: #6B6768;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.wv-cap b {
  font-family: var(--sv-ff-head);
  font-size: 17px;
  font-weight: 400;
}

/*----- 10.5 Popular This Week -----*/
.popular-title {
  margin: 80px 0 36px;
}
.sv-rule-title.is-centered {
  justify-content: center;
  text-align: center;
}
.sv-rule-title.is-centered::before {
  content: "";
  flex: 1;
  height: 0;
  border-top: 3px double var(--sv-line-2);
}

/*======================
11. Recipe Pages
========================*/
/*----- 11.1 Recipe Index -----*/
.rf-panel {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 26px;
}
.rf-group {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--sv-line);
}
.rf-title {
  display: block;
  margin-bottom: 14px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rf-cats {
  display: grid;
  gap: 2px;
}
.rf-cats button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 10px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15px;
  text-align: left;
  transition: background-color 0.3s ease;
}
.rf-cats .sv-ico,
.rf-ico {
  width: 34px;
  height: 34px;
}
.rf-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 13px;
}
.rf-cats .n,
.rf-diets .n {
  margin-left: auto;
  color: var(--sv-muted);
  font-family: var(--sv-ff-body);
  font-size: 12.5px;
  font-weight: 700;
}
.rf-cats button:hover {
  background: var(--sv-tonal);
}
.rf-cats button.is-active {
  background: var(--sv-cream);
}
.rf-diets {
  display: grid;
  gap: 10px;
}
.rf-diets .sv-check {
  align-items: center;
}
.rf-diets .sv-check input {
  margin-top: 0;
}
.rf-out {
  margin: 6px 0 0;
  color: var(--sv-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rf-levels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--sv-tonal);
}
.rf-levels button {
  height: 38px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-heading);
  transition: background-color 0.3s ease;
}
.rf-levels button.is-active {
  background: var(--sv-surface);
  box-shadow: 0 2px 8px rgba(14, 13, 11, 0.08);
}
.rf-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 40px;
  padding: 16px 22px;
  background: var(--sv-mist);
}
.rf-bar p {
  margin: 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 18px;
}
.rf-sort {
  display: flex;
  align-items: center;
  gap: 14px;
}
.rf-sort .sv-label {
  margin: 0;
  white-space: nowrap;
}
.rf-sort .sv-select-wrap {
  width: 220px;
}
.rf-sort .select-button {
  height: 46px;
}
.rf-empty {
  padding: 70px 30px;
  background: var(--sv-mist);
  text-align: center;
}
.rf-empty .sv-ico {
  width: 90px;
  height: 90px;
  margin-bottom: 16px;
}
.rf-empty p {
  margin: 10px auto 24px;
}

/*----- 11.2 The Recipe -----*/
.rp-title {
  margin: 4px 0 24px;
  font-size: clamp(34px, 3.2vw, 50px);
}
.rp-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 30px;
}
.rp-share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rp-share .sv-caps {
  margin-right: 6px;
  color: var(--sv-heading);
}
.rp-photo {
  margin: 0;
  overflow: hidden;
}
.rp-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 6.4;
  object-fit: cover;
}
.rp-facts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
  border-bottom: 1px solid var(--sv-line-2);
}
.rp-facts div {
  padding: 18px 10px;
  text-align: center;
}
.rp-facts div + div {
  border-left: 1px solid var(--sv-line);
}
.rp-facts dt {
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rp-facts dd {
  margin: 2px 0 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 16px;
}
.rp-intro {
  margin: 30px 0 22px;
  font-size: 17.5px;
}
.rp-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.rp-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--sv-cream);
  color: var(--sv-heading);
  font-size: 15px;
}
.rp-block {
  margin-top: 70px;
}
.rp-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 26px;
  margin-bottom: 22px;
}
.rp-block-head .sv-rule-title {
  flex: 1;
  min-width: 220px;
  margin: 0;
}
.rp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* servings stepper and the measures switch: tonal faces, the active side in ink */
.sv-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--sv-tonal);
}
.sv-stepper .lbl {
  padding: 0 10px 0 8px;
  color: var(--sv-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sv-stepper button {
  width: 36px;
  height: 36px;
  background: var(--sv-surface);
  color: var(--sv-heading);
  font-size: 11px;
  transition: background-color 0.3s ease;
}
.sv-stepper button:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sv-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.sv-stepper b {
  min-width: 34px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}
.sv-switch {
  display: inline-flex;
  padding: 4px;
  background: var(--sv-tonal);
}
.sv-switch button {
  height: 36px;
  padding: 0 16px;
  color: var(--sv-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sv-switch button[aria-pressed="true"] {
  background: var(--sv-ink);
  color: #FFFFFF;
}
[data-theme="dark"] .sv-switch button[aria-pressed="true"] {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.ing-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  color: var(--sv-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ing-progress b {
  color: var(--sv-heading);
}
.ing-meter {
  position: relative;
  flex: 1;
  height: 4px;
  background: var(--sv-line);
}
.ing-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--sv-butter-deep);
  transition: width 0.5s var(--sv-ease);
}
.ing-list li {
  border-bottom: 1px solid var(--sv-line);
}
.ing-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 6px;
  cursor: pointer;
}
.ing-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ing-row input:focus-visible + .tick {
  outline: 3px solid var(--sv-butter-deep);
  outline-offset: 2px;
}
.ing-row .tick {
  margin-top: 0;
  border-radius: 50%;
}
.ing-row .tick::after {
  left: 5.5px;
  top: 2.5px;
}
.ing-txt {
  font-size: 16.5px;
  transition: color 0.3s ease;
}
.ing-txt b {
  color: var(--sv-heading);
  font-weight: 700;
}
.ing-txt small {
  display: block;
  color: var(--sv-muted);
  font-size: 12.5px;
}
li.is-done .ing-txt {
  color: var(--sv-muted);
  text-decoration: line-through;
  text-decoration-color: var(--sv-butter-deep);
  text-decoration-thickness: 2px;
}
li.is-done .ing-txt b {
  color: var(--sv-muted);
}
/* the blog's nutrition band: a butter label block beside a cream row of figures */
.sv-nutrition {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin-top: 46px;
  background: var(--sv-cream);
}
.nt-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 18px 20px;
  background: var(--sv-butter);
  color: #0E0D0B;
  font-family: var(--sv-ff-head);
  font-size: 19px;
  line-height: 1.25;
}
.nt-label small {
  font-family: var(--sv-ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nt-cells {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: 0;
}
.nt-cells div {
  padding: 18px 6px;
  text-align: center;
}
.nt-cells dd {
  order: -1;
  margin: 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 22px;
}
.nt-cells dt {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nt-cells div {
  display: flex;
  flex-direction: column;
}
.nt-batch {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--sv-muted);
}
.nt-batch b {
  color: var(--sv-heading);
}
/* directions: the butter number discs on a thread */
.steps {
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: var(--sv-butter);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 24px;
  padding: 0 0 38px;
}
.step-no {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sv-butter);
  color: #0E0D0B;
  font-family: var(--sv-ff-head);
  font-size: 17px;
  font-weight: 700;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.step-title {
  margin: 8px 0 10px;
  font-size: 20px;
}
.step-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.step-timer,
.step-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.step-timer {
  background: var(--sv-cream);
}
.step-timer:hover,
.step-done:hover {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
.step.is-done .step-no {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
[data-theme="dark"] .step.is-done .step-no {
  background: #F4EFE6;
  color: var(--sv-ink);
}
.step.is-done .step-body p {
  color: var(--sv-muted);
}
.step.is-done .step-done {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.rp-notes p {
  font-size: 16px;
}
.rp-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--sv-line);
}
.rp-tags .sv-caps {
  color: var(--sv-heading);
}
.rp-tags a {
  color: var(--sv-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rp-tags a:hover {
  color: var(--sv-accent-text);
}
.rp-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 60px;
}
.rp-pager a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
  background: var(--sv-mist);
}
.rp-pager a + a {
  align-items: flex-end;
  text-align: right;
}
.rp-pager b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 17px;
  font-weight: 400;
}
.sv-link.is-back i {
  order: -1;
}
/* comments */
.comments .comment {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 1px solid var(--sv-line);
}
.comments .sv-face {
  width: 52px;
  height: 52px;
}
.cm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 8px;
}
.cm-head b {
  color: var(--sv-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cm-head small {
  color: var(--sv-muted);
  font-size: 13.5px;
}
.cm-badge {
  padding: 2px 10px;
  background: var(--sv-butter);
  color: #0E0D0B;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cm-body p {
  font-size: 16px;
}
.cm-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 12px;
}
.comments.is-reply {
  grid-column: 2;
}
.comments.is-reply .comment {
  margin-top: 22px;
  padding: 24px 26px;
  border: 0;
  background: var(--sv-cream);
}
.rp-reply {
  margin-top: 50px;
}
.rp-reply-note {
  margin: 8px 0 18px;
  font-size: 14.5px;
  color: var(--sv-muted);
}
.rp-rate {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 22px;
}
.rp-rate .sv-label {
  margin: 0 12px 0 0;
}
.rp-rate button {
  color: #E3B21C;
  font-size: 18px;
}
.sb-plan-form .sv-ico {
  display: flex;
  width: 76px;
  height: 76px;
  margin: -6px auto 14px;
}
.sb-plan-form {
  text-align: left;
}
.sb-plan-form .sb-title {
  text-align: center;
}
.sb-plan-form .sv-field > i {
  top: 48px;
}
.rp-side {
  position: sticky;
  top: 100px;
}

/*----- 11.3 Categories -----*/
.cat-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  height: 100%;
  min-height: 260px;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line-2);
  transition: box-shadow 0.4s var(--sv-ease);
}
.cat-panel:hover {
  color: inherit;
  box-shadow: var(--sv-shadow-lg);
}
.cp-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 30px 30px 28px;
}
.cp-copy .sv-ico {
  width: 66px;
  height: 66px;
  transition: transform 0.45s var(--sv-ease);
}
.cat-panel:hover .cp-copy .sv-ico {
  transform: rotate(-8deg) translateY(-4px);
}
.cp-name {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 24px;
}
.cp-rows {
  display: flex;
  gap: 16px;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cp-rows b {
  color: var(--sv-heading);
}
.cp-names {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.5;
}
.cp-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  overflow: hidden;
}
.cp-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.cp-photos img:first-child {
  grid-row: 1 / 3;
}
.cp-photos.is-2 img {
  grid-row: 1 / 3;
}
.cat-panel:hover .cp-photos img {
  transform: scale(1.05);
}
.diet-tile {
  position: relative;
  display: block;
  overflow: hidden;
}
.diet-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.diet-tile span {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 16px;
  background: #FFFFFF;
  color: #0E0D0B;
  line-height: 1.3;
}
.diet-tile b {
  display: block;
  font-family: var(--sv-ff-head);
  font-size: 18px;
  font-weight: 400;
}
.diet-tile small {
  color: #6B6768;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.diet-tile:hover img {
  transform: scale(1.06);
}

/*----- 11.4 Saved Recipes -----*/
.saved-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 50px;
  padding: 26px 30px;
  background: var(--sv-cream);
}
.saved-stats {
  display: flex;
  margin: 0;
}
.saved-stats div {
  display: flex;
  flex-direction: column-reverse;
  padding: 0 30px;
}
.saved-stats div:first-child {
  padding-left: 0;
}
.saved-stats div + div {
  border-left: 1px solid var(--sv-line-2);
}
.saved-stats dt {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.saved-stats dd {
  margin: 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 30px;
  line-height: 1.2;
}

/*----- 11.5 Submit A Recipe -----*/
.wz-dots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 40px;
}
.wz-dots button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 12px;
  border-bottom: 3px solid var(--sv-line);
  color: var(--sv-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
}
.wz-dots span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 14px;
  letter-spacing: 0;
}
.wz-dots button.is-active {
  border-color: var(--sv-butter-deep);
  color: var(--sv-heading);
}
.wz-dots button.is-active span,
.wz-dots button.is-done span {
  background: var(--sv-butter);
  color: #0E0D0B;
}
.wz-step {
  margin: 0;
  padding: 0;
  border: 0;
}
.wz-step legend {
  margin-bottom: 24px;
}
.wz-help {
  margin: -10px 0 20px;
  color: var(--sv-muted);
  font-size: 15px;
}
.wz-rows {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.wz-row {
  display: grid;
  grid-template-columns: 1fr 36px;
  align-items: center;
  gap: 12px;
}
.wz-row.is-step {
  grid-template-columns: 1fr 100px 36px;
  align-items: start;
}
.wz-row .sv-input {
  padding-right: 20px;
}
.wz-row textarea.sv-input {
  height: 96px;
}
.wz-row .sv-round {
  margin-top: 10px;
}
.wz-photo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.wz-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 40px 20px;
  border: 2px dashed var(--sv-line-2);
  background: var(--sv-mist);
  color: var(--sv-heading);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.wz-drop i {
  font-size: 26px;
}
.wz-drop small {
  color: var(--sv-muted);
}
.wz-drop:hover {
  border-color: var(--sv-heading);
}
.wz-preview {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
}
.wz-review {
  margin: 10px 0 24px;
  padding: 26px 28px;
  background: var(--sv-cream);
}
.rv-title {
  display: block;
  margin: 4px 0 14px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 24px;
  font-weight: 400;
}
.rv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sv-line-2);
}
.rv-facts dt {
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rv-facts dd {
  margin: 0;
  color: var(--sv-heading);
}
.rv-list {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 15px;
}
.rv-list .is-missing {
  color: var(--sv-muted);
  list-style: none;
  margin-left: -20px;
}
.wz-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--sv-line);
}
.wz-done {
  padding: 60px 40px;
  background: var(--sv-cream);
  text-align: center;
}
.wz-done .sv-ico {
  width: 96px;
  height: 96px;
  margin-bottom: 14px;
}
.wz-done p {
  max-width: 520px;
  margin: 14px auto 26px;
}
.how-rows {
  margin: 0;
  text-align: left;
}
.how-rows div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sv-line);
}
.how-rows dt {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 26px;
  line-height: 1;
}
.how-rows dd {
  margin: 0;
  font-size: 15px;
}
.how-rows b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-weight: 400;
}

/*======================
12. Kitchen Pages
========================*/
/*----- 12.1 Meal Planner -----*/
.pl-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 50px;
  padding: 26px 30px;
  background: var(--sv-cream);
}
.pl-stats {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.pl-stats div {
  display: flex;
  flex-direction: column-reverse;
  padding: 0 30px;
}
.pl-stats div:first-child {
  padding-left: 0;
}
.pl-stats div + div {
  border-left: 1px solid var(--sv-line-2);
}
.pl-stats dt {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pl-stats dd {
  margin: 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 30px;
  line-height: 1.2;
}
.pl-house {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.pl-head .sv-rule-title {
  flex: 1;
  min-width: 200px;
  margin: 0;
}
.pl-cols,
.pl-day {
  display: grid;
  grid-template-columns: 116px repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pl-cols {
  margin-bottom: 8px;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pl-day {
  padding: 10px 0;
  border-top: 1px solid var(--sv-line);
}
.pl-day.is-today {
  margin: 0 -12px;
  padding: 10px 12px;
  background: var(--sv-cream);
}
.pl-dayname {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
}
.pl-dayname b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 17px;
  font-weight: 400;
}
.pl-dayname span {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pl-slot {
  position: relative;
  min-height: 92px;
}
.pl-slot.is-filled {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 30px 10px 10px;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line-2);
}
.pl-slot.is-filled > img {
  width: 62px;
  height: 62px;
  object-fit: cover;
}
.pl-info {
  min-width: 0;
  line-height: 1.3;
}
.pl-info small {
  display: none;
}
.pl-info > b {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 13.5px;
  font-weight: 400;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pl-serves {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.pl-serves b {
  color: var(--sv-heading);
}
.pl-serves button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 8px;
}
.pl-serves button:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.pl-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--sv-muted);
  font-size: 11px;
}
.pl-remove:hover {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
.pl-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 82px;
  border: 2px dashed var(--sv-line-2);
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.pl-add:hover {
  border-color: var(--sv-butter-deep);
  background: var(--sv-cream);
  color: var(--sv-heading);
}
/* the shopping list beside the week */
.shop-list {
  position: sticky;
  top: 100px;
  padding: 28px 28px 26px;
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
}
.sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sl-groups {
  max-height: 560px;
  margin: 0 -8px 18px;
  padding: 0 8px;
  overflow-y: auto;
}
.sl-group h3 {
  display: flex;
  justify-content: space-between;
  margin: 18px 0 4px;
  padding: 8px 10px;
  background: var(--sv-mist);
  font-family: var(--sv-ff-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sl-group h3 span {
  color: var(--sv-muted);
}
.sl-group li {
  position: relative;
  border-bottom: 1px solid var(--sv-line);
}
.sl-group .ing-row {
  padding: 10px 4px;
}
.sl-group .ing-txt {
  font-size: 15px;
  line-height: 1.35;
}
.sl-x {
  position: absolute;
  top: 50%;
  right: 4px;
  margin-top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--sv-muted);
  font-size: 11px;
}
.sl-empty {
  margin: 20px 0;
  color: var(--sv-muted);
}
.sl-add {
  display: flex;
  margin-bottom: 16px;
}
.sl-add .sv-input {
  height: 48px;
  padding-right: 16px;
  border-right: 0;
}
.sl-add button {
  flex-shrink: 0;
  width: 52px;
  height: 48px;
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sl-actions .sv-btn {
  padding: 0 14px;
}
/* the recipe drawer the planner opens on a slot */
.pl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2100;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  background: var(--sv-surface);
  box-shadow: var(--sv-shadow-lg);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.55s var(--sv-ease), visibility 0.55s;
}
.pl-drawer.is-open {
  transform: none;
  visibility: visible;
}
.pl-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(14, 13, 11, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.pl-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.pd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 28px;
  border-bottom: 1px solid var(--sv-line);
}
.pd-head b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 21px;
  font-weight: 400;
}
.pd-head .sv-caps {
  color: var(--sv-muted);
}
.pd-search {
  padding: 18px 28px;
}
.pd-search .sv-input {
  height: 48px;
}
.pd-list {
  flex: 1;
  padding: 0 28px 28px;
  overflow-y: auto;
}
.pd-list button {
  display: grid;
  grid-template-columns: 54px 1fr 20px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid var(--sv-line);
  text-align: left;
  line-height: 1.3;
}
.pd-list img {
  width: 54px;
  height: 54px;
  object-fit: cover;
}
.pd-list small {
  display: block;
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pd-list b {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15px;
  font-weight: 400;
}
.pd-list i {
  color: var(--sv-muted);
  font-size: 12px;
}
.pd-list button:hover {
  background: var(--sv-cream);
}
.tip-card {
  height: 100%;
  padding: 36px 34px;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line-2);
}
.tip-card .sv-ico {
  width: 74px;
  height: 74px;
  margin-bottom: 14px;
}
.tip-card h3 {
  margin-bottom: 10px;
}

/*----- 12.2 Kitchen Tools -----*/
.tool-card {
  margin-bottom: 30px;
  padding: 34px;
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
}
.tool-card.is-night {
  border-color: transparent;
}
.tc-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 26px;
}
.tc-head .sv-ico {
  width: 62px;
  height: 62px;
}
.tc-head p {
  margin: 6px 0 0;
  font-size: 15.5px;
}
.cv-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr 40px 1fr;
  align-items: end;
  gap: 14px;
}
.cv-swap {
  margin-bottom: 30px;
  width: 40px;
  height: 40px;
}
.cv-ing {
  transition: opacity 0.3s ease;
}
.cv-ing.is-off {
  opacity: 0.45;
}
.cv-result {
  padding: 22px 26px;
  background: var(--sv-cream);
}
.cv-result b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.2;
}
.cv-result span {
  font-size: 15px;
}
.oven-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr;
  align-items: end;
  gap: 14px;
}
.oven-out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 20px;
  background: var(--sv-cream);
}
.oven-out div {
  padding: 8px 12px;
  text-align: center;
}
.oven-out dt {
  color: var(--sv-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.oven-out dd {
  margin: 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 20px;
}
.oven-table {
  margin-top: 10px;
}
.oven-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.oven-table th {
  padding: 10px 8px;
  border-bottom: 2px solid var(--sv-heading);
  color: var(--sv-heading);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}
.oven-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--sv-line);
}
.oven-table tr:nth-child(even) td {
  background: var(--sv-mist);
}
.oven-table td:first-child {
  color: var(--sv-heading);
  font-weight: 700;
}
.tl-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}
.tl-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 12px 14px;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  text-align: left;
  line-height: 1.3;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tl-preset b {
  font-family: var(--sv-ff-head);
  font-size: 14.5px;
  font-weight: 400;
}
.tl-preset span {
  color: var(--sv-butter);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tl-preset:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.tl-preset:hover span {
  color: var(--sv-ink);
}
.tl-custom {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--sv-line);
}
.tl-custom .sv-field {
  margin: 0;
}
.tl-custom .sv-input {
  height: 54px;
  padding-right: 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #F4EFE6;
}
.tl-custom .form-status {
  grid-column: 1 / -1;
  margin: 0;
}
.tl-list li.is-empty {
  display: block;
  padding: 16px 0 0;
  color: var(--sv-muted);
  font-size: 15px;
}
.cup-rows {
  margin: 0;
}
.cup-rows div {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--sv-line);
}
.cup-rows dt {
  font-weight: 400;
}
.cup-rows dd {
  margin: 0;
  color: var(--sv-heading);
  font-weight: 700;
}

/*----- 12.3 Timers -----*/
/* a running timer: a ring that fills as the time goes, the name, the time left, one more minute, clear */
.tl-list li,
.td-list li {
  display: grid;
  grid-template-columns: 40px 1fr 30px 30px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sv-line);
}
.tm-ring {
  --p: 0;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: conic-gradient(var(--sv-butter) calc(var(--p) * 1%), rgba(255, 255, 255, 0.12) 0);
}
.tm-ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sv-night);
}
.tm-txt {
  line-height: 1.25;
}
.tm-txt small {
  display: block;
  color: rgba(244, 239, 230, 0.66);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tm-txt b {
  color: #F4EFE6;
  font-family: var(--sv-ff-head);
  font-size: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.is-done .tm-txt b {
  color: var(--sv-butter);
}
.tm-add,
.tm-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #F4EFE6;
  font-size: 11px;
}
.tm-add:hover,
.tm-x:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
li.is-done .tm-ring {
  animation: sv-ring 1s ease-in-out infinite;
}
@keyframes sv-ring {
  50% {
    transform: rotate(14deg);
  }
}
.sv-timer-dock {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 950;
  width: 300px;
  padding: 14px 18px 6px;
  background: #121110;
  box-shadow: var(--sv-shadow-lg);
  --sv-line: rgba(255, 255, 255, 0.12);
}
.td-label {
  display: block;
  margin-bottom: 4px;
  color: var(--sv-butter);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.td-list li:last-child {
  border-bottom: 0;
}

/*----- 12.4 Cooking Videos -----*/
.sv-video {
  height: 100%;
}
.vd-media {
  position: relative;
  overflow: hidden;
}
.vd-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.sv-video:hover .vd-media img {
  transform: scale(1.04);
}
.vd-media .sv-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66px;
  height: 66px;
  font-size: 17px;
  transform: translate(-50%, -50%);
}
.vd-media .sv-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}
.vd-len {
  position: absolute;
  left: 0;
  top: 0;
  padding: 7px 14px;
  background: var(--sv-butter);
  color: #0E0D0B;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vd-body {
  padding-top: 18px;
}
.vd-by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--sv-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vd-by .sv-face {
  width: 32px;
  height: 32px;
}
.drop-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px 40px;
}
.drop-band .sv-ico {
  width: 80px;
  height: 80px;
}
.db-copy {
  flex: 1;
  min-width: 240px;
}
.db-copy p {
  margin: 6px 0 0;
}
.drop-band .drop-count {
  width: 280px;
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
  border-color: rgba(14, 13, 11, 0.18);
  background: rgba(255, 255, 255, 0.55);
}

/*======================
13. Inner Pages
========================*/
/*----- 13.1 Journal -----*/
.journal-rows .sv-post.is-wide {
  padding-bottom: 50px;
  border-bottom: 1px solid var(--sv-line);
}
.journal-rows .sv-post.is-quote {
  padding: 50px 54px;
}
.sb-links li {
  border-bottom: 1px solid var(--sv-line);
}
.sb-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15.5px;
  text-align: left;
}
.sb-links a span {
  color: var(--sv-muted);
  font-family: var(--sv-ff-body);
  font-size: 13px;
  font-weight: 700;
}
.sb-links a i {
  font-size: 11px;
  color: var(--sv-muted);
  transition: transform 0.3s var(--sv-ease);
}
.sb-links a:hover i {
  transform: translateX(4px);
}
.sb-links a.is-current {
  color: var(--sv-accent-text);
}
.sb-recent li + li {
  margin-top: 16px;
}
.sb-recent a {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  align-items: center;
  text-align: left;
  line-height: 1.35;
}
.sb-recent img {
  width: 76px;
  height: 76px;
  object-fit: cover;
}
.sb-recent b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 14.5px;
  font-weight: 400;
}
.sb-recent small {
  color: var(--sv-muted);
  font-size: 13px;
}
.sb-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.sb-tags a {
  padding: 7px 14px;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sb-tags a:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sb-search {
  text-align: left;
}
.sb-search .sb-title {
  display: block;
  text-align: center;
}
.article-hero {
  margin: 0 0 30px;
  overflow: hidden;
}
.article-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 10 / 5.8;
  object-fit: cover;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-bottom: 30px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--sv-line);
  color: var(--sv-heading);
}
.article-body h2 {
  margin: 40px 0 16px;
  font-size: clamp(24px, 2vw, 30px);
}
.article-quote {
  margin: 40px 0;
  padding: 34px 40px;
  background: var(--sv-cream);
  border-left: 4px solid var(--sv-butter-deep);
}
.article-quote p {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 22px;
  font-style: italic;
  line-height: 1.5;
}
.article-quote cite {
  display: block;
  margin-top: 12px;
  color: var(--sv-muted);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 30px 0;
}
.article-pair img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
}
.article-rows,
.story-rows {
  margin: 24px 0;
}
.article-rows div,
.story-rows div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sv-line);
}
.article-rows div:first-child,
.story-rows div:first-child {
  border-top: 1px solid var(--sv-line);
}
.article-rows dt,
.story-rows dt {
  color: var(--sv-heading);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.article-rows dd,
.story-rows dd {
  margin: 0;
}
.article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
}
.article-foot .rp-tags {
  margin: 0;
  padding: 0;
  border: 0;
}
.author-box {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 50px;
  padding: 34px;
  background: var(--sv-mist);
}
.author-box img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box h2 {
  margin-bottom: 8px;
}
.author-box p {
  margin-bottom: 12px;
  font-size: 15.5px;
}

/*----- 13.2 Accounts -----*/
.account-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: 1120px;
  margin: 0 auto;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line-2);
}
.account-side {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  padding: 50px;
  overflow: hidden;
}
.as-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 13, 11, 0.2), rgba(14, 13, 11, 0.9) 70%);
}
.account-side h2 {
  margin-bottom: 14px;
}
.account-side p {
  margin-bottom: 22px;
}
.account-side .sv-avatars .faces img,
.account-side .sv-avatars .faces .more {
  border-color: #121110;
}
.account-form {
  padding: 56px 54px;
}
.account-form h2 {
  margin-bottom: 26px;
}
.account-note {
  margin: -14px 0 22px;
  font-size: 15px;
}
.pass-toggle {
  position: absolute;
  right: 12px;
  top: 41px;
  width: 36px;
  height: 36px;
  color: var(--sv-muted);
}
.pass-meter {
  position: relative;
  height: 4px;
  margin-top: 10px;
  background: var(--sv-line);
}
.pass-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--sv-butter-deep);
  transition: width 0.4s var(--sv-ease);
}
.pass-meter span[data-score="4"] {
  background: #3F9D63;
}
.pass-hint {
  margin: 6px 0 0;
  color: var(--sv-muted);
  font-size: 13.5px;
}
.account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.account-row a,
.account-switch a {
  color: var(--sv-heading);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--sv-butter-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.account-terms {
  margin: 4px 0 22px;
}
.account-switch {
  margin: 22px 0 0;
  text-align: center;
}

/*----- 13.3 About & Cooks -----*/
.story-photos {
  position: relative;
  padding: 0 70px 70px 0;
}
.story-photos img {
  display: block;
  object-fit: cover;
}
.sp-a {
  width: 100%;
  aspect-ratio: 10 / 7.6;
}
.sp-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1 / 1;
  border: 10px solid var(--sv-bg);
}
.sp-badge {
  position: absolute;
  left: 26px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  padding: 18px 22px;
  background: var(--sv-butter);
  color: #0E0D0B;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}
.sp-badge b {
  font-family: var(--sv-ff-head);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0;
}
.sv-story h2 {
  margin-bottom: 18px;
}
.figures-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.figures-row li {
  padding: 6px 20px;
  text-align: center;
}
.figures-row li + li {
  border-left: 1px solid rgba(14, 13, 11, 0.2);
}
.figures-row b {
  display: block;
  color: #0E0D0B;
  font-family: var(--sv-ff-head);
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.15;
}
.figures-row li > span {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tip-card.is-step {
  position: relative;
}
.tc-no {
  position: absolute;
  top: 26px;
  right: 30px;
  color: var(--sv-line-2);
  font-family: var(--sv-ff-head);
  font-size: 46px;
  line-height: 1;
}
.partner-box.is-mist {
  background: var(--sv-mist);
}
.partner-box .sv-avatars {
  margin: 0 auto 28px;
}
.sv-btns.is-centered {
  justify-content: center;
}
.profile-card {
  overflow: hidden;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line-2);
}
.pf-cover img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.pf-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  padding: 0 40px 34px;
}
.pf-face {
  margin-top: -56px;
}
.pf-face img {
  width: 120px;
  height: 120px;
}
.pf-name {
  flex: 1;
  min-width: 220px;
  padding-top: 20px;
}
.pf-name .ck-role {
  margin: 4px 0 0;
}
.pf-stats {
  display: flex;
  margin: 20px 0 0;
}
.pf-stats div {
  display: flex;
  flex-direction: column-reverse;
  padding: 0 22px;
  text-align: center;
}
.pf-stats div + div {
  border-left: 1px solid var(--sv-line);
}
.pf-stats dt {
  color: var(--sv-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pf-stats dd {
  margin: 0;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 26px;
}
.pf-body .sv-social {
  padding-top: 20px;
}
.pf-about {
  margin-top: 70px;
}
.pf-about h2 {
  margin-bottom: 18px;
}

/*----- 13.4 Work With Us -----*/
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 100%;
  padding: 36px 30px 32px;
  background: var(--sv-surface);
  box-shadow: 0 0 0 1px var(--sv-line-2);
  transition: box-shadow 0.4s var(--sv-ease), transform 0.4s var(--sv-ease);
}
.svc-card:hover {
  color: inherit;
  transform: translateY(-6px);
  box-shadow: var(--sv-shadow-lg);
}
.svc-no {
  position: absolute;
  top: 24px;
  right: 26px;
  color: var(--sv-line-2);
  font-family: var(--sv-ff-head);
  font-size: 34px;
  line-height: 1;
}
.svc-card .sv-ico {
  width: 70px;
  height: 70px;
  margin-bottom: 8px;
}
.svc-name {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 21px;
}
.svc-blurb {
  flex: 1;
  font-size: 15.5px;
}
.svc-price {
  margin: 8px 0 10px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 26px;
}
.svc-price small {
  color: var(--sv-muted);
  font-family: var(--sv-ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.process-list li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sv-line-2);
}
.process-list li:first-child {
  padding-top: 0;
}
.pr-no {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 40px;
  line-height: 1;
}
.process-list h3 {
  margin-bottom: 8px;
}
.svc-article > h2 {
  margin-bottom: 18px;
}
.svc-article > h3 {
  margin: 40px 0 14px;
}
.price-rows {
  margin-bottom: 22px;
  text-align: left;
}
.price-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sv-line);
  line-height: 1.3;
}
.price-rows span b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-weight: 400;
}
.price-rows small {
  color: var(--sv-muted);
  font-size: 13px;
}
.price-rows li > b {
  color: var(--sv-heading);
  font-size: 18px;
}
.sb-enquiry {
  text-align: left;
}
.sb-enquiry .sb-title {
  text-align: center;
}

/*----- 13.5 Gallery, FAQ & Contact -----*/
.sv-shot {
  position: relative;
  display: block;
  overflow: hidden;
}
.sv-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.9;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.sv-shot i {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: var(--sv-butter);
  color: #0E0D0B;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.45s var(--sv-ease);
}
.sv-shot:hover img {
  transform: scale(1.06);
}
.sv-shot:hover i {
  opacity: 1;
  transform: none;
}
.faq-side {
  position: sticky;
  top: 100px;
}
.faq-group + .faq-group {
  margin-top: 56px;
}
.faq-group .sv-rule-title {
  margin-bottom: 10px;
}
.contact-rows {
  margin-bottom: 30px;
}
.contact-form h2 {
  margin-bottom: 24px;
}
.sv-map iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(0.4);
}

/*----- 13.6 Coming Soon & 404 -----*/
.sv-soon {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 80px 0;
  overflow: hidden;
  text-align: center;
}
.soon-photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.sv-soon .sv-gl {
  z-index: -1;
}
.soon-card {
  max-width: 760px;
  margin: 0 auto;
}
.soon-card .sv-logo {
  margin-bottom: 40px;
}
.soon-card .sv-logo img {
  height: 64px;
}
.soon-card h1 {
  margin-bottom: 20px;
}
.soon-count {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 560px;
  margin: 40px auto;
  border: 1px solid var(--sv-line-2);
}
.soon-count li {
  padding: 18px 6px;
}
.soon-count li + li {
  border-left: 1px solid var(--sv-line);
}
.soon-count b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 400;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.soon-count small {
  color: var(--sv-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sv-soon .sv-newsletter {
  margin: 0 auto 30px;
}
.sv-soon .sv-social {
  justify-content: center;
}
.sv-error {
  position: relative;
  isolation: isolate;
  padding: 90px 0 110px;
  overflow: hidden;
  text-align: center;
}
.error-card {
  max-width: 760px;
  margin: 0 auto;
}
.err-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 26px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: clamp(110px, 14vw, 200px);
  line-height: 1;
}
.err-plate {
  position: relative;
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  border: 0.08em solid currentColor;
  border-radius: 50%;
}
.err-yolk {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--sv-butter);
  transform: translate(-50%, -50%);
  animation: sv-yolk 3.2s ease-in-out infinite;
}
@keyframes sv-yolk {
  50% {
    transform: translate(-42%, -56%) scale(1.06);
  }
}
.error-card h1 {
  margin-bottom: 18px;
}
.err-search {
  max-width: 520px;
  margin: 30px auto;
}
@media (prefers-reduced-motion: reduce) {
  .err-yolk,
  li.is-done .tm-ring {
    animation: none;
  }
}

/*======================
14. Shop
========================*/
/*----- 14.1 Shared Shop Pieces -----*/
.sv-panel {
  padding: 34px;
  border: 1px solid var(--sv-line-2);
  background: var(--sv-surface);
}
.sv-panel h2,
.sv-panel h3 {
  margin-bottom: 20px;
}
.sv-kv {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sv-kv li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--sv-line);
}
.sv-kv li span {
  color: var(--sv-muted);
}
.sv-kv li b {
  color: var(--sv-heading);
  font-weight: 700;
  text-align: right;
}
.sv-qty {
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 4px;
  background: var(--sv-tonal);
}
.sv-qty button {
  width: 44px;
  height: 100%;
  background: var(--sv-surface);
  color: var(--sv-heading);
  font-size: 11px;
}
.sv-qty button:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.sv-qty input {
  width: 52px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 18px;
  text-align: center;
  -moz-appearance: textfield;
}
.sv-qty input::-webkit-outer-spin-button,
.sv-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sv-qty.is-sm {
  height: 42px;
}
.sv-qty.is-sm button {
  width: 32px;
}
.sv-qty.is-sm input {
  width: 38px;
  font-size: 16px;
}
.choice-list {
  display: grid;
  gap: 10px;
}
.choice-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--sv-line-2);
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.choice-card input {
  position: absolute;
  opacity: 0;
}
.choice-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
}
.choice-body b {
  display: block;
  color: var(--sv-heading);
}
.choice-body span {
  font-size: 14.5px;
}
.choice-tick {
  color: var(--sv-heading);
  opacity: 0;
}
.choice-card input:checked ~ .choice-tick {
  opacity: 1;
}
.choice-card input:checked ~ .choice-ico {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.choice-card input:focus-visible ~ .choice-body {
  outline: 3px solid var(--sv-butter-deep);
  outline-offset: 4px;
}
.choice-list.is-pay .choice-card {
  grid-template-columns: 1fr 20px;
}

/*----- 14.2 Shop Grid -----*/
.shop-side {
  display: grid;
  gap: 30px;
}
.shop-side .rf-group:last-child {
  border-bottom: 0;
}
.shop-cats {
  display: grid;
  gap: 2px;
}
.shop-cats button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15px;
  text-align: left;
}
.shop-cats button span {
  color: var(--sv-muted);
  font-family: var(--sv-ff-body);
  font-size: 13px;
  font-weight: 700;
}
.shop-cats button:hover {
  background: var(--sv-tonal);
}
.shop-cats button.is-active {
  background: var(--sv-cream);
}
.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--sv-muted);
  font-size: 13px;
}
.side-best li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--sv-line);
  line-height: 1.3;
}
.side-best img {
  width: 64px;
  height: 64px;
  object-fit: cover;
}
.side-best b {
  display: block;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 14.5px;
  font-weight: 400;
}
.side-best span {
  color: var(--sv-muted);
  font-size: 14px;
}
.sv-product {
  height: 100%;
}
.pd-media {
  position: relative;
  overflow: hidden;
  background: var(--sv-product);
  box-shadow: 0 0 0 1px var(--sv-line);
}
.pd-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease);
}
.sv-product:hover .pd-media img {
  transform: scale(1.04);
}
.pd-wish {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: #FFFFFF;
  color: #0E0D0B;
  box-shadow: 0 6px 14px rgba(14, 13, 11, 0.12);
}
.pd-add {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  background: var(--sv-ink);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(calc(100% + 16px));
  transition: transform 0.5s var(--sv-ease), background-color 0.3s ease, color 0.3s ease;
}
.sv-product:hover .pd-add,
.pd-add:focus {
  transform: none;
}
.pd-add:hover {
  background: var(--sv-butter);
  color: var(--sv-ink);
}
.pd-body {
  padding-top: 18px;
}
.pd-cat {
  display: block;
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pd-name {
  margin: 4px 0 8px;
  font-size: 19px;
}
.pd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pd-price {
  color: var(--sv-heading);
  font-size: 17px;
  font-weight: 700;
}
.grid-empty {
  padding: 40px;
  background: var(--sv-mist);
  text-align: center;
}

/*----- 14.3 Product Page -----*/
.pp-main {
  overflow: hidden;
  background: var(--sv-product);
  box-shadow: 0 0 0 1px var(--sv-line);
}
.pp-main img {
  display: block;
  width: 100%;
  aspect-ratio: 900 / 1124;
  object-fit: cover;
}
.pp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.pp-thumbs button {
  border: 2px solid transparent;
  background: var(--sv-product);
  transition: border-color 0.3s ease;
}
.pp-thumbs button.is-active,
.pp-thumbs button:hover {
  border-color: var(--sv-butter-deep);
}
.pp-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pp-info h2 {
  margin: 6px 0 14px;
}
.pp-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--sv-muted);
  font-size: 14px;
}
.pp-price {
  margin-bottom: 18px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 32px;
}
.pp-info .sv-kv {
  margin: 22px 0 26px;
}
.pp-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.pp-buy .sv-round {
  width: 54px;
  height: 54px;
}
.pp-tabs {
  margin-top: 80px;
}
.pp-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--sv-line-2);
}
.pp-tablist button {
  position: relative;
  padding: 14px 22px;
  color: var(--sv-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pp-tablist button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--sv-butter-deep);
  transform: scaleX(0);
  transition: transform 0.4s var(--sv-ease);
}
.pp-tablist button.is-active {
  color: var(--sv-heading);
}
.pp-tablist button.is-active::after {
  transform: none;
}
.review-list li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sv-line);
}
.review-list img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.review-list b {
  display: block;
  color: var(--sv-heading);
}
.review-list p {
  margin: 6px 0 0;
}

/*----- 14.4 Bag, Checkout & Wishlist -----*/
.bag-line {
  display: grid;
  grid-template-columns: 96px 1fr auto auto 36px;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
  border-bottom: 1px solid var(--sv-line);
}
.bag-lines.is-wish .bag-line {
  grid-template-columns: 96px 1fr auto 36px;
}
.bl-img img {
  display: block;
  width: 96px;
  height: 110px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--sv-line);
}
.bl-cat {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bl-name {
  margin: 2px 0 4px;
  font-size: 18px;
}
.bl-price {
  color: var(--sv-muted);
  font-size: 14.5px;
}
.bl-total {
  min-width: 80px;
  color: var(--sv-heading);
  font-size: 17px;
  text-align: right;
}
.bl-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sv-tonal);
  color: var(--sv-heading);
  font-size: 12px;
}
.bl-remove:hover {
  background: var(--sv-ink);
  color: var(--sv-butter);
}
.cart-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}
.coupon-form {
  display: flex;
  flex-wrap: wrap;
  max-width: 440px;
}
.coupon-form input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--sv-line-2);
  border-right: 0;
  background: var(--sv-surface);
  color: var(--sv-heading);
  font-family: var(--sv-ff-body);
  font-size: 16px;
}
.coupon-form input:focus {
  border-color: var(--sv-heading);
  outline: 0;
}
.coupon-form .form-status {
  flex-basis: 100%;
}
.order-summary {
  position: sticky;
  top: 100px;
}
.ship-meter {
  position: relative;
  height: 5px;
  background: var(--sv-line);
}
.ship-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--sv-butter-deep);
  transition: width 0.6s var(--sv-ease);
}
.ship-note {
  margin: 10px 0 14px;
  font-size: 14.5px;
}
.ship-note b {
  color: var(--sv-heading);
}
.order-lines li {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sv-line);
}
.ol-img {
  position: relative;
}
.ol-img img {
  width: 58px;
  height: 64px;
  object-fit: cover;
}
.ol-img b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 11px;
  line-height: 20px;
  text-align: center;
}
.ol-name {
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 15px;
}
.order-lines li > b {
  color: var(--sv-heading);
}
.sum-total {
  display: flex;
  justify-content: space-between;
  margin: 16px 0 22px;
  color: var(--sv-heading);
  font-family: var(--sv-ff-head);
  font-size: 22px;
}
.co-terms {
  margin: 18px 0;
}
.cart-empty,
.order-done {
  padding: 60px 40px;
  text-align: center;
}
.cart-empty .sv-ico,
.order-done .sv-ico {
  width: 90px;
  height: 90px;
  margin-bottom: 14px;
}
.cart-empty p,
.order-done p {
  max-width: 480px;
  margin: 12px auto 26px;
}

/*======================
15. Subheader
========================*/
/* Inner-page title band on the blog's mist: the breadcrumb, the serif title with its butter underline and a lead,
   and on the right three recipe cards fanned out (the preloader's shuffle, at rest). Spice motes drift at the edges. */
.sv-subheader {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--sv-mist);
}
.sub-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 40px;
  min-height: 380px;
  padding: 60px 0;
}
.sub-copy h1 {
  max-width: 760px;
}
.sub-copy .sv-lead {
  max-width: 560px;
  margin-top: 20px;
}
.sub-fan {
  position: relative;
  height: 290px;
}
.fan-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 190px;
  margin-left: -95px;
  padding: 9px 9px 28px;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(14, 13, 11, 0.14), 0 0 0 1px rgba(14, 13, 11, 0.05);
  transform-origin: 50% 120%;
}
.fan-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
}
.fan-card.is-1 {
  transform: rotate(-14deg) translateX(-30px);
}
.fan-card.is-2 {
  transform: rotate(13deg) translateX(30px);
}
.fan-card.is-3 {
  z-index: 2;
  transform: translateY(-14px);
}
.fan-card.is-3::after {
  content: "";
  position: absolute;
  left: 9px;
  bottom: 10px;
  width: 46%;
  height: 7px;
  background: var(--sv-butter);
}
[data-theme="dark"] .fan-card {
  background: #23201B;
}

/*======================
16. Footer
========================*/
/* The night footer: the @savorly.kitchen photo strip, an invite to the weekly notes beside the brand object - a whisk
   stirring in light - then four widget columns and the copyright row. */
.sv-footer {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
/*----- 16.1 Photo Strip -----*/
.footer-insta {
  position: relative;
}
.insta-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.insta-row a {
  position: relative;
  display: block;
  overflow: hidden;
}
.insta-row img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.9s var(--sv-ease), opacity 0.4s ease;
}
.insta-row a i {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #FFFFFF;
  font-size: 24px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.35s ease, transform 0.45s var(--sv-ease);
}
.insta-row a:hover img {
  transform: scale(1.06);
  opacity: 0.55;
}
.insta-row a:hover i {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.insta-tag {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--sv-butter);
  color: var(--sv-ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.insta-tag:hover {
  background: #FFFFFF;
  color: var(--sv-ink);
}

/*----- 16.2 Invite & Whisk -----*/
.footer-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 90px 0 70px;
  border-bottom: 1px solid var(--sv-line);
}
.fi-title {
  max-width: 560px;
  font-size: clamp(30px, 2.6vw, 44px);
  line-height: 1.25;
}
.fi-copy p {
  max-width: 480px;
  margin: 18px 0 30px;
}
.sv-newsletter {
  display: flex;
  flex-wrap: wrap;
  max-width: 540px;
}
.sv-newsletter .sv-input {
  flex: 1;
  min-width: 220px;
  padding-right: 20px;
  border-color: var(--sv-line-2);
  background: rgba(255, 255, 255, 0.04);
  color: #F4EFE6;
}
.sv-newsletter .sv-btn {
  height: 56px;
}
.sv-newsletter .form-status {
  flex-basis: 100%;
}
.fi-stage {
  position: relative;
  isolation: isolate;
  height: 380px;
}
.fi-next {
  position: absolute;
  right: 0;
  bottom: 6px;
  color: var(--sv-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/*----- 16.3 Widgets -----*/
.footer-widgets {
  padding: 64px 0 56px;
}
.sv-footer .widget h2 {
  margin-bottom: 22px;
  font-family: var(--sv-ff-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.widget-about .sv-logo img {
  height: 50px;
}
.widget-about p {
  max-width: 340px;
  margin: 22px 0 24px;
}
.footer-links li + li {
  margin-top: 8px;
}
.footer-links a {
  color: var(--sv-text);
}
.footer-links a:hover {
  color: var(--sv-butter);
}
.footer-rows {
  margin: 0;
}
.footer-rows div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--sv-line);
}
.footer-rows div:first-child {
  padding-top: 0;
}
.footer-rows dt {
  color: var(--sv-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-rows dd {
  margin: 0;
  color: #F4EFE6;
}
.footer-rows a:hover {
  color: var(--sv-butter);
}

/*----- 16.4 Copyright -----*/
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 30px;
  border-top: 1px solid var(--sv-line);
  font-size: 14.5px;
}
.footer-bottom p {
  margin: 0;
}
.footer-bottom a:hover {
  color: var(--sv-butter);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}