/* ============================================================
   Home Kitchen Insider — Main Stylesheet
   Palette: #FAFAF7 bg | #2D6A4F green | #E07A5F terracotta
   Fonts: Playfair Display (headings) · Inter (body) · Hind Siliguri (Bangla)
   ============================================================ */

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:        #2D6A4F;
  --green-dark:   #1f4f3a;
  --green-light:  #e8f5ee;
  --terracotta:   #E07A5F;
  --terra-dark:   #c45f44;
  --bg:           #FAFAF7;
  --bg-cream:     #F4F1EC;
  --card-bg:      #FFFFFF;
  --border:       #E8E6E0;
  --text:         #1A1A1A;
  --text-muted:   #6B7280;
  --text-light:   #9CA3AF;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:       0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.1);
  --radius:       10px;
  --radius-sm:    6px;
  --radius-lg:    16px;
  --container:    1200px;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-bangla:  'Hind Siliguri', 'Inter', sans-serif;
  --transition:   0.2s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.lang-bn,
body.lang-bn p,
body.lang-bn li,
body.lang-bn h1,
body.lang-bn h2,
body.lang-bn h3 {
  font-family: var(--font-bangla);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--green-dark); }
ul { list-style: none; }

/* ── Container ──────────────────────────────────────────────── */
.hki-container { max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; }

/* ── Skip Link ──────────────────────────────────────────────── */
.skip-link { position: absolute; top: -40px; left: 0; background: var(--green); color: #fff; padding: .5rem 1rem; z-index: 9999; transition: top .2s; }
.skip-link:focus { top: 0; }

/* ============================================================
   HEADER
   ============================================================ */
.hki-site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,247,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.hki-header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 64px;
}

/* Logo */
.hki-logo-text {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.hki-logo-text:hover { color: var(--green); }
.hki-logo-icon { font-size: 1.4rem; color: var(--green); }
.hki-site-branding { flex-shrink: 0; }
.hki-site-branding .custom-logo { height: 40px; width: auto; }

/* Nav */
.hki-main-nav { margin-left: auto; }
.hki-nav-list { display: flex; gap: .25rem; align-items: center; }
.hki-nav-list a {
  display: block;
  padding: .4rem .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.hki-nav-list a:hover,
.hki-nav-list .current-menu-item > a { background: var(--green-light); color: var(--green); }
.hki-nav-list .menu-item-has-children { position: relative; }
.hki-nav-list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 200px;
  padding: .5rem;
  z-index: 200;
}
.hki-nav-list .menu-item-has-children:hover .sub-menu { display: block; }
.hki-nav-list .sub-menu a { color: var(--text); }
.hki-nav-list .sub-menu a:hover { background: var(--green-light); color: var(--green); }

/* Language switcher */
.hki-lang-switcher { display: flex; gap: .25rem; flex-shrink: 0; }
.hki-lang-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .25rem .65rem;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
  font-family: inherit;
}
.hki-lang-btn.active,
.hki-lang-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
/* Polylang list */
.hki-lang-switcher ul { display: flex; gap: .25rem; }
.hki-lang-switcher ul li { list-style: none; }
.hki-lang-switcher ul a {
  display: block;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: .25rem .65rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.hki-lang-switcher ul .current-lang a { background: var(--green); border-color: var(--green); color: #fff; }

/* Mobile menu toggle */
.hki-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  margin-left: auto;
}
.hki-menu-icon,
.hki-menu-icon::before,
.hki-menu-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .2s;
}
.hki-menu-icon::before,
.hki-menu-icon::after { content: ''; margin-top: 5px; }

/* Category strip */
.hki-category-strip {
  border-top: 1px solid var(--border);
  background: #fff;
  font-size: .82rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.hki-category-strip::-webkit-scrollbar { display: none; }
.hki-category-nav {
  display: flex;
  gap: 0;
  white-space: nowrap;
  padding: 0;
}
.hki-category-nav li a {
  display: block;
  padding: .55rem 1rem;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.hki-category-nav li a:hover { color: var(--green); border-color: var(--green); }

/* ============================================================
   HERO
   ============================================================ */
.hki-hero {
  text-align: center;
  padding: 5rem 1.5rem 4.5rem;
  background: linear-gradient(160deg, #f0f7f3 0%, var(--bg) 60%);
  border-bottom: 1px solid var(--border);
}
.hki-hero-badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .3rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(45,106,79,.2);
  margin-bottom: 1.5rem;
}
.hki-hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  max-width: 700px;
  margin: 0 auto .75rem;
}
.hki-hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.hki-hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.hki-trust-strip { padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.hki-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hki-trust-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: center;
}
.hki-trust-icon {
  font-size: 1.5rem;
  color: var(--green);
  flex-shrink: 0;
}
.hki-trust-icon--orange { color: var(--terracotta); }
.hki-trust-item div { text-align: left; }
.hki-trust-item strong { display: block; font-weight: 700; font-size: 1.1rem; }
.hki-trust-item span { font-size: .82rem; color: var(--text-muted); }

/* ============================================================
   SECTIONS
   ============================================================ */
.hki-section { padding: 4rem 0; }
.hki-section--cream { background: var(--bg-cream); }
.hki-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 1.75rem;
  color: var(--text);
}
.hki-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.hki-section-header .hki-section-title { margin-bottom: 0; }
.hki-see-all {
  font-size: .875rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}
.hki-see-all:hover { text-decoration: underline; }

/* ============================================================
   BUTTONS
   ============================================================ */
.hki-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .9rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform .15s;
  white-space: nowrap;
}
.hki-btn:hover { transform: translateY(-1px); }
.hki-btn:active { transform: translateY(0); }

.hki-btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.hki-btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.hki-btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
.hki-btn-outline:hover { background: var(--green-light); border-color: var(--green); color: var(--green); }

/* Amazon — colour overridden by CSS var set from Customizer */
.hki-btn-amazon { background: var(--amazon-btn, #FF9900); color: #fff; border-color: var(--amazon-btn, #FF9900); font-size: .85rem; }
.hki-btn-amazon:hover { filter: brightness(.88); color: #fff; }

/* Daraz BD — colour overridden by CSS var set from Customizer */
.hki-btn-bd { background: var(--daraz-btn, #F85606); color: #fff; border-color: var(--daraz-btn, #F85606); font-size: .85rem; }
.hki-btn-bd:hover { filter: brightness(.88); color: #fff; }

/* Extra affiliate platforms 1–3 — colours from Customizer via CSS vars */
.hki-btn-extra   { font-size: .85rem; color: #fff; }
.hki-btn-extra-1 { background: var(--extra-btn-1, #2D6A4F); border-color: var(--extra-btn-1, #2D6A4F); }
.hki-btn-extra-2 { background: var(--extra-btn-2, #2D6A4F); border-color: var(--extra-btn-2, #2D6A4F); }
.hki-btn-extra-3 { background: var(--extra-btn-3, #2D6A4F); border-color: var(--extra-btn-3, #2D6A4F); }
.hki-btn-extra:hover { filter: brightness(.88); color: #fff; }

.hki-btn-ghost { background: transparent; color: var(--green); border-color: var(--green-light); font-size: .85rem; }
.hki-btn-ghost:hover { background: var(--green-light); }

/* ============================================================
   CATEGORY GRID (Homepage)
   ============================================================ */
.hki-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.hki-cat-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  color: var(--text);
}
.hki-cat-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--green);
  color: var(--text);
}
.hki-cat-icon { font-size: 2.25rem; margin-bottom: .75rem; display: block; }
.hki-cat-card h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .35rem;
}
.hki-cat-card p { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

/* ============================================================
   PRODUCT CARDS GRID
   ============================================================ */
.hki-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.hki-product-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.hki-product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.hki-product-card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--bg-cream);
}
.hki-product-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hki-product-card:hover .hki-product-card-thumb img { transform: scale(1.04); }
.hki-card-badge.hki-best-pick {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: var(--green);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .6rem;
  border-radius: 20px;
}
.hki-product-card-body { padding: 1.25rem; }
.hki-card-cat {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--terracotta);
  margin-bottom: .4rem;
  display: block;
}
.hki-product-card-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .5rem;
}
.hki-product-card-title a { color: var(--text); }
.hki-product-card-title a:hover { color: var(--green); }
.hki-product-card-rating { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.hki-product-card-excerpt { font-size: .85rem; color: var(--text-muted); margin-bottom: .75rem; line-height: 1.5; }
.hki-product-card-price { margin-bottom: .9rem; }
.hki-price-usd { font-size: 1.05rem; font-weight: 700; color: var(--green); }
.hki-price-bdt { font-size: .875rem; color: var(--terracotta); font-weight: 600; }
.hki-product-card-cta { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============================================================
   STAR RATING
   ============================================================ */
.hki-stars { display: inline-flex; gap: 1px; }
.star { font-size: .9rem; }
.star-full  { color: #F59E0B; }
.star-half  { color: #F59E0B; opacity: .7; }
.star-empty { color: #D1D5DB; }
.hki-rating-num  { font-size: .85rem; font-weight: 700; color: var(--text); }
.hki-rating-count { font-size: .8rem; color: var(--text-muted); }

/* ============================================================
   BLOG CARDS GRID
   ============================================================ */
.hki-posts-grid,
.hki-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.hki-blog-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.hki-blog-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.hki-card-thumb {
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg-cream);
}
.hki-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hki-blog-card:hover .hki-card-thumb img { transform: scale(1.04); }
.hki-card-thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--green-light), var(--bg-cream)); }
.hki-card-body { padding: 1.25rem; }
.hki-card-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.hki-card-badge {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--terracotta);
  background: rgba(224,122,95,.08);
  padding: .2rem .55rem;
  border-radius: 20px;
  border: 1px solid rgba(224,122,95,.2);
}
.hki-read-time { font-size: .75rem; color: var(--text-muted); }
.hki-card-title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .4rem;
}
.hki-card-title a { color: var(--text); }
.hki-card-title a:hover { color: var(--green); }
.hki-card-excerpt { font-size: .855rem; color: var(--text-muted); line-height: 1.55; margin-bottom: .85rem; }
.hki-card-footer { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.hki-card-date { font-size: .78rem; color: var(--text-light); }
.hki-card-link { font-size: .82rem; font-weight: 600; color: var(--green); }
.hki-card-link:hover { text-decoration: underline; }

/* ============================================================
   NEWSLETTER STRIP
   ============================================================ */
.hki-newsletter-strip {
  background: var(--green);
  padding: 3.5rem 0;
  color: #fff;
}
.hki-newsletter-inner { display: flex; align-items: center; gap: 2.5rem; justify-content: space-between; flex-wrap: wrap; }
.hki-newsletter-copy { flex: 1; min-width: 200px; }
.hki-newsletter-copy h2 { font-family: var(--font-serif); font-size: 1.5rem; color: #fff; margin-bottom: .35rem; }
.hki-newsletter-copy p { font-size: .9rem; color: rgba(255,255,255,.8); }
.hki-newsletter-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.hki-newsletter-input {
  flex: 1;
  min-width: 220px;
  padding: .7rem 1rem;
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: var(--radius);
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: .9rem;
  outline: none;
  font-family: inherit;
  transition: border-color var(--transition);
}
.hki-newsletter-input::placeholder { color: rgba(255,255,255,.6); }
.hki-newsletter-input:focus { border-color: rgba(255,255,255,.7); }
.hki-newsletter-form .hki-btn-primary {
  background: #fff;
  color: var(--green);
  border-color: #fff;
}
.hki-newsletter-form .hki-btn-primary:hover { background: var(--bg-cream); border-color: var(--bg-cream); }

/* ============================================================
   MAIN LAYOUT (content + sidebar)
   ============================================================ */
.hki-main { padding: 2.5rem 0 4rem; }
.hki-with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: start; }
.hki-content-area { min-width: 0; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.hki-sidebar { position: sticky; top: 90px; }
.hki-widget { margin-bottom: 1.75rem; }
.widget-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .875rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--green);
  color: var(--text);
}
.hki-sidebar-cats { display: flex; flex-direction: column; gap: .15rem; }
.hki-sidebar-cats li a {
  display: block;
  padding: .4rem .6rem;
  font-size: .875rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.hki-sidebar-cats li a:hover { background: var(--green-light); color: var(--green); }
.hki-sidebar-products { display: flex; flex-direction: column; gap: .75rem; }
.hki-sidebar-product-item { display: flex; gap: .75rem; align-items: center; }
.hki-sidebar-thumb { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.hki-sidebar-product-item a { font-size: .85rem; font-weight: 500; color: var(--text); display: block; margin-bottom: .2rem; }
.hki-sidebar-product-item a:hover { color: var(--green); }
.hki-widget-promo {
  background: var(--green-light);
  border: 1px solid rgba(45,106,79,.2);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.hki-widget-promo .widget-title { border-color: var(--green); }
.hki-widget-promo p { font-size: .85rem; color: var(--text-muted); }

/* Search form */
.search-form { display: flex; gap: .5rem; }
.search-field {
  flex: 1;
  padding: .55rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}
.search-field:focus { border-color: var(--green); }
.search-submit {
  padding: .55rem 1rem;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition);
}
.search-submit:hover { background: var(--green-dark); }

/* ============================================================
   ARCHIVE HEADER
   ============================================================ */
.hki-archive-header { margin-bottom: 2rem; }
.hki-archive-title { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-bottom: .5rem; }
.hki-archive-description { color: var(--text-muted); font-size: .95rem; }

/* ============================================================
   SINGLE POST / PAGE
   ============================================================ */
.hki-entry-header { margin-bottom: 1.5rem; }
.hki-entry-cat {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--terracotta);
  margin-bottom: .6rem;
}
.hki-entry-title { font-family: var(--font-serif); font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.25; margin-bottom: .75rem; }
.hki-entry-meta { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); flex-wrap: wrap; }
.hki-meta-sep { color: var(--border); }
.hki-entry-thumbnail { margin-bottom: 2rem; border-radius: var(--radius-lg); overflow: hidden; }
.hki-entry-thumbnail img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }
.hki-entry-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.hki-entry-tags a { font-size: .82rem; color: var(--green); }

/* Prose (rich content) */
.hki-prose { line-height: 1.8; }
.hki-prose h2,
.hki-prose h3,
.hki-prose h4 { font-family: var(--font-serif); font-weight: 700; margin: 2rem 0 .75rem; }
.hki-prose h2 { font-size: 1.5rem; }
.hki-prose h3 { font-size: 1.2rem; }
.hki-prose p  { margin-bottom: 1.25rem; }
.hki-prose ul,
.hki-prose ol { margin: 0 0 1.25rem 1.5rem; }
.hki-prose ul { list-style: disc; }
.hki-prose ol { list-style: decimal; }
.hki-prose li { margin-bottom: .4rem; }
.hki-prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.hki-prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9rem; }
.hki-prose th { background: var(--green-light); color: var(--green); font-weight: 600; text-align: left; padding: .65rem 1rem; border: 1px solid var(--border); }
.hki-prose td { padding: .6rem 1rem; border: 1px solid var(--border); }
.hki-prose tr:nth-child(even) td { background: var(--bg-cream); }
.hki-prose blockquote { border-left: 3px solid var(--green); padding: .75rem 1.25rem; background: var(--green-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.5rem 0; color: var(--text-muted); font-style: italic; }
.hki-prose a { color: var(--green); text-decoration: underline; }

/* ============================================================
   PRODUCT SINGLE PAGE
   ============================================================ */
.hki-product-header { margin-bottom: 1.5rem; }
.hki-product-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; }
.hki-product-image { margin-bottom: 1.5rem; border-radius: var(--radius-lg); overflow: hidden; }
.hki-product-image img { width: 100%; max-height: 420px; object-fit: cover; }
.hki-product-cta-block { margin: 1.5rem 0; padding: 1.5rem; background: var(--bg-cream); border-radius: var(--radius); border: 1px solid var(--border); }
.hki-product-cta-bottom { background: var(--green-light); border-color: rgba(45,106,79,.2); }
.hki-product-cta-block h3 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; }
.hki-affiliate-wrap { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.hki-affiliate-note { font-size: .78rem; color: var(--text-muted); margin-top: .75rem; }

/* Pros / Cons */
.hki-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.75rem 0;
}
.hki-pros,
.hki-cons {
  border-radius: var(--radius);
  padding: 1.25rem;
}
.hki-pros { background: #f0f9f4; border: 1px solid #c3e6d3; }
.hki-cons { background: #fef5f3; border: 1px solid #f5c4b8; }
.hki-pros h3 { color: var(--green); font-family: var(--font-serif); font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.hki-cons h3 { color: var(--terracotta); font-family: var(--font-serif); font-size: 1rem; font-weight: 700; margin-bottom: .6rem; }
.hki-pros ul li::before { content: '+ '; color: var(--green); font-weight: 700; }
.hki-cons ul li::before { content: '- '; color: var(--terracotta); font-weight: 700; }
.hki-pros li,
.hki-cons li { font-size: .875rem; margin-bottom: .3rem; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.hki-breadcrumb { font-size: .82rem; color: var(--text-muted); margin-bottom: 1.25rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.hki-breadcrumb a { color: var(--green); }
.hki-breadcrumb a:hover { text-decoration: underline; }

/* ============================================================
   AUTHOR BIO
   ============================================================ */
.hki-author-bio { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--bg-cream); border-radius: var(--radius); padding: 1.5rem; margin-top: 2.5rem; border: 1px solid var(--border); }
.hki-author-avatar { border-radius: 50%; flex-shrink: 0; width: 72px; height: 72px; }
.hki-author-name { font-weight: 700; font-size: 1rem; display: block; margin-bottom: .35rem; }
.hki-author-info p { font-size: .875rem; color: var(--text-muted); }

/* ============================================================
   RELATED POSTS
   ============================================================ */
.hki-related-posts { margin-top: 3rem; }
.hki-related-posts .hki-section-title { margin-bottom: 1.25rem; }

/* ============================================================
   PAGINATION
   ============================================================ */
.hki-pagination { margin-top: 2.5rem; }
.hki-pagination .page-numbers {
  display: inline-flex;
  list-style: none;
  gap: .35rem;
  flex-wrap: wrap;
}
.hki-pagination .page-numbers a,
.hki-pagination .page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  height: 2.2rem;
  padding: 0 .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hki-pagination .page-numbers a:hover { background: var(--green-light); border-color: var(--green); color: var(--green); }
.hki-pagination .page-numbers .current { background: var(--green); border-color: var(--green); color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.hki-site-footer {
  background: #1a2e25;
  color: rgba(255,255,255,.7);
  padding: 3.5rem 0 0;
  margin-top: 5rem;
}
.hki-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.hki-footer-brand .hki-logo-text { color: #fff; font-size: 1.15rem; margin-bottom: .75rem; }
.hki-footer-brand .hki-logo-icon { color: var(--terracotta); }
.hki-footer-brand p { font-size: .875rem; line-height: 1.65; }
.hki-footer-heading { font-family: var(--font-serif); color: #fff; font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .75rem; }
.hki-footer-links { display: flex; flex-direction: column; gap: .4rem; }
.hki-footer-links a { font-size: .875rem; color: rgba(255,255,255,.6); transition: color var(--transition); }
.hki-footer-links a:hover { color: #fff; }
.hki-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.hki-affiliate-disclosure { font-size: .78rem; color: rgba(255,255,255,.45); }
.hki-copyright { font-size: .8rem; color: rgba(255,255,255,.45); }

/* ============================================================
   404 / NO RESULTS
   ============================================================ */
.hki-404-wrap { display: flex; justify-content: center; padding: 4rem 0; }
.hki-404 { text-align: center; max-width: 480px; }
.hki-404-title { font-family: var(--font-serif); font-size: 6rem; font-weight: 700; color: var(--green); line-height: 1; margin-bottom: .5rem; }
.hki-404 h2 { font-family: var(--font-serif); font-size: 1.75rem; margin-bottom: .75rem; }
.hki-404 p { color: var(--text-muted); margin-bottom: 1.5rem; }
.hki-no-results { background: var(--bg-cream); border-radius: var(--radius-lg); padding: 3rem; text-align: center; }
.hki-no-results-header h2 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: .5rem; }
.hki-no-results-content { color: var(--text-muted); }
.hki-no-results-content .search-form { max-width: 400px; margin: 1rem auto 0; }

/* ============================================================
   FALLBACK MENU
   ============================================================ */
.hki-fallback-nav a {
  display: inline-block;
  padding: .4rem .75rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
}
.hki-fallback-nav a:hover { color: var(--green); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hki-category-grid  { grid-template-columns: repeat(2, 1fr); }
  .hki-products-grid  { grid-template-columns: repeat(2, 1fr); }
  .hki-posts-grid,
  .hki-blog-grid      { grid-template-columns: repeat(2, 1fr); }
  .hki-trust-grid     { grid-template-columns: repeat(2, 1fr); }
  .hki-with-sidebar   { grid-template-columns: 1fr 260px; }
}

@media (max-width: 768px) {
  .hki-menu-toggle { display: flex; }
  .hki-main-nav    { display: none; }
  .hki-main-nav.is-open { display: block; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 1rem 1.5rem; z-index: 99; }
  .hki-main-nav.is-open .hki-nav-list { flex-direction: column; }

  .hki-with-sidebar   { grid-template-columns: 1fr; }
  .hki-sidebar        { position: static; }
  .hki-products-grid  { grid-template-columns: repeat(2, 1fr); }
  .hki-footer-grid    { grid-template-columns: 1fr 1fr; }
  .hki-newsletter-inner { flex-direction: column; }
  .hki-pros-cons      { grid-template-columns: 1fr; }
  .hki-trust-grid     { grid-template-columns: repeat(2, 1fr); }
  .hki-footer-bottom  { flex-direction: column; text-align: center; }
}

@media (max-width: 540px) {
  .hki-category-grid  { grid-template-columns: 1fr 1fr; }
  .hki-products-grid  { grid-template-columns: 1fr; }
  .hki-posts-grid,
  .hki-blog-grid      { grid-template-columns: 1fr; }
  .hki-trust-grid     { grid-template-columns: 1fr 1fr; }
  .hki-footer-grid    { grid-template-columns: 1fr; }
  .hki-hero           { padding: 3.5rem 1rem 3rem; }
  .hki-newsletter-form { flex-direction: column; }
  .hki-newsletter-input { min-width: unset; }
}

/* ============================================================
   COMPARE FEATURE
   ============================================================ */

/* Compare button on product cards */
.hki-compare-card-row {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}
.hki-compare-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .35rem .8rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  width: 100%;
  justify-content: center;
}
.hki-compare-toggle:hover,
.hki-compare-toggle[aria-pressed="true"] {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green);
}
.hki-compare-toggle[aria-pressed="true"] .hki-compare-icon { color: var(--green); }
.hki-compare-icon { font-size: 1rem; }

/* Sticky compare bar */
.hki-compare-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a2e25;
  color: #fff;
  z-index: 500;
  box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  padding: .85rem 0;
}
.hki-compare-bar-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.hki-compare-bar-label {
  font-weight: 700;
  font-size: .875rem;
  white-space: nowrap;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hki-compare-slots {
  display: flex;
  gap: .75rem;
  flex: 1;
  overflow-x: auto;
}
.hki-compare-slot {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(255,255,255,.08);
  border: 1.5px dashed rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  padding: .4rem .85rem;
  min-width: 140px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
}
.hki-compare-slot.is-filled {
  border-style: solid;
  border-color: var(--green);
  background: rgba(45,106,79,.25);
}
.hki-compare-slot-name {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.hki-compare-slot.is-filled .hki-compare-slot-name { color: #fff; font-weight: 500; }
.hki-compare-slot-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color var(--transition);
}
.hki-compare-slot-remove:hover { color: var(--terracotta); }
.hki-compare-bar-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Comparison table page */
.hki-compare-page { padding: 2rem 0 4rem; }
.hki-compare-page-title { font-family: var(--font-serif); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-bottom: 1.5rem; }
.hki-compare-empty { text-align: center; padding: 3rem; background: var(--bg-cream); border-radius: var(--radius-lg); }
.hki-compare-empty p { color: var(--text-muted); margin-bottom: 1.25rem; }
.hki-compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hki-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.hki-compare-table thead th {
  padding: 1.25rem 1rem;
  vertical-align: top;
  border: 1px solid var(--border);
  background: var(--bg-cream);
  min-width: 160px;
}
.hki-compare-table .hki-cmp-label-col {
  width: 140px;
  font-weight: 700;
  background: var(--green-light);
  color: var(--green);
  font-size: .85rem;
  text-align: left;
}
.hki-cmp-thumb {
  width: 100%;
  max-width: 140px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: .6rem;
  display: block;
}
.hki-cmp-product-name { font-family: var(--font-serif); font-weight: 600; font-size: .95rem; color: var(--text); display: block; }
.hki-cmp-product-name:hover { color: var(--green); }
.hki-cmp-row td {
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  vertical-align: top;
  font-size: .875rem;
}
.hki-cmp-row--shade td { background: var(--bg-cream); }
.hki-cmp-label { font-weight: 700; font-size: .82rem; color: var(--green); background: var(--green-light) !important; }
.hki-cmp-pros-label { color: #1a7a45; }
.hki-cmp-cons-label { color: var(--terracotta); }
.hki-cmp-rating-num { font-weight: 700; font-size: .85rem; display: inline-block; margin-left: .3rem; }
.hki-cmp-sub { font-size: .78rem; color: var(--text-muted); display: block; margin-top: .2rem; }
.hki-cmp-best { background: rgba(45,106,79,.06) !important; }
.hki-cmp-badge {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 20px;
  margin-left: .4rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  vertical-align: middle;
}
.hki-cmp-list { margin: 0; padding: 0; }
.hki-cmp-list--pros li::before { content: '+ '; color: var(--green); font-weight: 700; }
.hki-cmp-list--cons li::before { content: '− '; color: var(--terracotta); font-weight: 700; }
.hki-cmp-list li { margin-bottom: .2rem; }
.hki-cmp-row-cta td { background: #fff; }
.hki-cmp-cta { display: flex; flex-direction: column; gap: .4rem; }

/* ============================================================
   AD ZONES
   ============================================================ */

/* Shared ad container styles */
.hki-ad {
  text-align: center;
  overflow: hidden;
}

/* Header leaderboard (728×90) */
.hki-ad--header {
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-cream);
}

/* Sidebar (300×250 / 300×600) */
.hki-ad--sidebar {
  margin-bottom: 1.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-cream);
}

/* Mid-content (responsive, inside article body) */
.hki-ad--mid {
  margin: 1.75rem 0;
  padding: .5rem;
  background: var(--bg-cream);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Between posts/sections (leaderboard or fluid) */
.hki-ad--between {
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 2rem 0;
}

/* Footer leaderboard */
.hki-ad--footer {
  padding: 1.25rem 0;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 1rem;
}

/* Product page ads */
.hki-ad--product-top { margin: 1rem 0; }
.hki-ad--product-mid { margin: 1.5rem 0; }

/* Admin placeholder (visible to logged-in admins only) */
.hki-ad--placeholder {
  border: 2px dashed #f59e0b;
  background: #fffbeb;
  border-radius: var(--radius);
  padding: 1rem;
  font-size: .8rem;
  color: #92400e;
  font-weight: 500;
}

/* Responsive ad visibility */
@media (max-width: 768px) {
  .hki-ad--header { padding: .5rem 0; }
  .hki-compare-bar-inner { gap: .75rem; }
  .hki-compare-slots { gap: .5rem; }
  .hki-compare-slot { min-width: 110px; }
  .hki-compare-bar-actions { width: 100%; }
  .hki-compare-bar-actions .hki-btn { flex: 1; }
}

/* ============================================================
   AFFILIATE BUTTONS — 20 PLATFORMS + 5 CUSTOM (v5.2)
   Colours driven by CSS vars set in hki_customizer_css().
   A button only appears in the HTML when URL is filled in —
   these classes just apply the colour; no visibility logic here.
   ============================================================ */

.hki-btn-platform {
  font-size: .85rem;
  color: #fff;
  white-space: nowrap;
  font-weight: 600;
}
.hki-btn-platform:hover { filter: brightness(.88); color: #fff; }

/* 20 built-in platforms */
.hki-btn-amazon          { background: var(--btn-amazon,          #FF9900); border-color: var(--btn-amazon,          #FF9900); }
.hki-btn-walmart         { background: var(--btn-walmart,         #0071CE); border-color: var(--btn-walmart,         #0071CE); }
.hki-btn-homedepot       { background: var(--btn-homedepot,       #F96302); border-color: var(--btn-homedepot,       #F96302); }
.hki-btn-wayfair         { background: var(--btn-wayfair,         #7B2D8B); border-color: var(--btn-wayfair,         #7B2D8B); }
.hki-btn-bestbuy         { background: var(--btn-bestbuy,         #0046BE); border-color: var(--btn-bestbuy,         #0046BE); }
.hki-btn-aliexpress      { background: var(--btn-aliexpress,      #E43226); border-color: var(--btn-aliexpress,      #E43226); }
.hki-btn-alibaba         { background: var(--btn-alibaba,         #FF6A00); border-color: var(--btn-alibaba,         #FF6A00); }
.hki-btn-temu            { background: var(--btn-temu,            #FA5A28); border-color: var(--btn-temu,            #FA5A28); }
.hki-btn-flipkart        { background: var(--btn-flipkart,        #2874F0); border-color: var(--btn-flipkart,        #2874F0); }
.hki-btn-daraz           { background: var(--btn-daraz,           #F85606); border-color: var(--btn-daraz,           #F85606); }
.hki-btn-ubuy            { background: var(--btn-ubuy,            #0068A5); border-color: var(--btn-ubuy,            #0068A5); }
.hki-btn-ebay            { background: var(--btn-ebay,            #E53238); border-color: var(--btn-ebay,            #E53238); }
.hki-btn-lowes           { background: var(--btn-lowes,           #004990); border-color: var(--btn-lowes,           #004990); }
.hki-btn-costco          { background: var(--btn-costco,          #005DAA); border-color: var(--btn-costco,          #005DAA); }
.hki-btn-banggood        { background: var(--btn-banggood,        #E83B3B); border-color: var(--btn-banggood,        #E83B3B); }
.hki-btn-dhgate          { background: var(--btn-dhgate,          #E8262A); border-color: var(--btn-dhgate,          #E8262A); }
.hki-btn-croma           { background: var(--btn-croma,           #6DBE45); border-color: var(--btn-croma,           #6DBE45); }
.hki-btn-tatacliq        { background: var(--btn-tatacliq,        #5C2383); border-color: var(--btn-tatacliq,        #5C2383); }
.hki-btn-reliancedigital { background: var(--btn-reliancedigital, #CC2229); border-color: var(--btn-reliancedigital, #CC2229); }
.hki-btn-target          { background: var(--btn-target,          #CC0000); border-color: var(--btn-target,          #CC0000); }

/* 5 custom slots */
.hki-btn-custom-1 { background: var(--btn-custom-1, #2D6A4F); border-color: var(--btn-custom-1, #2D6A4F); }
.hki-btn-custom-2 { background: var(--btn-custom-2, #2D6A4F); border-color: var(--btn-custom-2, #2D6A4F); }
.hki-btn-custom-3 { background: var(--btn-custom-3, #2D6A4F); border-color: var(--btn-custom-3, #2D6A4F); }
.hki-btn-custom-4 { background: var(--btn-custom-4, #2D6A4F); border-color: var(--btn-custom-4, #2D6A4F); }
.hki-btn-custom-5 { background: var(--btn-custom-5, #2D6A4F); border-color: var(--btn-custom-5, #2D6A4F); }
.hki-btn-custom   { color: #fff; }

/* ============================================================
   SECTION BADGE & RECIPE CTA BUTTONS
   ============================================================ */
.hki-section-badge {
  display: inline-block;
  background: rgba(45,106,79,.1);
  color: var(--green);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .2rem .75rem;
  border-radius: 20px;
  margin-bottom: .35rem;
}
.hki-section-footer { margin-top: 2rem; text-align: center; }

.hki-btn-recipe {
  background: var(--terracotta, #E07A5F);
  color: #fff;
  border-color: var(--terracotta, #E07A5F);
}
.hki-btn-recipe:hover { filter: brightness(.88); color: #fff; }

.hki-section--recipe-bg { background: #fff9f7; }

/* ============================================================
   RECIPE CARDS GRID
   ============================================================ */
.hki-recipes-grid,
.hki-recipes-grid--home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.hki-recipe-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.hki-recipe-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.hki-recipe-card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--bg-cream);
}
.hki-recipe-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hki-recipe-card:hover .hki-recipe-card-thumb img { transform: scale(1.05); }

.hki-recipe-diff-badge {
  position: absolute;
  top: .6rem; left: .6rem;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .55rem;
  border-radius: 20px;
  color: #fff;
}
.hki-recipe-diff-badge.hki-recipe-diff--easy   { background: #27AE60; }
.hki-recipe-diff-badge.hki-recipe-diff--medium { background: #F39C12; }
.hki-recipe-diff-badge.hki-recipe-diff--hard   { background: var(--terracotta, #E07A5F); }

.hki-recipe-course-badge {
  position: absolute;
  top: .6rem; right: .6rem;
  font-size: .68rem; font-weight: 600;
  padding: .2rem .55rem;
  border-radius: 20px;
  background: rgba(0,0,0,.45);
  color: #fff;
}

.hki-recipe-card-body { padding: 1rem 1.25rem 1.25rem; }
.hki-recipe-card-title {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 600; line-height: 1.4;
  margin: .35rem 0 .4rem;
}
.hki-recipe-card-title a { color: var(--text); }
.hki-recipe-card-title a:hover { color: var(--green); }
.hki-recipe-card-excerpt { font-size: .83rem; color: var(--text-muted); line-height: 1.5; margin-bottom: .75rem; }

.hki-recipe-stats {
  display: flex; gap: .75rem; flex-wrap: wrap;
  margin-bottom: .85rem;
  padding: .6rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.hki-recipe-stat { display: flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--text-muted); }
.hki-recipe-stat-icon { font-size: .85rem; }

.hki-btn-recipe-view {
  background: transparent;
  color: var(--green);
  border-color: var(--green-light, #d8f3dc);
  font-size: .82rem;
  padding: .45rem 1rem;
}
.hki-btn-recipe-view:hover { background: var(--green-light, #d8f3dc); }

/* ============================================================
   RECIPE ARCHIVE
   ============================================================ */
.hki-archive-desc { color: var(--text-muted); font-size: .95rem; margin-top: .5rem; max-width: 600px; }

.hki-recipe-filter {
  display: flex; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.hki-recipe-filter-btn {
  display: inline-block;
  padding: .4rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  font-size: .82rem; font-weight: 600;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none;
}
.hki-recipe-filter-btn:hover,
.hki-recipe-filter-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* ============================================================
   SINGLE RECIPE
   ============================================================ */
.hki-recipe-header { margin-bottom: 1.5rem; }
.hki-recipe-header-meta {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin: .5rem 0 .75rem;
  font-size: .85rem; color: var(--text-muted);
}
.hki-recipe-course-tag,
.hki-recipe-cuisine-tag {
  display: inline-block;
  padding: .2rem .65rem;
  background: var(--bg-cream);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: .75rem; font-weight: 600; color: var(--text-muted);
}
.hki-recipe-intro { font-size: 1.05rem; color: var(--text-muted); line-height: 1.7; margin-top: .75rem; }

.hki-recipe-image { margin-bottom: 1.75rem; border-radius: var(--radius-lg); overflow: hidden; }
.hki-recipe-image img { width: 100%; max-height: 480px; object-fit: cover; }

.hki-recipe-chefs-note {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fffbf0;
  border: 1px solid #f0d080;
  border-left: 4px solid #F59E0B;
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.hki-recipe-chefs-note-icon { font-size: 1.5rem; flex-shrink: 0; }
.hki-recipe-chefs-note strong { display: block; margin-bottom: .3rem; font-size: .9rem; color: #92400e; }
.hki-recipe-chefs-note p { font-size: .875rem; color: #78350f; margin: 0; font-style: italic; }

.hki-recipe-infobox {
  background: var(--bg-cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.hki-recipe-infobox-stats { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hki-recipe-infobox-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 70px;
}
.hki-recipe-infobox-icon { font-size: 1.4rem; margin-bottom: .25rem; }
.hki-recipe-infobox-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; margin-bottom: .15rem; }
.hki-recipe-infobox-val { font-size: .95rem; font-weight: 700; color: var(--text); }
.hki-recipe-infobox-video { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }

.hki-recipe-diff--easy   { color: #27AE60; }
.hki-recipe-diff--medium { color: #F39C12; }
.hki-recipe-diff--hard   { color: var(--terracotta, #E07A5F); }

.hki-recipe-section { margin: 2rem 0; }
.hki-recipe-section-title {
  font-family: var(--font-serif);
  font-size: 1.3rem; font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--green-light, #d8f3dc);
}

.hki-recipe-ingredient-list { padding: 0; margin: 0; }
.hki-recipe-ingredient-heading {
  font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--green); margin: 1rem 0 .5rem; padding: .3rem 0;
  border-bottom: 1px solid var(--green-light, #d8f3dc); list-style: none;
}
.hki-recipe-ingredient-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
  font-size: .9rem; list-style: none; transition: background var(--transition);
}
.hki-recipe-ingredient-item:last-child { border-bottom: none; }
.hki-recipe-check-box {
  width: 18px; height: 18px;
  border: 2px solid var(--border); border-radius: 4px; flex-shrink: 0; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.hki-recipe-ingredient-item.is-checked .hki-recipe-check-box { background: var(--green); border-color: var(--green); }

.hki-recipe-step-list { padding: 0; margin: 0; counter-reset: steps; }
.hki-recipe-step-heading {
  font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--green); margin: 1.5rem 0 .75rem; list-style: none;
}
.hki-recipe-step {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.1rem 0; border-bottom: 1px solid var(--border); list-style: none;
}
.hki-recipe-step:last-child { border-bottom: none; }
.hki-recipe-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--green); color: #fff;
  border-radius: 50%; font-size: .85rem; font-weight: 700; flex-shrink: 0;
}
.hki-recipe-step-text { font-size: .9rem; line-height: 1.65; flex: 1; }

.hki-recipe-notes {
  background: var(--bg-cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}

/* Nav strip Recipes highlight */
.hki-nav-recipes a { color: var(--terracotta, #E07A5F) !important; font-weight: 600; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hki-recipes-grid,
  .hki-recipes-grid--home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .hki-recipes-grid,
  .hki-recipes-grid--home { grid-template-columns: 1fr; }
  .hki-recipe-infobox-stats { gap: .75rem; justify-content: center; }
  .hki-recipe-step { gap: .75rem; }
}