/* Guided sales concierge — styling in the Judean Homestead visual language.
 * Warm cream surfaces, terracotta accent, deep ink, Cormorant + Jost. Restrained.
 * All fixed elements sit BELOW the consent bar (z 2147483000) and ABOVE the
 * sticky order CTA (z 60); --jh-concierge-bottom (set by concierge.js) lifts them
 * clear of whatever occupies the bottom of the viewport. */

:root{
  --jhc-cream:#FBF2DE;
  --jhc-cream-2:#F1E3C9;
  --jhc-ink:#2A1C12;
  --jhc-ink-soft:#5b4028;
  --jhc-terra:#B4472A;
  --jhc-terra-dark:#8F2C1B;
  --jhc-border:#D8C09A;
  --jhc-serif:'Cormorant Garamond',Georgia,serif;
  --jhc-sans:'Jost',system-ui,-apple-system,sans-serif;
  --jhc-shadow:0 18px 40px -16px rgba(42,28,18,.45),0 4px 12px -6px rgba(42,28,18,.30);
  /* Restrained shadow for the cream-outlined launcher so it stays legible over
     photography and pale sections without shouting over the solid-terracotta CTA. */
  --jhc-launch-shadow:0 4px 14px -4px rgba(42,28,18,.42),0 1px 3px rgba(42,28,18,.24);
  --jhc-bottom:calc(var(--jh-concierge-bottom, 20px) + env(safe-area-inset-bottom));
  --jhc-z-launch:2147481000;
  --jhc-z-panel:2147481500;
}

/* ---------- Launcher ---------------------------------------------------
   Desktop / wide (above the 820px mobile breakpoint): the approved original solid
   terracotta pill — cream icon + text, restrained shadow, stable bottom-right.
   On mobile (<=820px) it becomes the cream-outlined secondary treatment (media
   query below). This deliberate per-viewport difference is approved: solid
   terracotta reads as the primary weight on desktop, while on mobile the solid
   terracotta ordering action lives in the sticky bar, so the launcher steps back
   to cream-outlined. Same treatment on the homepage and /order at each size. */
.jhc-launcher{position:fixed;right:20px;bottom:var(--jhc-bottom);z-index:var(--jhc-z-launch);
  display:inline-flex;align-items:center;gap:8px;font-family:var(--jhc-sans);font-weight:600;font-size:14.5px;
  color:#F4E7CE;background:var(--jhc-terra);border:0;border-radius:999px;padding:11px 18px;cursor:pointer;
  box-shadow:var(--jhc-shadow);letter-spacing:.01em;}
.jhc-launcher:hover{background:#a53f24;}
.jhc-launcher .jhc-launch-icon{width:18px;height:18px;flex:0 0 18px;}
.jhc-launcher[hidden]{display:none;}
/* Mobile (<=820px): cream/paper background with a terracotta border, icon and
   text. The icon inherits `color`, so it turns terracotta with the text. Pill
   shape preserved; restrained launcher shadow. */
@media (max-width:820px){
  .jhc-launcher{color:var(--jhc-terra);background:var(--jhc-cream);border:1.5px solid var(--jhc-terra);
    padding:10px 17px;box-shadow:var(--jhc-launch-shadow);}
  .jhc-launcher:hover{background:var(--jhc-cream-2);border-color:var(--jhc-terra-dark);color:var(--jhc-terra-dark);}
}

/* ---------- Teaser ----------------------------------------------------- */
.jhc-teaser{position:fixed;right:20px;bottom:calc(var(--jhc-bottom) + 58px);z-index:var(--jhc-z-launch);
  width:min(300px,calc(100vw - 40px));background:var(--jhc-cream);border:1px solid var(--jhc-border);border-radius:10px;
  box-shadow:var(--jhc-shadow);padding:16px 16px 14px;font-family:var(--jhc-sans);}
.jhc-teaser[hidden]{display:none;}
.jhc-teaser-title{font-family:var(--jhc-serif);font-weight:600;font-size:20px;line-height:1.15;color:var(--jhc-ink);margin:0 22px 0 0;}
.jhc-teaser-line{font-size:14px;line-height:1.5;color:var(--jhc-ink-soft);margin:6px 0 0;}
.jhc-teaser-actions{margin-top:12px;}
.jhc-teaser-ask{font-family:var(--jhc-sans);font-weight:600;font-size:13.5px;color:#F4E7CE;background:var(--jhc-terra);
  border:0;border-radius:6px;padding:9px 16px;cursor:pointer;box-shadow:0 3px 0 var(--jhc-terra-dark);}
.jhc-teaser-ask:hover{background:#a53f24;}
.jhc-teaser-close{position:absolute;top:8px;right:9px;width:26px;height:26px;border:0;background:transparent;color:#8a6a49;
  font-size:19px;line-height:1;cursor:pointer;border-radius:4px;}
.jhc-teaser-close:hover{background:rgba(138,106,73,.12);}

/* ---------- Panel ------------------------------------------------------ */
.jhc-panel{position:fixed;right:20px;bottom:var(--jhc-bottom);z-index:var(--jhc-z-panel);
  width:min(384px,calc(100vw - 32px));max-height:min(72vh,620px);display:flex;flex-direction:column;
  background:var(--jhc-cream);border:1px solid var(--jhc-border);border-radius:12px;box-shadow:var(--jhc-shadow);
  overflow:hidden;font-family:var(--jhc-sans);}
.jhc-panel[hidden]{display:none;}
.jhc-backdrop{position:fixed;inset:0;z-index:var(--jhc-z-panel);background:rgba(28,17,10,.28);border:0;}
.jhc-backdrop[hidden]{display:none;}

.jhc-head{position:relative;background:var(--jhc-cream-2);border-bottom:1px solid var(--jhc-border);padding:16px 44px 14px 18px;flex:0 0 auto;}
.jhc-greeting{font-family:var(--jhc-serif);font-weight:600;font-size:21px;line-height:1.15;color:var(--jhc-ink);}
.jhc-prompt{font-size:13.5px;color:var(--jhc-ink-soft);margin-top:3px;}
.jhc-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:1px solid var(--jhc-border);background:var(--jhc-cream);
  color:var(--jhc-ink);font-size:18px;line-height:1;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;}
.jhc-close:hover{background:#EBD9BC;}

.jhc-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 0;flex:1 1 auto;}

/* Question list */
.jhc-qlist{list-style:none;margin:0;padding:6px 10px 12px;}
.jhc-qlist li{margin:0;}
.jhc-q{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  font-family:var(--jhc-serif);font-weight:600;font-size:18px;line-height:1.25;color:var(--jhc-ink);
  background:transparent;border:0;border-bottom:1px solid rgba(216,192,154,.6);padding:13px 8px;cursor:pointer;}
.jhc-qlist li:last-child .jhc-q{border-bottom:0;}
.jhc-q:hover{color:var(--jhc-terra);}
.jhc-q .jhc-chev{flex:0 0 auto;color:var(--jhc-terra);font-size:15px;}

/* Answer view */
.jhc-answer{padding:10px 18px 4px;}
.jhc-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--jhc-sans);font-size:13px;letter-spacing:.04em;
  color:var(--jhc-terra);background:transparent;border:0;cursor:pointer;padding:4px 0;margin-bottom:6px;}
.jhc-back:hover{text-decoration:underline;}
.jhc-answer-title{font-family:var(--jhc-serif);font-weight:600;font-size:22px;line-height:1.18;color:var(--jhc-ink);margin:2px 0 8px;}
.jhc-answer-body p{font-family:var(--jhc-sans);font-weight:300;font-size:15px;line-height:1.66;color:var(--jhc-ink-soft);margin:0 0 10px;}
.jhc-qty-actions{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 6px;}
.jhc-qty{font-family:var(--jhc-sans);font-weight:600;font-size:13.5px;color:var(--jhc-ink);background:var(--jhc-cream-2);
  border:1px solid var(--jhc-border);border-radius:6px;padding:9px 14px;text-decoration:none;cursor:pointer;}
.jhc-qty:hover{border-color:var(--jhc-terra);color:var(--jhc-terra);}

/* Footer actions (persistent) */
.jhc-actions{flex:0 0 auto;border-top:1px solid var(--jhc-border);background:var(--jhc-cream-2);padding:12px 16px calc(12px + env(safe-area-inset-bottom));}
.jhc-primary{display:block;text-align:center;font-family:var(--jhc-sans);font-weight:600;font-size:15px;color:#F4E7CE;
  background:var(--jhc-terra);border:0;border-radius:6px;padding:12px 16px;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 var(--jhc-terra-dark);}
.jhc-primary:hover{background:#a53f24;}
.jhc-secondary{display:block;text-align:center;font-family:var(--jhc-sans);font-size:13.5px;color:var(--jhc-ink-soft);
  text-decoration:none;margin-top:10px;padding:4px;}
.jhc-secondary:hover{color:var(--jhc-terra);}

/* focus visibility (matches the site) */
.jhc-launcher:focus-visible,.jhc-teaser-ask:focus-visible,.jhc-teaser-close:focus-visible,.jhc-q:focus-visible,
.jhc-back:focus-visible,.jhc-close:focus-visible,.jhc-primary:focus-visible,.jhc-secondary:focus-visible,
.jhc-qty:focus-visible{outline:2px solid var(--jhc-terra);outline-offset:2px;border-radius:4px;}

/* ---------- Mobile: bottom sheet -------------------------------------- */
@media (max-width:600px){
  .jhc-launcher{right:14px;}
  .jhc-teaser{right:14px;left:14px;width:auto;}
  .jhc-panel{left:10px;right:10px;width:auto;bottom:var(--jhc-bottom);
    max-height:calc(100vh - var(--jhc-bottom) - 74px);border-radius:14px;}
}

/* ---------- Mobile homepage: hero-CTA visibility gate ----------------- */
/* While the homepage hero's big Order button is in view, concierge.js sets
   body.jh-hero-cta-visible; hold back the CLOSED launcher and the teaser so they
   don't compete with it. Fixed overlays → no layout shift. The open panel
   (.jhc-panel) is intentionally NOT hidden, so it stays usable. Order page is
   unaffected (its body never gets this class). */
@media (max-width:820px){
  body.jh-hero-cta-visible .jhc-launcher,
  body.jh-hero-cta-visible .jhc-teaser{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .jhc-launcher,.jhc-teaser-ask,.jhc-primary,.jhc-q,.jhc-qty{transition:none !important;}
}