/* Chaayen CRO components — shared across all pages.
   Uses the site's existing palette (#E8731A orange, #2A1508 ink, #FBF1E0 paper, #FFF4E4 milk, #5E7A45 leaf). */

/* Recipes dropdown (SEO silos) */
.chy-dropdown{position:relative;display:inline-flex;align-items:center}
.chy-drop-toggle{display:inline-flex;align-items:center;gap:5px}
.chy-caret{font-style:normal;font-size:11px;transition:transform .2s ease}
.chy-submenu{position:absolute;top:100%;left:0;min-width:260px;background:#FFFDFA;border:1px solid rgba(42,21,8,.08);border-radius:12px;box-shadow:0 14px 30px rgba(36,20,8,.14);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1001}
.chy-submenu a{padding:10px 12px;border-radius:8px;font-size:14px;white-space:normal}
.chy-submenu a:hover{background:rgba(232,115,26,.08);color:#E8731A}
.chy-dropdown:hover .chy-submenu,.chy-dropdown:focus-within .chy-submenu,.chy-dropdown.open .chy-submenu{opacity:1;visibility:visible;transform:translateY(0)}
.chy-dropdown:hover .chy-caret,.chy-dropdown.open .chy-caret{transform:rotate(180deg)}
@media(max-width:900px){
  .chy-dropdown{display:block;width:100%}
  .chy-submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;padding:0 0 0 14px;max-height:0;overflow:hidden;transition:max-height .25s ease}
  .chy-dropdown.open .chy-submenu{max-height:280px}
}

/* Quick Answer accordions (homepage journal cards; harmless elsewhere) */
.qa{display:block;margin-top:6px}
.qa-toggle{display:inline-block;cursor:pointer;font-size:13px;font-weight:700;color:#C2570F;background:rgba(232,115,26,.08);padding:6px 12px;border-radius:999px;transition:background .15s ease}
.qa-toggle:hover{background:rgba(232,115,26,.16)}
.qa-body{display:block;max-height:0;overflow:hidden;transition:max-height .3s ease}
.qa.open .qa-body{max-height:240px}
.qa-inner{display:block;font-size:14px;opacity:.85;padding:10px 2px 2px;line-height:1.5}

/* Modal shell (Free Guide + Quiz) */
.cmodal-overlay{position:fixed;inset:0;background:rgba(20,8,0,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:2000;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;font-family:'Anuphan',system-ui,sans-serif}
.cmodal-overlay.open{opacity:1;visibility:visible}
.cmodal{background:#FBF1E0;color:#241408;border-radius:20px;max-width:460px;width:100%;padding:34px 30px;position:relative;box-shadow:0 30px 80px rgba(20,8,0,.4);transform:translateY(14px);transition:transform .25s ease;max-height:90vh;overflow:auto}
.cmodal-overlay.open .cmodal{transform:none}
.cmodal-close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:#241408;opacity:.5}
.cmodal-close:hover{opacity:1}
.cmodal h3{font-family:'Fraunces',serif;font-size:26px;margin-bottom:10px;line-height:1.15}
.cmodal p{font-size:15.5px;opacity:.85;margin-bottom:16px}
.cmodal form{display:flex;flex-direction:column;gap:10px}
.cmodal input[type=email]{padding:13px 16px;border:1px solid rgba(42,21,8,.25);border-radius:12px;font-size:16px;font-family:inherit}
.cmodal .cbtn{display:inline-block;width:100%;text-align:center;border:0;cursor:pointer;background:#E8731A;color:#fff;font-weight:700;font-size:16px;padding:14px 20px;border-radius:999px;text-decoration:none;font-family:inherit;transition:background .15s ease}
.cmodal .cbtn:hover{background:#cc5f10}
.oto-price{display:inline-block;font-family:'Fraunces',serif;font-size:30px;color:#C2570F;font-weight:700}
.oto-price s{font-size:18px;color:#241408;opacity:.5;font-weight:400;margin-left:8px}
.oto-badge{display:inline-block;background:#5E7A45;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:12px}

/* Quiz wizard */
.quiz-bar{height:5px;background:rgba(42,21,8,.1);border-radius:999px;overflow:hidden;margin:0 0 14px}
.quiz-bar-fill{display:block;height:100%;width:25%;background:#E8731A;border-radius:999px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.quiz-progress{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#C2570F;opacity:.8;margin-bottom:12px}
.quiz-step{display:none}
@keyframes quizSlideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.quiz-step.active{display:block;animation:quizSlideIn .35s ease}
.quiz-q{font-family:'Fraunces',serif;font-size:22px;margin:0 0 16px}
.quiz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.quiz-opt{padding:18px 14px;border:1px solid rgba(42,21,8,.18);border-radius:14px;background:#fff;cursor:pointer;font-size:14.5px;font-weight:700;text-align:center;font-family:inherit;color:#241408;display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1.25;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.quiz-opt:hover{border-color:#E8731A;background:rgba(232,115,26,.06);transform:translateY(-2px)}
.qe{font-size:28px;line-height:1}

/* ===== Generic accordion (Power List, etc.) ===== */
.acc{border-top:1px solid rgba(42,21,8,.1);margin-top:14px;padding-top:12px}
.acc-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:700;font-size:14px;color:#C2570F;background:none;border:0;font-family:inherit;padding:0}
.acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.acc.open .acc-body{max-height:420px}
.acc-body ul{margin:12px 0 4px 18px;font-size:14.5px}
.acc-body li{margin-bottom:7px}

/* ===== Power List: shop pill + find-near-me ===== */
.shop-pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #E8731A;color:#C2570F;background:#fff;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease}
.shop-pill:hover{background:#E8731A;color:#fff}
.find-near{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:#1A1A1A;opacity:.6;margin-left:8px;white-space:nowrap}

/* ===== Learn: TL;DR takeaways box ===== */
.tldr{background:#FAFAFA;border:1px solid rgba(42,21,8,.1);border-left:5px solid #E8731A;border-radius:0 14px 14px 0;padding:22px 26px;margin:0 0 34px}
.tldr h2{font-size:20px !important;margin:0 0 14px !important;border:0 !important;padding:0 !important}
.tldr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.tldr-row{display:flex;flex-direction:column;font-size:14.5px}
.tldr-row b{color:#C2570F;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
@media(max-width:560px){.tldr-grid{grid-template-columns:1fr}}

/* ===== Learn: gamified quiz CTA ===== */
.quiz-cta{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;background:#1A1A1A;color:#fff;border-radius:22px;padding:34px 36px;margin:40px 0}
.quiz-cta h3{color:#fff;font-family:'Fraunces',serif;font-size:26px;margin:0 0 16px;line-height:1.2}
.quiz-cta .flavs{display:flex;gap:10px;flex-wrap:wrap}
.quiz-cta .flav{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;color:#fff}
.quiz-cta .cta-right{text-align:center}
@keyframes ctaPulse{0%,100%{transform:scale(1);box-shadow:0 10px 30px rgba(232,115,26,.5)}50%{transform:scale(1.04);box-shadow:0 16px 40px rgba(232,115,26,.7)}}
.quiz-cta-btn{display:inline-block;background:#fff;color:#1A1A1A;font-weight:800;font-size:16px;padding:16px 26px;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(232,115,26,.5);animation:ctaPulse 2.2s ease-in-out infinite;cursor:pointer;border:0;font-family:inherit}
@media(prefers-reduced-motion:reduce){.quiz-cta-btn{animation:none}}
@media(max-width:700px){.quiz-cta{grid-template-columns:1fr;text-align:center}.quiz-cta .flavs{justify-content:center}}

/* ===== Watch: thumbnail + video modal lightbox ===== */
.video-thumb{position:relative;cursor:pointer;border-radius:14px;overflow:hidden;display:block;aspect-ratio:16/9;background:#1A1A1A}
.video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.video-thumb:hover img{transform:scale(1.05)}
.video-thumb .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.video-thumb .play span{width:64px;height:64px;border-radius:50%;background:rgba(20,8,0,.6);display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.video-thumb:hover .play span{background:#E8731A}
.video-thumb .play span::after{content:"";border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff;margin-left:4px}
#videoModal .cmodal{max-width:920px;padding:0;overflow:hidden}
.vm-split{display:grid;grid-template-columns:70% 30%}
.vm-frame{position:relative;background:#000;aspect-ratio:16/9}
.vm-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vm-gear{padding:22px 20px;background:#FAFAFA}
.vm-gear h4{font-family:'Fraunces',serif;font-size:17px;margin:0 0 12px}
.vm-gear a{display:block;background:#fff;border:1px solid rgba(42,21,8,.12);border-radius:10px;padding:11px 14px;margin-bottom:9px;text-decoration:none;color:#1A1A1A;font-weight:600;font-size:14px;transition:border-color .15s ease}
.vm-gear a:hover{border-color:#E8731A;color:#C2570F}
#videoModal .cmodal-close{background:rgba(255,255,255,.85);border-radius:50%;width:32px;height:32px;z-index:3}
@media(max-width:700px){.vm-split{grid-template-columns:1fr}}

/* ===== Culture: micro-map + Taste the Terroir card ===== */
.micro-map{position:absolute;top:50%;right:4%;transform:translateY(-50%);width:140px;opacity:.95;pointer-events:none;z-index:2}
.micro-map .map-dot{fill:#E8731A}
.micro-map .map-pulse{fill:#E8731A;opacity:.4}
.map-label{font-size:8.5px;font-weight:700;fill:#FFF4E4}
@media(max-width:900px){.micro-map{display:none}}
.terroir{display:grid;grid-template-columns:1fr 1.3fr;gap:26px;align-items:center;background:#FAFAFA;border:1px solid rgba(26,26,26,.14);border-radius:18px;padding:26px;margin:32px 0;box-shadow:0 14px 34px rgba(26,26,26,.1)}
.terroir-img{background:linear-gradient(160deg,#41230E,#E8731A);border-radius:14px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fraunces',serif;text-align:center;padding:18px;font-size:18px;line-height:1.3}
.terroir h3{font-family:'Fraunces',serif;font-size:24px;margin:0 0 10px}
.terroir p{font-size:15px;margin:0 0 16px;opacity:.85}
.terroir-btn{display:inline-block;background:#E8731A;color:#fff !important;font-weight:700;padding:13px 22px;border-radius:999px;text-decoration:none;transition:background .15s ease}
.terroir-btn:hover{background:#cc5f10}
@media(max-width:600px){.terroir{grid-template-columns:1fr;text-align:center}}

/* ===== Floating Back-to-Top (homepage) ===== */
.back-top{position:fixed;bottom:22px;right:22px;z-index:1500;background:#E8731A;color:#fff;border:0;border-radius:999px;padding:12px 18px;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;box-shadow:0 10px 26px rgba(20,8,0,.3);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease,visibility .3s;text-decoration:none}
.back-top.show{opacity:1;visibility:visible;transform:none}

/* ===== One-time pulse/glow for gear cards ===== */
@keyframes gearPulse{0%{box-shadow:0 0 0 0 rgba(232,115,26,0)}30%{box-shadow:0 0 0 4px rgba(232,115,26,.55)}100%{box-shadow:0 0 0 0 rgba(232,115,26,0)}}
.gear-pulse{animation:gearPulse 1.4s ease-out 1}

/* ===== Homepage hero ghost CTA + smart anchor ===== */
.btn-ghost-hero{background:transparent;border:2px solid var(--orange,#E8731A);color:var(--milk,#FFF4E4)}
.btn-ghost-hero:hover{background:var(--orange,#E8731A);color:#fff}
#gear{scroll-margin-top:84px}

/* ===== Index pages: Recipes (Journal) + Facts & Health enhancements ===== */
/* Filter + search toolbar */
.recipe-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 44px}
.filter-group{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;max-width:100%}
.filter-group::-webkit-scrollbar{display:none}
.filter-btn{flex:0 0 auto;border:1px solid rgba(42,21,8,.15);background:#FAFAFA;color:#1A1A1A;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s ease,color .15s ease,border-color .15s ease}
.filter-btn:hover{border-color:#E8731A}
.filter-btn.active{background:#E8731A;color:#fff;border-color:#E8731A}
.recipe-search{position:relative;flex:0 1 290px;min-width:200px}
.recipe-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.45;pointer-events:none}
.recipe-search input{width:100%;padding:11px 16px 11px 42px;border:1px solid rgba(42,21,8,.15);border-radius:999px;font-size:15px;font-family:inherit;background:#FAFAFA;color:#1A1A1A}
.recipe-search input:focus{outline:none;border-color:#E8731A}
.no-results{text-align:center;opacity:.7;font-size:1.05rem;padding:30px 0;grid-column:1/-1}
@media(max-width:768px){.recipe-toolbar{flex-direction:column;align-items:stretch}.recipe-search{flex:1 1 auto}}

/* Card tag row + micro-metadata */
.card-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}
.card-meta{display:flex;flex-wrap:wrap;gap:14px;margin:10px 0 14px}
.meta-badge{font-size:12.5px;color:#1A1A1A;opacity:.6;font-weight:600}
.chart-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#C2570F;border:1px solid rgba(232,115,26,.5);border-radius:999px;padding:3px 9px;white-space:nowrap}

/* Featured gear affiliate card (Recipes slot 5) */
.gear-affiliate{border:2px dashed #E8731A !important}
.badge-gear{background:#E8731A;color:#fff}
.gear-cta{display:inline-block;background:#E8731A;color:#fff !important;padding:11px 20px;border-radius:999px;font-weight:700;text-decoration:none;transition:background .15s ease}
.gear-cta:hover{background:#cc5f10}

/* Quick Verdict block (Facts cards) */
.verdict{margin:2px 0 14px;padding:12px 14px;background:rgba(232,115,26,.08);border-left:4px solid #E8731A;border-radius:0 10px 10px 0;font-size:14.5px;font-weight:600;color:#1A1A1A;line-height:1.5}

/* Inline lead-capture card (Facts slot 4) */
.lead-card{background:#E8731A;color:#fff;border-radius:18px;padding:30px 26px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 16px 36px rgba(194,87,15,.28)}
.lead-card h3{color:#fff;font-size:1.45rem;margin:0 0 8px;line-height:1.2}
.lead-card p{color:#fff;opacity:.95;font-size:.96rem;margin:0 0 16px;line-height:1.5}
.lead-card form{display:flex;flex-direction:column;gap:10px}
.lead-card input{padding:12px 16px;border:0;border-radius:10px;font-size:15px;font-family:inherit;color:#1A1A1A}
.lead-card .lead-btn{background:#1A1A1A;color:#fff;border:0;border-radius:10px;padding:13px 18px;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit;transition:opacity .15s ease}
.lead-card .lead-btn:hover{opacity:.85}
.lead-card .lead-msg{font-size:13px;margin-top:4px;min-height:1em;color:#fff}
</content>