/* 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}

.eth-chrome .mobile-nav{display:none;border-top:1px solid var(--line);background:var(--card);max-height:72vh;overflow-y:auto}
.eth-chrome .mobile-nav.open{display:block}
.eth-chrome .mobile-nav details{border-bottom:1px solid var(--line)}
.eth-chrome .mobile-nav summary,
.eth-chrome .mobile-nav > .container > a{display:block;padding:15px 4px;font-weight:500;cursor:pointer;list-style:none}
.eth-chrome .mobile-nav summary::-webkit-details-marker{display:none}
.eth-chrome .mobile-nav summary::after{content:"+";float:right;color:var(--accent)}
.eth-chrome .mobile-nav details[open] summary::after{content:"\2013"}
.eth-chrome .mobile-nav .sub a{display:block;padding:10px 18px;color:var(--muted);font-size:15px}
.eth-chrome .mobile-nav .sub a:hover{color:var(--accent-deep)}
.eth-chrome .mobile-nav > .container > a{border-bottom:1px solid var(--line)}

/* ---- 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}
}