/* eThobe header and footer.
   Scoped to .eth-chrome because the header and footer appear on every page,
   including ones still using the old theme's markup. Class names like
   .nav, .logo and .footer are common enough to collide otherwise. */

.eth-chrome{
  --bg:#faf7f1;
  --panel:#f1ead9;
  --ink:#231d12;
  --muted:#6f6552;
  --accent:#9a7733;
  --accent-deep:#7a5d24;
  --line:#e6ddc8;
  --card:#ffffff;
  --display:'Marcellus','Times New Roman',serif;
  --body:'Jost','Segoe UI',Arial,sans-serif;
  font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.eth-chrome *{box-sizing:border-box}
.eth-chrome a{color:inherit;text-decoration:none}
.eth-chrome img{max-width:100%;display:block}
.eth-chrome ul{list-style:none;margin:0;padding:0}

.eth-chrome .container{max-width:1220px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eth-chrome .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px}
.eth-chrome .link-arrow{font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep);border-bottom:1px solid var(--accent);padding-bottom:3px;white-space:nowrap}
.eth-chrome .btn{display:inline-block;padding:14px 30px;font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-align:center}
.eth-chrome .btn--ink{background:var(--ink);color:var(--bg)}

/* ---- announcement bar --------------------------------------------------- */

.eth-chrome .topbar{background:var(--ink);color:#efe8d8;font-size:13px;letter-spacing:.06em}
.eth-chrome .topbar .container{display:flex;justify-content:center;gap:28px;padding-block:9px;flex-wrap:wrap;text-align:center}
.eth-chrome .topbar b{color:#d8b86a;font-weight:600}

/* ---- header ------------------------------------------------------------- */

.eth-chrome .site-header{position:sticky;top:0;z-index:60;background:rgba(250,247,241,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.eth-chrome .header-row{display:flex;align-items:center;gap:28px;padding-block:14px}
.eth-chrome .logo img{height:52px;width:auto}

.eth-chrome .nav{display:flex;gap:4px;margin-left:8px;padding:0;margin-block:0}
.eth-chrome .nav > li{position:relative}
.eth-chrome .nav > li > a{display:block;padding:12px 14px;font-weight:500;font-size:15px;letter-spacing:.03em}
.eth-chrome .nav > li > a:hover{color:var(--accent-deep)}
.eth-chrome .nav > li > a::after{content:"";display:block;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s ease;margin-top:3px}
.eth-chrome .nav > li:hover > a::after,
.eth-chrome .nav > li:focus-within > a::after{transform:scaleX(1)}
.eth-chrome .nav .caret{font-size:10px;color:var(--muted);margin-left:3px}
.eth-chrome .nav > li.has-mega{position:static}

.eth-chrome .mega{position:absolute;left:0;right:0;top:100%;background:var(--card);border-top:2px solid var(--accent);border-bottom:1px solid var(--line);box-shadow:0 26px 50px rgba(35,29,18,.14);opacity:0;visibility:hidden;transform:translateY(10px);transition:.2s ease;z-index:70}
.eth-chrome .nav li:hover > .mega,
.eth-chrome .nav li:focus-within > .mega{opacity:1;visibility:visible;transform:translateY(0)}
.eth-chrome .mega-inner{display:grid;grid-template-columns:repeat(var(--cols,3),1fr) 300px;gap:36px;padding-block:34px 38px;align-items:start}
.eth-chrome .mega h5{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.eth-chrome .mega ul{display:flex;flex-direction:column;gap:3px}
.eth-chrome .mega ul a{display:block;padding:6px 0;font-size:14.5px;color:var(--ink)}
.eth-chrome .mega ul a:hover{color:var(--accent-deep);padding-left:5px;transition:padding .15s ease}
.eth-chrome .mega ul a small{color:var(--muted);font-size:12px;display:block;margin-top:-1px}
.eth-chrome .mega-promo{background:var(--panel);padding:26px;display:flex;flex-direction:column;gap:9px;align-self:stretch}
.eth-chrome .mega-promo .eyebrow{margin-bottom:0}
.eth-chrome .mega-promo h4{font-family:var(--display);font-size:21px;font-weight:400;margin:0}
.eth-chrome .mega-promo p{margin:0;font-size:13.5px;color:var(--muted);flex:1}
.eth-chrome .mega-promo .link-arrow{align-self:flex-start}

.eth-chrome .header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.eth-chrome .icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:var(--ink);position:relative;background:none;border:0;cursor:pointer;padding:0}
.eth-chrome .icon-btn:hover{background:var(--panel)}
.eth-chrome .icon-btn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the cart count, which the old theme kept in a different place entirely */
.eth-chrome .wish-head .count.is-empty{display:none}
.eth-chrome .wish-head .count,
.eth-chrome .cart-btn .count{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
.eth-chrome .cart-btn .count.is-empty{display:none}

.eth-chrome .menu-toggle{display:none}

.eth-chrome .search-bar{display:none;border-top:1px solid var(--line);background:var(--card)}
.eth-chrome .search-bar.open{display:block}
.eth-chrome .search-bar form{display:flex;gap:10px;padding-block:14px}
.eth-chrome .search-bar input{flex:1;min-width:0;border:1px solid var(--line);background:var(--bg);padding:12px 16px;font:inherit}

/* mobile menu: see "full-screen mobile menu" below */

/* ---- footer ------------------------------------------------------------- */
/* Same surface as the header, so the page opens and closes on one colour. */

.eth-chrome .footer{background:var(--bg);color:var(--muted);font-size:14.5px;border-top:1px solid var(--line)}
.eth-chrome .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:42px;padding-block:64px 44px}
.eth-chrome .footer h4{color:var(--ink);font-size:16px;letter-spacing:.08em;margin:0 0 16px;font-family:var(--body);font-weight:600;text-transform:uppercase}
.eth-chrome .footer ul{display:flex;flex-direction:column;gap:9px}
.eth-chrome .footer a{color:var(--muted)}
.eth-chrome .footer a:hover{color:var(--accent-deep)}
.eth-chrome .footer .flogo{display:inline-block}
.eth-chrome .footer .flogo img{height:44px;width:auto}
.eth-chrome .footer address{font-style:normal;margin:16px 0;line-height:1.7;color:var(--muted)}
.eth-chrome .footer .contact a{color:var(--ink);font-weight:500}
.eth-chrome .socials{display:flex;gap:10px;margin-top:18px}
.eth-chrome .socials a{display:inline-flex;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;align-items:center;justify-content:center;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.eth-chrome .socials a:hover{border-color:var(--accent);color:var(--accent-deep)}
.eth-chrome .footer-bottom{border-top:1px solid var(--line);padding:16px 0 8px;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}

/* No chips: on a light footer the marks carry their own artwork, including
   the ones that are plain black. */
.eth-chrome .payments{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.eth-chrome .payments img{height:24px;width:auto;display:block}

/* BigCommerce injects its consent link below the footer. */
.eth-chrome ~ #shopper-consent-tracking-preferences,
.eth-chrome ~ .consent-manager,
[data-eth-hidden]{display:none !important}

@media (max-width:1100px){
  .eth-chrome .nav{display:none}
  .eth-chrome .menu-toggle{display:inline-flex}
  .eth-chrome .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  .eth-chrome .logo img{height:42px}
  .eth-chrome .header-row{gap:14px}
  .eth-chrome .topbar .container{gap:14px;font-size:12px}
  .eth-chrome .footer-grid{grid-template-columns:1fr;gap:34px;padding-block:48px 34px}
}

/* ---- search suggestions -------------------------------------------------- */

.eth-chrome .search-bar .container{position:relative}
.eth-chrome .quick-results{position:absolute;left:16px;right:16px;top:100%;z-index:80;background:var(--card);border:1px solid var(--line);border-top:2px solid var(--accent);box-shadow:0 22px 44px rgba(35,29,18,.16);max-height:62vh;overflow-y:auto}
.eth-chrome .qs-list{display:block}
.eth-chrome .qs-list li + li{border-top:1px solid var(--line)}
.eth-chrome .qs-list a{display:flex;align-items:center;gap:14px;padding:10px 16px}
.eth-chrome .qs-list a:hover{background:var(--bg)}
.eth-chrome .qs-img{width:52px;height:52px;flex:none;background:var(--panel);overflow:hidden}
.eth-chrome .qs-img img{width:100%;height:100%;object-fit:cover}
.eth-chrome .qs-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.eth-chrome .qs-name{font-size:14.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eth-chrome .qs-price{font-size:13px;color:var(--accent-deep);font-weight:600}
.eth-chrome .qs-price s{color:var(--muted);font-weight:400;margin-left:5px}
.eth-chrome .qs-all{display:block;padding:12px 16px;border-top:1px solid var(--line);background:var(--panel);font-size:13.5px;font-weight:600;color:var(--accent-deep)}
.eth-chrome .qs-all:hover{color:var(--ink)}
.eth-chrome .qs-none{margin:0;padding:18px 16px;font-size:14px;color:var(--muted)}
.eth-chrome .qs-none a{color:var(--accent-deep);border-bottom:1px solid var(--accent)}

/* real marks rather than letters */
.eth-chrome .socials a img{width:17px;height:17px;opacity:.75}
.eth-chrome .socials a:hover img{opacity:1}

/* Back-to-top sits bottom left; the chat widget owns the bottom right. */
#t4s-backToTop{right:auto;left:40px}
@media (max-width:1024px){
  #t4s-backToTop{right:auto;left:15px}
}

/* ---- full-screen mobile menu (after eclergys.com) ----------------------- */

.eth-chrome .mobile-nav{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:var(--bg);transform:translateX(-100%);visibility:hidden;transition:transform .35s ease,visibility .35s}
.eth-chrome .mobile-nav.open{transform:none;visibility:visible}
html.eth-menu-open,html.eth-menu-open body{overflow:hidden}

.eth-chrome .mnav-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.eth-chrome .mnav-logo{justify-self:center}
.eth-chrome .mnav-logo img{height:42px;width:auto}
.eth-chrome .mnav-close{width:44px;height:44px;display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.eth-chrome .mnav-close svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round}

.eth-chrome .mnav-body{flex:1;overflow-y:auto;padding:6px 24px 32px}
.eth-chrome .mnav-body details,
.eth-chrome .mnav-body > a{border-bottom:1px solid var(--line)}
.eth-chrome .mnav-body summary,
.eth-chrome .mnav-body > a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;font-family:var(--display);font-size:18px;line-height:1.25;color:var(--ink);cursor:pointer;list-style:none}
.eth-chrome .mnav-body summary::-webkit-details-marker{display:none}
.eth-chrome .mnav-body summary::after{content:"+";font-family:var(--body);font-size:20px;font-weight:300;color:var(--accent)}
.eth-chrome .mnav-body details[open] summary::after{content:"\2013"}
.eth-chrome .mnav-body > a::after{content:"\2192";font-family:var(--body);font-size:18px;color:var(--accent)}
.eth-chrome .mnav-body .sub{padding:0 0 14px}
.eth-chrome .mnav-body .sub a{display:block;padding:8px 12px;font-size:15px;color:var(--muted)}
.eth-chrome .mnav-body .sub a:hover{color:var(--accent-deep)}

.eth-chrome .mnav-search{display:flex;align-items:center;margin:16px 0 8px;border:1px solid var(--line);background:var(--card)}
.eth-chrome .mnav-search input{flex:1;min-width:0;border:0;background:none;padding:14px 16px;font:inherit;font-size:16px;color:var(--ink)}
.eth-chrome .mnav-search input:focus{outline:none}
.eth-chrome .mnav-search:focus-within{border-color:var(--accent)}
.eth-chrome .mnav-search button{width:50px;height:50px;display:grid;place-items:center;border:0;background:none;color:var(--accent-deep);cursor:pointer}
.eth-chrome .mnav-search svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round}

.eth-chrome .mnav-icons{display:flex;gap:26px;padding:22px 2px 0}
.eth-chrome .mnav-icons a{position:relative;display:inline-flex;color:var(--ink)}
.eth-chrome .mnav-icons a:hover{color:var(--accent-deep)}
.eth-chrome .mnav-icons svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.eth-chrome .mnav-icons .count{position:absolute;top:-8px;right:-11px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;line-height:18px;text-align:center}
.eth-chrome .mnav-icons .count.is-empty{display:none}

@media (min-width:1101px){
  .eth-chrome .mobile-nav{display:none}
}
@media (max-width:1100px){
  .eth-chrome .header-actions .desk-only{display:none}
}

/* ---- announcement bar on phones: one line at a time, fading ------------- */
@media (max-width:760px){
  .eth-chrome .topbar .container{position:relative;display:block;height:36px;padding-block:0}
  .eth-chrome .topbar span{position:absolute;left:16px;right:16px;top:50%;transform:translateY(-50%);opacity:0;animation:eth-topbar 12s infinite}
  .eth-chrome .topbar span:nth-child(2){animation-delay:4s}
  .eth-chrome .topbar span:nth-child(3){animation-delay:8s}
}
@keyframes eth-topbar{
  0%{opacity:0}
  5%,30%{opacity:1}
  35%,100%{opacity:0}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .eth-chrome .topbar span{animation:none}
  .eth-chrome .topbar span:first-child{opacity:1}
}