/* Shared header, navigation, drawer, and mobile quick actions. */
:root{
  --red:#E31C5F;--red-dark:#C4134E;--red-soft:#FFF0F3;
  --ink:#171717;--ink-2:#2B2B2B;
  --g600:#666;--g500:#717171;--g400:#B0B0B0;--g300:#DDD;--g100:#F4F4F4;
  --line:#E7E7E7;
  --shadow:0 2px 14px rgba(20,20,20,.06);
  --shadow-md:0 10px 34px rgba(20,20,20,.14);
  --shadow-lg:0 20px 60px rgba(20,20,20,.18);
  --ease:cubic-bezier(.2,.8,.3,1);
  --headH:72px;
}
#site-header,#site-header *{box-sizing:border-box}
#site-header a{color:inherit;text-decoration:none}
#site-header button{font-family:inherit;cursor:pointer}
#site-header .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:800;border:none;transition:all .2s var(--ease);white-space:nowrap;cursor:pointer}
#site-header .btn:active{transform:scale(.96)}
#site-header .btn-red{background:var(--red);color:#fff;padding:14px 26px;font-size:14.5px}
#site-header .btn-red:hover{background:var(--red-dark)}
#site-header .btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--g400);padding:13px 24px;font-size:14px}
#site-header .btn-line:hover{border-color:var(--ink);background:var(--g100)}
#site-header .btn.sm{padding:10px 18px;font-size:13px}
#site-header .btn.wide{width:100%}
#site-header{position:sticky;top:0;z-index:120}
.site-head{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease}
.site-head.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.07)}
.site-head.panel-open{box-shadow:none}
.sh-inner{width:100%;max-width:1560px;margin:0 auto;padding:13px 40px;display:flex;align-items:center;gap:26px}
#site-header .sh-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;color:var(--red);letter-spacing:-.5px;flex:0 0 auto}
.sh-logo .mark{width:34px;height:34px;border-radius:11px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.sh-nav{display:flex;align-items:center;gap:4px;flex:1}
.sh-nav>a,.sh-nav>.sh-dd>button{padding:10px 15px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--ink-2);border:none;background:none;display:flex;align-items:center;gap:6px}
.sh-nav>a:hover,.sh-dd>button:hover{background:var(--g100)}
.sh-nav>a.on{background:var(--red-soft);color:var(--red)}
.sh-dd{position:relative}
.sh-dd-menu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-md);display:none;z-index:130;margin-top:10px;min-width:660px;padding:16px;border-radius:20px}
.sh-dd-menu::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.sh-dd.open .sh-dd-menu{display:block;animation:headerDropdownIn .18s ease}
.sh-dd .chev{font-size:9px;transition:transform .2s ease}
.sh-dd.open .chev{transform:rotate(180deg)}
@keyframes headerDropdownIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.dd-col{min-width:0}
.dd-col+.dd-col{border-left:1px solid var(--g100);padding-left:16px}
.dd-col h6{font-size:11.5px;font-weight:700;color:var(--g500);margin:2px 0 6px 11px}
.sh-dd-menu a,.sh-dd-menu button{display:flex;gap:11px;align-items:center;width:100%;padding:9px 11px;border:none;background:none;border-radius:14px;font-family:inherit;text-align:left;cursor:pointer;transition:background .15s ease}
.sh-dd-menu a:hover,.sh-dd-menu button:hover{background:var(--g100)}
.sh-dd-menu .ic{width:36px;height:36px;border-radius:11px;background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.sh-dd-menu .ic.ink{background:var(--g100);color:var(--ink)}
.sh-dd-menu strong{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.1px;white-space:nowrap}
.sh-dd-menu span{display:block;font-size:11.5px;color:var(--g500);font-weight:500;line-height:1.35;white-space:nowrap;margin-top:1px}
.sh-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.sh-search{display:flex;align-items:center;gap:9px;border:1.5px solid var(--g400);background:#fff;border-radius:999px;padding:9px 16px;transition:all .25s var(--ease);cursor:text}
.sh-search i{font-size:12.5px;color:var(--red);flex:0 0 auto}
.sh-search input{border:none;outline:none;background:none;font-family:inherit;font-weight:600;font-size:13px;color:var(--ink);width:130px;padding:0;transition:width .28s var(--ease)}
.sh-search input::placeholder{color:var(--g500);font-weight:600}
.sh-search:hover{border-color:var(--ink)}
.sh-search:focus-within{border-color:var(--ink);box-shadow:0 4px 18px rgba(20,20,20,.12)}
.sh-search:focus-within input{width:220px}
.sh-menu{display:flex;align-items:center;gap:9px;border:1.5px solid var(--g400);background:#fff;border-radius:999px;padding:6px 12px 6px 14px;font-size:13px;color:var(--ink);transition:all .2s ease}
.sh-menu:hover{border-color:var(--ink)}
.sh-menu .av{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.sh-mini,.lbl-short{display:none}
.menu-scrim{position:fixed;inset:0;background:rgba(15,15,15,.42);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:300}
.menu-scrim.show{opacity:1;pointer-events:auto}
.menu-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);background:#fff;z-index:310;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .32s var(--ease)}
.menu-drawer.open{transform:none;box-shadow:var(--shadow-lg)}
.md-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--g100)}
.md-head strong{font-size:16px}
.md-body{flex:1;overflow-y:auto;padding:16px 22px}
.md-cta{display:flex;align-items:center;gap:13px;width:100%;border:1.5px solid var(--red);background:linear-gradient(135deg,#fff8f6,#fff);border-radius:16px;padding:14px 16px;text-align:left;margin-bottom:20px;transition:all .2s var(--ease)}
.md-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.md-cta .ic{width:42px;height:42px;border-radius:13px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.md-cta>span:nth-child(2){flex:1;min-width:0}.md-cta strong{display:block;font-size:14.5px}.md-cta strong+span{display:block;font-size:11.5px;color:var(--g600);font-weight:500}.md-cta>i{color:var(--red);font-size:13px}
.md-group{margin-bottom:22px}.md-group h5{font-size:12.5px;color:var(--g600);margin:0 0 6px;font-weight:700}
.md-group a,.md-group button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border:none;background:none;border-radius:12px;font-family:inherit;font-weight:700;font-size:14px;color:var(--ink-2);text-align:left}
.md-group [hidden]{display:none!important}
.md-group a:hover,.md-group button:hover{background:var(--g100);color:var(--ink)}
.md-group a i,.md-group button i{width:18px;text-align:center;color:var(--g500);font-size:13px;flex:0 0 auto}
.md-group a:hover i,.md-group button:hover i{color:var(--red)}
.md-foot{display:flex;flex-direction:column;gap:9px;padding:16px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--g100)}
.md-foot .fa-whatsapp{color:var(--ink)}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:140;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:9px}
.mbar-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--g300);background:#fff;border-radius:999px;padding:12px 8px;font-weight:800;font-size:13px;color:var(--ink)}
.mbar-btn i{font-size:12.5px;color:var(--red)}.mbar-btn.red{background:var(--red);border-color:transparent;color:#fff}.mbar-btn.red i{color:#fff}
/* Horizontal clip on both, but body must use `clip`, not `hidden`: html
   already has overflow-x:hidden, so a hidden body is not propagated to the
   viewport and becomes its own scroll container, which stops every
   position:sticky descendant (#site-header itself, page filter rails)
   from sticking. `clip` clips without creating a scroll container. */
html { overflow-x: hidden !important; max-width: 100% !important; }
body { overflow-x: clip !important; max-width: 100% !important; }
@media(max-width:1280px){.sh-search:focus-within input{width:160px}}
@media(max-width:1180px){.sh-search input{width:96px}}
@media(max-width:1100px){.sh-inner{padding:12px 24px;gap:16px}}
@media(max-width:1020px){.sh-nav,.sh-list{display:none}.sh-mini{display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:999px;font-weight:800;font-size:12.5px;color:var(--ink-2)}.sh-mini:hover{background:var(--g100)}}
@media(max-width:860px){.mbar{display:flex}body{padding-bottom:78px;--toast-lift:74px}.fab-wrap,.fab-backdrop{display:none!important}}
/* phone header: the logo selector carries #site-header so the mobile size
   can actually beat the 21px desktop rule (plain .sh-logo used to lose on
   specificity and the row overflowed at 375px, clipping the menu button) */
@media(max-width:640px){.sh-inner{padding:9px 14px;gap:10px;min-width:0}#site-header .sh-logo{font-size:16px;gap:6px;min-width:0}.sh-logo .mark{width:27px;height:27px;font-size:12px;border-radius:9px;flex:0 0 auto}.sh-logo-text{white-space:nowrap}.sh-search,.sh-list{display:none !important}.sh-mini{display:inline-flex;height:36px;padding:0 11px;border:1.5px solid var(--g300);font-size:11.5px;white-space:nowrap}.sh-actions{gap:7px;min-width:0}.sh-actions .btn-red{height:36px;padding:0 13px;font-size:12px}.sh-menu{width:36px;height:36px;padding:0;border-radius:50%;justify-content:center;flex:0 0 auto}.sh-menu .av,.lbl-full{display:none}.lbl-short{display:inline}
/* member profile page: phone header drops the logo icon (wordmark stays)
   and the demo CTA; Pricing + menu keep the right end */
body.profile-page #site-header .sh-logo .mark,body.profile-page #site-header .sh-actions .btn-red{display:none}}
@media(max-width:359px){.sh-logo-text{display:none}.sh-inner{gap:8px}.sh-actions{gap:5px}.sh-mini{padding:0 9px}.sh-actions .btn-red{padding:0 11px}
/* profile page has no icon / demo button, so the wordmark still fits here */
body.profile-page .sh-logo-text{display:inline}}