:root {
  --guide-bg: #f5f1e9;
  --guide-paper: #fffdf8;
  --guide-text: #35251c;
  --guide-muted: #74655d;
  --guide-line: #e7d7c4;
  --guide-accent: #8d3e1f;
  --guide-accent-dark: #5d2815;
  --guide-gold: #c9902f;
  --guide-soft: #f8ead5;
  --guide-shadow: 0 18px 45px rgba(63, 35, 21, .13);
}

* { box-sizing: border-box; }

body.guide-page {
  margin: 0;
  background:
    radial-gradient(circle at 8% 0, rgba(201, 144, 47, .16), transparent 29rem),
    linear-gradient(180deg, #fff 0, var(--guide-bg) 28rem, #eee6db 100%);
  color: var(--guide-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.62;
}

.guide-hero {
  padding: 52px 18px 78px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(74, 31, 16, .95), rgba(130, 58, 28, .90)),
    url('/assets/common/images/page-harvest-banner.webp') center 66% / cover no-repeat;
  border-bottom: 4px solid var(--guide-gold);
  box-shadow: 0 18px 42px rgba(46, 24, 14, .18);
}

.guide-wrap { max-width: 1160px; margin: 0 auto; }

.guide-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #ffe2a6;
  font-weight: 900;
}

.guide-hero h1 {
  max-width: 920px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.15rem, 6vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.guide-hero p {
  max-width: 820px;
  margin: 16px 0 0;
  color: #f8e9df;
  font-size: 1.08rem;
  font-weight: 650;
}

.guide-main {
  position: relative;
  z-index: 1;
  margin-top: -38px;
  padding: 0 18px 58px;
}

.guide-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 14px;
  background: rgba(255, 253, 248, .96);
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  box-shadow: var(--guide-shadow);
}

.guide-filter,
.guide-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--guide-line);
  border-radius: 999px;
  background: #fff;
  color: var(--guide-text);
  font: inherit;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.guide-filter:hover,
.guide-filter:focus-visible,
.guide-filter.is-active {
  border-color: var(--guide-accent);
  background: var(--guide-soft);
  color: var(--guide-accent-dark);
  outline: none;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.guide-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--guide-paper);
  border: 1px solid var(--guide-line);
  border-radius: 22px;
  box-shadow: var(--guide-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.guide-card:hover {
  transform: translateY(-3px);
  border-color: #d7b98e;
  box-shadow: 0 24px 54px rgba(63,35,21,.17);
}

.guide-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e9ddd0;
}

.guide-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 20%;
  transition: transform .25s ease;
}

.guide-card:hover .guide-card-media img { transform: scale(1.025); }

.guide-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #f3dfbd, #bd744a);
  color: #4b2414;
  font: 900 1.35rem/1.15 Georgia, serif;
  text-align: center;
}

.guide-card-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }

.guide-card-tags,
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.guide-tag,
.guide-meta-item {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--guide-soft);
  color: #6d361e;
  font-size: .82rem;
  font-weight: 900;
}

.guide-tag.is-featured { background: #ffe3a8; color: #5a3500; }

.guide-card h2 {
  margin: 13px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  line-height: 1.12;
  letter-spacing: -.025em;
}

.guide-card h2 a { color: var(--guide-text); text-decoration: none; }
.guide-card h2 a:hover { color: var(--guide-accent); }

.guide-card p { margin: 0; color: var(--guide-muted); }
.guide-card .guide-button { margin-top: auto; padding-top: 11px; padding-bottom: 11px; }

.guide-button {
  border-color: var(--guide-accent);
  background: linear-gradient(135deg, var(--guide-accent), var(--guide-accent-dark));
  color: #fff;
  box-shadow: 0 8px 18px rgba(93,40,21,.18);
}

.guide-button:hover,
.guide-button:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #a54a25, #6b2d17);
  outline: none;
}

.guide-button.is-secondary {
  background: #fff;
  color: var(--guide-accent-dark);
  border-color: var(--guide-line);
  box-shadow: none;
}

.guide-article {
  overflow: hidden;
  background: var(--guide-paper);
  border: 1px solid var(--guide-line);
  border-radius: 24px;
  box-shadow: var(--guide-shadow);
}

.guide-article-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
}

.guide-article-image {
  align-self: start;
  background: #e9ddd0;
}

.guide-article-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.guide-article-intro { padding: clamp(24px, 5vw, 52px); align-self: center; }

.guide-article-intro h1 {
  margin: 12px 0 14px;
  font: 900 clamp(2rem, 5vw, 3.7rem)/1.02 Georgia, "Times New Roman", serif;
  letter-spacing: -.05em;
}

.guide-lead { margin: 0 0 18px; color: var(--guide-muted); font-size: 1.12rem; }

.guide-content {
  display: grid;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr);
  gap: 30px;
  padding: clamp(22px, 5vw, 52px);
  border-top: 1px solid var(--guide-line);
}

.guide-section {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  background: #fff;
}

.guide-section + .guide-section { margin-top: 18px; }

.guide-section h2 {
  margin: 0 0 14px;
  color: var(--guide-accent-dark);
  font: 900 1.55rem/1.1 Georgia, "Times New Roman", serif;
}

.guide-ingredients { margin: 0; padding-left: 21px; }
.guide-ingredients li { margin: 8px 0; }

.guide-steps { list-style: none; counter-reset: guide-step; margin: 0; padding: 0; }
.guide-steps li {
  counter-increment: guide-step;
  position: relative;
  min-height: 48px;
  padding: 7px 0 18px 58px;
  border-bottom: 1px dashed #dfc7ab;
}
.guide-steps li + li { margin-top: 12px; }
.guide-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-steps li::before {
  content: counter(guide-step);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--guide-accent-dark);
  color: #fff;
  font-weight: 950;
}

.guide-download {
  margin: 0 clamp(22px, 5vw, 52px) clamp(22px, 5vw, 52px);
  padding: clamp(20px, 4vw, 30px);
  border: 2px solid #d8b16d;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff4da, #fffdf8);
}

.guide-download h2 { margin: 0 0 8px; font: 900 1.55rem Georgia, serif; }
.guide-download p { margin: 0 0 16px; color: var(--guide-muted); }
.guide-download-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.guide-download-preview {
  display: block;
  width: min(100%, 380px);
  margin: 18px 0 0;
  border: 1px solid #d7bd99;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(65,38,20,.13);
}

.guide-empty {
  padding: 34px;
  border: 1px solid var(--guide-line);
  border-radius: 20px;
  background: var(--guide-paper);
  box-shadow: var(--guide-shadow);
  text-align: center;
}

.guide-back { margin-bottom: 14px; }

.guide-footer {
  padding: 22px 16px 34px;
  color: var(--guide-muted);
  text-align: center;
}
.guide-footer a { color: var(--guide-accent-dark); font-weight: 800; }

@media (max-width: 960px) {
  .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-article-top { grid-template-columns: 1fr; }
  .guide-article-image { min-height: 0; }
}

@media (max-width: 720px) {
  .guide-hero { padding: 38px 15px 62px; }
  .guide-main { margin-top: -26px; padding: 0 13px 42px; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-toolbar { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .guide-filter { flex: 0 0 auto; }
  .guide-content { grid-template-columns: 1fr; gap: 18px; }
  .guide-download-actions .guide-button { width: 100%; }
  .guide-article-intro,
  .guide-content { padding: 21px; }
  .guide-download { margin: 0 21px 21px; }
}


.lk-ai-watermark-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(32%, 220px);
  height: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}

.guide-card-media,
.guide-article-image {
  position: relative;
}