/* ════════════════════════════════════════════════════════════════
   VILOER · Essentials Grid (Concept 09)  —  base stylesheet
   Scoped under .veg- (Viloer Essentials Grid). All theme-overridable
   values flow through CSS variables that Elementor control selectors
   inject inline per widget instance. Responsive layout uses Elementor's
   default viewport breakpoints (≤1024 tablet, ≤767 mobile) so the
   editor device-preview behaves correctly.
   ════════════════════════════════════════════════════════════════ */

.veg-root,
.veg-root *{
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}

.veg-root{
  /* ---- design tokens (defaults match the original concept) ---- */
  --veg-forest:#143020;
  --veg-muted:rgba(34,62,44,.64);
  --veg-section-bg:#ffffff;
  --veg-mono:ui-monospace,"SF Mono",Menlo,monospace;

  --veg-veil-tint:#f4f6f3;
  --veg-veil-bottom:#ffffff;

  --veg-rule-color:#bfe0a8;

  --veg-card-bg:#ffffff;
  --veg-card-border-color:rgba(20,48,32,.10);
  --veg-card-radius:26px;

  --veg-tag-bg:#bfe0a8;
  --veg-tag-color:#143020;

  --veg-star-color:#143020;

  --veg-btn-bg:#143020;
  --veg-btn-color:#ffffff;
  --veg-btn-bg-hover:#0f2517;
  --veg-btn-color-hover:#ffffff;
  --veg-btn-radius:999px;

  --veg-link-color:#143020;
  --veg-link-color-hover:#0f2517;

  --veg-cols:4;
  --veg-grid-gap:28px;

  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--veg-forest);
  background:var(--veg-section-bg);
  width:100%;
  line-height:1.15;
}

/* placeholder fill (only shown when no image is set) */
.veg-ph{
  position:relative; width:100%; height:100%;
  background:repeating-linear-gradient(135deg,#e9f1e7 0 13px,#dde9d9 13px 26px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.veg-ph.deep{background:repeating-linear-gradient(135deg,#1d3b28 0 13px,#15311f 13px 26px);}
.veg-ph.cloud{background:repeating-linear-gradient(135deg,#f3f5f3 0 13px,#e9ece9 13px 26px);}
.veg-ph span{
  font-family:var(--veg-mono); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:rgba(34,62,44,.46); text-align:center;
  padding:0 16px; line-height:1.55;
}

/* shared image rule — object-fit cover inside fixed-height wrappers */
.veg-img{width:100%; height:100%; object-fit:cover; display:block;}

/* ─────────────────────────── HERO ─────────────────────────── */
.veg-hero{position:relative; width:100%; overflow:hidden; height:680px;}
.veg-hero .veg-ph{position:absolute; inset:0;}
.veg-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}

.veg-hero-veil{
  position:absolute; inset:0; pointer-events:none;
  /* fallback (no color-mix support) — original tuned mint wash */
  background:
    linear-gradient(90deg,rgba(244,246,243,.92) 0%,rgba(244,246,243,.55) 32%,transparent 60%),
    linear-gradient(180deg,transparent 68%,rgba(255,255,255,.6) 90%,var(--veg-veil-bottom) 100%);
}
@supports (background:color-mix(in srgb,#000 50%,transparent)){
  .veg-hero-veil{
    background:
      linear-gradient(90deg,
        color-mix(in srgb,var(--veg-veil-tint) 92%,transparent) 0%,
        color-mix(in srgb,var(--veg-veil-tint) 55%,transparent) 32%,
        transparent 60%),
      linear-gradient(180deg,
        transparent 68%,
        color-mix(in srgb,var(--veg-veil-bottom) 60%,transparent) 90%,
        var(--veg-veil-bottom) 100%);
  }
}

.veg-hero-inner{
  position:relative; max-width:1320px; margin:0 auto; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 80px;
}
.veg-eyebrow{
  font-family:var(--veg-mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--veg-forest); margin:0;
}
.veg-hero h1{
  margin:22px 0 0; font-weight:800; letter-spacing:-.045em; line-height:.92;
  color:var(--veg-forest); font-size:84px;
}
.veg-hero p{
  margin:26px 0 0; color:var(--veg-muted); font-weight:500; line-height:1.5;
  font-size:21px; max-width:440px;
}
.veg-cta-row{display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:36px;}

/* buttons + links — !important reads from CSS vars, so it beats the
   Hello theme yet Elementor controls still win (they change the var) */
.veg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--veg-btn-bg) !important; color:var(--veg-btn-color) !important;
  font-weight:700; letter-spacing:-.01em; border-radius:var(--veg-btn-radius);
  border:none; cursor:pointer; text-decoration:none !important; white-space:nowrap;
  font-size:16px; padding:16px 28px; transition:background .18s ease,color .18s ease,transform .18s ease;
}
.veg-btn svg{display:block;}
.veg-btn svg path{stroke:var(--veg-btn-color) !important;}
.veg-hero .veg-btn:hover,
.veg-card .veg-btn:hover{background:var(--veg-btn-bg-hover) !important; color:var(--veg-btn-color-hover) !important;}
.veg-hero .veg-btn:hover svg path,
.veg-card .veg-btn:hover svg path{stroke:var(--veg-btn-color-hover) !important;}

.veg-link{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  color:var(--veg-link-color) !important; font-weight:700; letter-spacing:-.01em;
  text-decoration:none !important; font-size:16px; transition:color .18s ease;
}
.veg-link:hover{color:var(--veg-link-color-hover) !important;}
.veg-link .chev{font-weight:600; opacity:.9;}

/* ───────────────────────── SECTION ───────────────────────── */
.veg-section{padding:76px 80px 88px;}
.veg-wrap{max-width:1320px; margin:0 auto;}

.veg-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px;}
.veg-head-l{display:flex; align-items:baseline; gap:16px;}
.veg-rule{
  flex:0 0 auto; height:4px; width:30px; background:var(--veg-rule-color);
  border-radius:2px; transform:translateY(-12px);
}
.veg-head h2{
  margin:14px 0 0; font-weight:800; letter-spacing:-.04em; line-height:1;
  color:var(--veg-forest); font-size:52px;
}
.veg-head .veg-eyebrow{color:var(--veg-muted);}

/* ─────────────────────── PRODUCT GRID ────────────────────── */
.veg-grid{
  display:grid;
  grid-template-columns:repeat(var(--veg-cols),minmax(0,1fr));
  gap:var(--veg-grid-gap);
}
.veg-card{
  border:1px solid var(--veg-card-border-color);
  border-radius:var(--veg-card-radius);
  display:flex; flex-direction:column; background:var(--veg-card-bg);
  /* no overflow:hidden here — keeps drop-shadows from being clipped */
}
.veg-card-img{
  position:relative; width:100%; height:300px; overflow:hidden;
  border-top-left-radius:var(--veg-card-radius);
  border-top-right-radius:var(--veg-card-radius);
}
.veg-card-link{display:block; width:100%; height:100%;}
.veg-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--veg-tag-bg); color:var(--veg-tag-color);
  font-family:var(--veg-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; padding:7px 13px; border-radius:999px;
}
.veg-card-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1;}
.veg-stars{display:flex; align-items:center; gap:6px;}
.veg-stars .row{display:flex; gap:1.5px;}
.veg-stars .row svg path{fill:var(--veg-star-color);}
.veg-stars .row svg.empty path{fill:rgba(20,48,32,.18);}
.veg-stars b{font-size:13px; font-weight:700; color:var(--veg-forest);}
.veg-stars em{font-size:13px; font-weight:500; color:var(--veg-muted); font-style:normal;}
.veg-card h3{margin:12px 0 0; font-size:23px; font-weight:800; letter-spacing:-.025em; color:var(--veg-forest);}
.veg-card h3 a{color:inherit; text-decoration:none;}
.veg-blurb{margin:5px 0 0; font-size:15px; color:var(--veg-muted); font-weight:500;}
.veg-price{display:flex; align-items:baseline; gap:9px; margin-top:16px;}
.veg-price .now{font-size:24px; font-weight:800; color:var(--veg-forest);}
.veg-price .was{font-size:15px; color:var(--veg-muted); text-decoration:line-through;}
.veg-add-wrap{margin-top:auto; padding-top:20px;}
.veg-add-wrap .veg-btn{width:100%; padding:14px 0; font-size:15px;}

/* ════════ TABLET (≤1024px) ════════ */
@media (max-width:1024px){
  .veg-hero{height:560px;}
  .veg-hero-inner{padding:0 48px;}
  .veg-hero h1{font-size:64px;}
  .veg-hero p{font-size:19px; max-width:420px; margin-top:22px;}
  .veg-cta-row{gap:18px; margin-top:30px;}
  .veg-cta-row .veg-btn{font-size:15px; padding:15px 24px;}
  .veg-section{padding:60px 48px 72px;}
  .veg-head{margin-bottom:38px;}
  .veg-head h2{font-size:42px;}
  .veg-card h3{font-size:22px;}
}

/* ════════ MOBILE (≤767px) ════════ */
@media (max-width:767px){
  .veg-hero{height:500px;}
  .veg-hero-veil{
    background:linear-gradient(180deg,rgba(20,48,32,.04) 0%,transparent 32%,rgba(255,255,255,.55) 78%,var(--veg-veil-bottom) 100%);
  }
  .veg-hero-inner{padding:48px 24px 0; justify-content:flex-start;}
  .veg-hero h1{font-size:46px; margin-top:14px; line-height:.96;}

  /* headline-only hero on mobile (toggleable from controls) */
  .veg-hero.veg-hide-mobile-text .veg-hero-sub,
  .veg-hero.veg-hide-mobile-text .veg-cta-row{display:none;}

  .veg-section{padding:40px 24px 48px;}
  .veg-head{display:block; margin-bottom:26px;}
  .veg-head-l{display:flex; align-items:baseline; gap:13px;}
  .veg-head-l > div{flex:1; min-width:0;}
  .veg-rule{transform:translateY(-7px);}
  .veg-head h2{font-size:32px; margin-top:10px; letter-spacing:-.035em;}

  .veg-card-img{height:230px;}
  .veg-card-body{padding:16px 18px 18px;}

  /* mobile card: name + price on one row, blurb beneath, stars hidden (toggleable) */
  .veg-root.veg-hide-mobile-stars .veg-stars{display:none;}
  .veg-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
  .veg-card-titles{flex:1; min-width:0;}
  .veg-card h3{margin:0; font-size:19px;}
  .veg-blurb{font-size:13.5px;}
  .veg-price{margin-top:0; flex:0 0 auto; align-items:baseline;}
  .veg-price .now{font-size:18px;}
  .veg-price .was{font-size:12.5px;}
  .veg-tag{font-size:9.5px; padding:5px 10px;}
  .veg-add-wrap{padding-top:15px;}
}