/* ===== Heimchef shared styles ===== */
:root{
  /* brand accent = Heimchef logo lime green */
  --gold:#6F9417; --gold-light:#9DC23A; --gold-dark:#54720F;
  --ink:#2A3142; --cream:#FAF8F4; --sand:#F1F3E7; --line:#E6E7DC;
}
*{ -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{ font-family:'Be Vietnam Pro',sans-serif; color:var(--ink); background:#fff; }

/* ---- Wordmark ---- */
.wordmark{ display:inline-flex; align-items:baseline; gap:.06em; line-height:1; user-select:none; }
.wordmark .wm-heim{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--ink); letter-spacing:.01em; }
.wordmark .wm-chef{ font-family:'Allura',cursive; color:var(--gold); margin-left:-.04em; }
.wordmark.on-dark .wm-heim{ color:#fff; }

/* ---- Tile motif (kitchen backsplash echo) ---- */
.tile-grid{
  background-image:
    linear-gradient(rgba(111,148,23,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,148,23,.10) 1px, transparent 1px);
  background-size:46px 46px;
}
.tile-grid-dark{
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:54px 54px;
}

/* ---- Ceramic tile backsplash (kitchen ambience) ---- */
.kitchen-tiles{
  background-color:#F1ECE3;
  background-image:
    linear-gradient(90deg, rgba(42,49,66,.085) 2px, transparent 2px),
    linear-gradient(rgba(42,49,66,.085) 2px, transparent 2px),
    linear-gradient(180deg, rgba(255,255,255,.65) 0, rgba(255,255,255,0) 38%);
  background-size:86px 86px, 86px 86px, 86px 86px;
}
.kitchen-tiles-dark{
  background-color:#232a3b;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.38) 2px, transparent 2px),
    linear-gradient(rgba(0,0,0,.38) 2px, transparent 2px),
    linear-gradient(180deg, rgba(255,255,255,.06) 0, rgba(255,255,255,0) 40%);
  background-size:94px 94px, 94px 94px, 94px 94px;
}

/* ---- Header ---- */
.hc-nav-link{ position:relative; padding:.35rem 0; color:#3a4150; transition:color .25s; }
.hc-nav-link::after{
  content:''; position:absolute; left:50%; bottom:-2px; width:0; height:2px;
  background:var(--gold); transform:translateX(-50%); transition:width .3s ease;
}
.hc-nav-link:hover{ color:var(--gold-dark); }
.hc-nav-link:hover::after, .hc-nav-link.active::after{ width:100%; }
.hc-nav-link.active{ color:var(--gold-dark); }

/* ---- Filter tabs ---- */
.filter-tab{
  position:relative; white-space:nowrap; transition:all .3s cubic-bezier(.22,.61,.36,1);
  border:1px solid var(--line); background:#fff; color:#6b7180;
}
.filter-tab:hover{ border-color:var(--gold-light); color:var(--gold-dark); }
.filter-tab.active{
  background:var(--gold); border-color:var(--gold); color:#fff;
  box-shadow:0 8px 20px -8px rgba(174,154,96,.7);
}

/* ---- Product card ---- */
.product-card{ transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s; }
.product-card:hover{ transform:translateY(-8px); }
.product-card .pc-imgwrap{ overflow:hidden; }
.product-card .pc-img{ transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.product-card:hover .pc-img{ transform:scale(1.07); }
.product-card .pc-overlay{ opacity:0; transition:opacity .4s; }
.product-card:hover .pc-overlay{ opacity:1; }
.product-card .pc-title{ transition:color .3s; }
.product-card:hover .pc-title{ color:var(--gold-dark); }
.product-card .pc-cta{ transform:translateY(6px); opacity:0; transition:all .4s; }
.product-card:hover .pc-cta{ transform:translateY(0); opacity:1; }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---- Grid stagger ---- */
.grid-enter{ animation:gridIn .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes gridIn{ from{ opacity:0; transform:translateY(20px) scale(.98); } to{ opacity:1; transform:none; } }

/* ---- Misc ---- */
.btn-gold{ background:var(--gold); color:#fff; transition:all .3s; }
.btn-gold:hover{ background:var(--gold-dark); box-shadow:0 14px 30px -12px rgba(140,122,69,.8); transform:translateY(-2px); }
.btn-outline{ border:1px solid var(--ink); color:var(--ink); transition:all .3s; }
.btn-outline:hover{ background:var(--ink); color:#fff; }
.link-arrow svg{ transition:transform .3s; }
.link-arrow:hover svg{ transform:translateX(5px); }

::selection{ background:var(--gold-light); color:#fff; }