/* Dr. Tijo's top bar and header. Overrides the zerobulb2020 (Stockie) theme's header look; heights are kept so page layouts don't move. */
:root {
	--dt-green: #233419;
	--dt-gold: #c49a3c;
	--dt-gold-2: #a37c25;
	--dt-ink: #1c1f1a;
	--dt-line: #ebe5d5;
}

/* ---------- Top bar ---------- */
.subheader { background: var(--dt-green) !important; color: #e4e2d4; font-size: 13px; letter-spacing: .01em; border-bottom: 1px solid rgba(196,154,60,.35); }
.subheader .content { padding: 0 !important; }
.subheader .page-container { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1248px; min-height: 38px; margin: 0 auto; padding: 0 24px !important; }
.subheader ul { display: flex; align-items: center; gap: 0; margin: 0 !important; padding: 0 !important; float: none !important; }
.subheader ul.right { margin-left: auto !important; }
.subheader ul li { display: flex; align-items: center; padding: 0 !important; margin: 0 !important; line-height: 1.2; color: inherit; border: 0 !important; }
.subheader ul li::after { display: none !important; }
.subheader ul li + li::before { content: ""; width: 1px; height: 12px; background: rgba(228,226,212,.3); margin: 0 14px; }
.subheader a { color: #e4e2d4 !important; text-decoration: none; transition: color .2s; }
.subheader a:hover, .subheader a:focus-visible { color: #e7c97f !important; }
.subheader .dt-tb-phone::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat; }
.subheader .dt-tb-hours { color: #b9bfae; }
.subheader a.dt-tb-phone { display: inline-flex; align-items: center; }
.subheader a.dt-tb-phone::before { display: inline-block !important; position: static !important; opacity: 1 !important; transform: none !important; flex: 0 0 13px; }
/* Free-shipping note sits in the middle of the bar */
.subheader li:has(.dt-tb-promo) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.subheader li:has(.dt-tb-promo)::before { display: none !important; }
.subheader .dt-tb-promo { color: #e7c97f; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }

/* ---------- Header ---------- */
#masthead.site-header { background: #fff !important; border-bottom: 1px solid var(--dt-line); box-shadow: 0 6px 24px rgba(35,52,25,.06); }
#masthead .header-wrap { padding: 0 !important; }
#masthead .header-wrap-inner { max-width: 1248px; margin: 0 auto; padding: 0 24px; height: 100%; }
#masthead .site-branding .logo img,
#masthead .site-branding .fixed-logo img { height: 74px !important; max-height: 74px !important; width: auto; }

/* Menu */
#primary-menu > li > a.menu-link { position: relative; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .04em; color: var(--dt-ink) !important; padding: 0 18px !important; transition: color .2s; }
#primary-menu > li::before { display: none !important; }
#primary-menu > li > a.menu-link::before { display: none !important; }
#primary-menu > li > a.menu-link > span { position: relative; display: inline-block; padding: 8px 0; }
#primary-menu > li > a.menu-link > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--dt-gold); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; }
#primary-menu > li > a.menu-link:hover, #primary-menu > li.current-menu-item > a.menu-link { color: var(--dt-gold-2) !important; }
#primary-menu > li > a.menu-link:hover > span::after,
#primary-menu > li.current-menu-item > a.menu-link > span::after { transform: scaleX(1); }

/* The theme doesn't mark "Our Products" as current on shop, category and product pages */
body.woocommerce-shop #primary-menu > li[id^="nav-menu-item-9021517"] > a.menu-link,
body.tax-product_cat #primary-menu > li[id^="nav-menu-item-9021517"] > a.menu-link,
body.single-product #primary-menu > li[id^="nav-menu-item-9021517"] > a.menu-link { color: var(--dt-gold-2) !important; }
body.woocommerce-shop #primary-menu > li[id^="nav-menu-item-9021517"] > a.menu-link > span::after,
body.tax-product_cat #primary-menu > li[id^="nav-menu-item-9021517"] > a.menu-link > span::after,
body.single-product #primary-menu > li[id^="nav-menu-item-9021517"] > a.menu-link > span::after { transform: scaleX(1); }

/* Sticky header after scrolling: a bit slimmer */
#masthead.header-fixed .site-branding img { height: 54px !important; max-height: 54px !important; }
#masthead.header-fixed .header-cart > a.cart .icon { width: 42px; height: 42px; }

/* Search + cart */
#masthead .menu-other { align-items: center; gap: 6px; }
#masthead .menu-other > li { margin: 0 !important; }
#masthead .menu-other > li:empty { display: none; }
#masthead .menu-other .search a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--dt-ink); transition: background .2s; cursor: pointer; }
#masthead .menu-other .search a:hover { background: #f3efe3; }
#masthead .menu-other .search .icon { font-size: 22px; color: var(--dt-ink) !important; }
#masthead .header-cart { display: flex; align-items: center; gap: 10px; }
#masthead .header-cart .cart-total, #masthead .header-cart .cart-total a { font-size: 15px !important; font-weight: 700; color: var(--dt-ink) !important; }
#masthead .header-cart > a.cart .icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--dt-green) !important; transition: background .2s; }
#masthead .header-cart > a.cart:hover .icon { background: #34492a !important; }
#masthead .header-cart > a.cart .icon svg { fill: #fff !important; color: #fff; }
#masthead .header-cart > a.cart .icon svg path { fill: #fff !important; }
#masthead .header-cart .cart-count { background: var(--dt-gold) !important; color: #1d1a10 !important; font-weight: 700; border: 2px solid #fff; min-width: 22px; height: 22px; line-height: 18px; font-size: 11.5px; }

/* Hamburger (tablet / phone) */
#masthead .hamburger-menu .hamburger { background: #f3efe3 !important; }
#masthead .hamburger-menu .hamburger span { background: var(--dt-green) !important; }

/* ---------- Tablet & phone ---------- */
@media (max-width: 1180px) {
	/* Not enough room for the hours next to the centred free-shipping note */
	.subheader li:has(.dt-tb-hours) { display: none !important; }
	#masthead .header-wrap-inner { padding: 0 16px; }
}
@media (max-width: 767px) {
	/* One slim line instead of three: free-shipping note left, My Account right */
	.subheader { font-size: 12px; }
	.subheader .page-container { min-height: 34px; padding: 0 16px !important; flex-direction: row !important; align-items: center !important; }
	.subheader li:has(.dt-tb-promo) { position: static; transform: none; order: -1; }
	.subheader .left li:not(:has(.dt-tb-promo)), .subheader .right li:has(.dt-tb-wa) { display: none !important; }
	.subheader .left { display: flex !important; }
	.subheader .right { display: flex !important; }
	.subheader { padding: 0 !important; height: auto !important; }
	.subheader .content, .subheader .page-container { padding-top: 0 !important; padding-bottom: 0 !important; }
	.subheader ul.left, .subheader ul.right { width: auto !important; text-align: left !important; }
	.subheader ul.left { margin: 0 !important; }
	.subheader ul.right { margin: 0 0 0 auto !important; }
	.subheader .right li::before { display: none !important; }
	.subheader .dt-tb-promo .dt-tb-long { display: none; }
	#masthead .site-branding .mobile-logo img, #masthead .site-branding .fixed-mobile-logo img { height: 56px !important; max-height: 56px !important; width: auto; }
	#masthead .header-cart .cart-total { display: none !important; }
	#masthead .header-cart > a.cart .icon { width: 44px; height: 44px; }
}