/* chrome-base.css - the shop header (utility bar, masthead, search, department bar, flyout) for pages that have their OWN
   page styles (Avra, Spa Therapy, SINEP, Veaudry). Everything is scoped under .rch so it cannot touch the page itself.
   The footer from chrome.js carries its own styles (footer.rf3). Leon 16 Sept 2026: every brand page gets the same header. */
.rch{display:contents;
  --gold:#C6A766; --gold-deep:#A88848; --gold-pale:#F0E6CF;
  --ink:#26241F; --black:#141414; --ivory:#FAF8F2;
  --line:#E7E1D3; --mute:#7A756B; --sale:#9E2B25; --white:#FFFFFF;
  --r:12px; --r-s:8px; --w:1780px;
  --sh-h:0 2px 6px rgba(20,20,20,.06),0 18px 44px rgba(20,20,20,.13)}
.rch .util,.rch .mast,.rch .deptbar,.rch .flyout{font-family:Figtree,system-ui,-apple-system,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;
  --gold:#C6A766;--gold-deep:#A88848;--gold-pale:#F0E6CF;--ink:#26241F;--black:#141414;--ivory:#FAF8F2;--line:#E7E1D3;--mute:#7A756B;--sale:#9E2B25;--r:12px;--r-s:8px;--w:1780px;--sh-h:0 2px 6px rgba(20,20,20,.06),0 18px 44px rgba(20,20,20,.13)}
.rch .util *,.rch .mast *,.rch .deptbar *,.rch .flyout *{box-sizing:border-box;margin:0;padding:0}
.rch img{max-width:100%;display:block}
.rch a{color:inherit;text-decoration:none}
.rch button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.rch .wrap{max-width:var(--w);margin:0 auto;padding:0 40px}
.rch h4{font-family:Marcellus,Georgia,serif;font-weight:400}
.rch .util{background:var(--black);color:#CFC9BC;font-size:12.5px}
.rch .util .wrap{display:flex;align-items:center;height:36px;gap:22px}
.rch .util a:hover{color:var(--gold)}
.rch .util .r{margin-left:auto;display:flex;gap:20px;align-items:center}
.rch .mast{background:#fff;border-bottom:1px solid var(--line);color:var(--ink)}
.rch .mast .wrap{display:flex;align-items:center;gap:26px;height:88px}
.rch .brandmark img{height:46px;width:auto;object-fit:contain}
.rch .searchwrap{flex:1;max-width:720px;position:relative}
.rch .sbar{display:flex;align-items:stretch;border:2px solid var(--black);border-radius:var(--r-s);overflow:hidden;background:#fff}
.rch .sbar select{border:0;background:var(--ivory);padding:0 12px;font:inherit;font-size:13px;color:var(--ink);border-right:1px solid var(--line);cursor:pointer;outline:none;max-width:150px}
.rch .sbar input{flex:1;border:0;padding:13px 14px;font:inherit;font-size:15px;outline:none;min-width:0}
.rch .sbar button{background:var(--gold);color:var(--black);padding:0 24px;font-weight:700;font-size:15px;transition:.15s}
.rch .sbar button:hover{background:var(--gold-deep);color:#fff}
.rch .sug{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-h);display:none;max-height:440px;overflow-y:auto;z-index:400}
.rch .searchwrap.on .sug{display:block}
.rch .sug a{display:flex;gap:13px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.rch .sug a:hover{background:var(--ivory)}
.rch .sug img{width:44px;height:44px;object-fit:contain;background:var(--ivory);border-radius:6px;flex:none}
.rch .sug .t{font-size:13.5px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rch .sug .pz{margin-left:auto;font-weight:700;font-size:14px;white-space:nowrap;color:var(--gold-deep)}
.rch .sug .msg{padding:15px;color:var(--mute);font-size:13.5px}
.rch .sug .all{background:var(--ivory);justify-content:center;font-weight:600;font-size:13px;color:var(--gold-deep)}
.rch .acts{display:flex;gap:4px;align-items:center;margin-left:18px}
.rch .acts a{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;color:var(--mute);position:relative;padding:8px 12px;border-radius:var(--r-s)}
.rch .acts a:hover{background:var(--ivory);color:var(--ink)}
.rch .acts .ic{font-size:19px;line-height:1}
.rch .bdg{position:absolute;top:2px;right:6px;background:var(--sale);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 4px}
.rch .grn{position:absolute;top:6px;right:11px;width:8px;height:8px;border-radius:50%;background:#2E7D32;display:none;border:2px solid #fff}
.rch .callus{display:flex;flex-direction:column;gap:1px;margin-left:auto;text-align:right;font-size:12.5px;line-height:1.35;white-space:nowrap;color:var(--ink)}
.rch .callus .cl{color:var(--mute);font-size:11px}
.rch .callus b{font-weight:700}
.rch .tradetag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-top:3px}
.rch .deptbar{background:var(--ink);color:#fff;position:sticky;top:0;z-index:300}
.rch .deptbar .wrap{display:flex;align-items:center;gap:2px;height:48px}
.rch .deptbar a,.rch .deptbar button{font-size:14px;padding:8px 14px;border-radius:var(--r-s);color:#fff;white-space:nowrap}
.rch .deptbar a:hover,.rch .deptbar button:hover{background:rgba(255,255,255,.12)}
.rch .allbtn{display:flex;align-items:center;gap:9px;font-weight:600;background:rgba(255,255,255,.1)!important;margin-right:10px}
.rch .deptbar .hot{background:var(--sale);font-weight:600}
.rch .deptbar .hot:hover{background:#872420}
.rch .deptbar .r{margin-left:auto;display:flex;gap:2px;font-size:13px;color:#C6C1B7}
.rch .deptbar .r a.pmcs{display:inline-flex;align-items:center;border:1px solid #9CBFA0;color:#9CBFA0!important;border-radius:999px;padding:5px 13px!important;font-weight:700;margin-left:4px;white-space:nowrap}
.rch .deptbar .r a.pmcs:hover{background:#9CBFA0;color:#141414!important}
.rch .flyout{position:absolute;left:0;right:0;top:48px;background:#fff;color:var(--ink);border-bottom:1px solid var(--line);box-shadow:var(--sh-h);display:none;z-index:299}
.rch .flyout.open{display:block}
.rch .flyout .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding:30px 40px 34px;height:auto}
.rch .fcol h4{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:12px;font-family:Figtree,sans-serif;font-weight:700}
.rch .fcol ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.rch .fcol a{font-size:13.5px;color:var(--ink);padding:2px 0;display:block}
.rch .fcol a:hover{color:var(--gold-deep);text-decoration:underline}
@media(max-width:1200px){.rch .callus{display:none}.rch .flyout .wrap{grid-template-columns:repeat(3,1fr)}.rch .deptbar .r a.pmcs{padding:5px 10px!important;font-size:12.5px}}
@media(max-width:1000px){.rch .deptbar{position:static}}
@media(max-width:900px){.rch .util .r{display:none}.rch .util .wrap{justify-content:center;text-align:center}}
@media(max-width:768px){.rch .util{display:none}.rch .brandmark img{height:38px}}
@media(max-width:760px){
  .rch .wrap{padding:0 16px}.rch .flyout .wrap{padding:0 16px}
  .rch .mast .wrap{height:auto;padding:14px 0;flex-wrap:wrap;gap:12px}
  .rch .searchwrap{order:3;max-width:none;flex-basis:100%}
  .rch .sbar select{display:none}
  .rch .acts{margin-left:auto}
  .rch .deptbar .wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1px}
  .rch .deptbar .wrap::-webkit-scrollbar{display:none}
  .rch .deptbar .wrap > *{flex:0 0 auto}
  .rch .deptbar .r{display:flex!important;margin-left:10px;gap:2px;flex:0 0 auto}
  .rch .deptbar .r a{font-size:13px;padding:8px 10px}
  .rch .deptbar .r a.dbbask{display:none!important}
  .rch .flyout{display:none!important}
}