/* Navbar.
   980px and up: search left, centered logo, actions right, menu on its own row.
   979px and down (TheGem's responsive menu): menu button left, centered logo,
   wishlist / cart right, and the menu opens as a full-width sheet. */

:root {
	--thsc-bag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M5.5 8h13l-1 12h-11z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
	--thsc-nav-bg: #fdf8f4;
	--thsc-nav-ink: #4a2f22;
	--thsc-nav-muted: #9b8b80;
	--thsc-nav-accent: #a85001;
	--thsc-nav-line: rgba(74, 47, 34, 0.14);
	--thsc-wa-bg: #e8f5e9;
	--thsc-wa-ink: #2e7d4f;
	--thsc-wa-line: #b9dfc4;
}

/* Hidden until a breakpoint below turns them on. */
.thsc-navbar .thsc-navbar__search,
.thsc-navbar .thsc-navbar__actions {
	display: none;
}

@media (min-width: 980px) {
	:root {
		/* Two rows now: logo row + menu row. Feeds --thsc-site-chrome for the hero. */
		--thsc-header-height: 136px;
		--thsc-logo-max-height: 50px;
		--thsc-logo-max-width: 230px;
	}

	/* TheGem paints the bar colour on a ::before layer, not on the element. */
	#site-header .header-background,
	#site-header .header-background::before {
		background: var(--thsc-nav-bg) !important;
	}

	#site-header .header-background {
		border-bottom: 1px solid var(--thsc-nav-line);
	}

	#site-header .header-main {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas:
			"search brand actions"
			"nav nav nav";
		align-items: center;
		column-gap: 32px;
		row-gap: 16px;
		padding: 16px 0 6px !important;
	}

	#site-header .header-main > .mobile-cart,
	#site-header .header-main > .mobile-minicart-overlay,
	#site-header .primary-navigation .menu-toggle {
		display: none !important;
	}

	/* Let the menu <ul> and our actions become direct grid items of .header-main. */
	#site-header #primary-navigation {
		display: contents;
	}

	/* Search */
	.thsc-navbar #site-header .thsc-navbar__search {
		grid-area: search;
		display: flex;
		align-items: center;
		gap: 10px;
		max-width: 320px;
		padding: 0 2px 8px;
		border-bottom: 1px solid var(--thsc-nav-line);
		color: var(--thsc-nav-muted);
		transition: border-color 160ms ease, color 160ms ease;
	}

	.thsc-navbar #site-header .thsc-navbar__search:focus-within {
		border-color: var(--thsc-nav-accent);
		color: var(--thsc-nav-ink);
	}

	.thsc-navbar__search-icon {
		flex: 0 0 auto;
	}

	.thsc-navbar #site-header .thsc-navbar__search input[type="search"] {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		height: 28px;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		color: var(--thsc-nav-ink);
		font-size: 13px;
		outline: none;
		-webkit-appearance: none;
		appearance: none;
	}

	.thsc-navbar #site-header .thsc-navbar__search input[type="search"]::placeholder {
		color: var(--thsc-nav-muted);
		opacity: 1;
	}

	.thsc-navbar #site-header .thsc-navbar__search input[type="search"]::-webkit-search-cancel-button {
		-webkit-appearance: none;
	}

	/* Logo */
	#site-header .header-main > .site-title {
		grid-area: brand;
		display: block;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
		text-align: center;
	}

	#site-header .header-main > .site-title .site-logo {
		width: auto !important;
		display: inline-block;
	}

	/* Actions */
	.thsc-navbar #site-header .thsc-navbar__actions {
		grid-area: actions;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 18px;
		min-width: 0;
	}

	.thsc-navbar__actions a {
		text-decoration: none !important;
	}

	.thsc-navbar__actions .thsc-navbar__icon-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		color: var(--thsc-nav-ink);
		transition: color 160ms ease;
	}

	.thsc-navbar__actions .thsc-navbar__icon-link:hover,
	.thsc-navbar__actions .thsc-navbar__icon-link:focus-visible {
		color: var(--thsc-nav-accent);
		outline: none;
	}

	/* Cart bag. TheGem swaps this <a> after add-to-cart (class = minicart-menu-link),
	   so style it by container, not by our own class. */
	.thsc-navbar__actions .minicart-menu-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		color: var(--thsc-nav-ink);
		text-decoration: none !important;
		font-size: 0;
		transition: color 160ms ease;
	}

	.thsc-navbar__actions .minicart-menu-link:hover {
		color: var(--thsc-nav-accent);
	}

	.thsc-navbar__actions .minicart-menu-link::before {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		background: currentColor;
		-webkit-mask: var(--thsc-bag-icon) center / contain no-repeat;
		mask: var(--thsc-bag-icon) center / contain no-repeat;
	}

	.thsc-navbar__actions .minicart-menu-link .minicart-item-count {
		position: absolute;
		top: -2px;
		right: -4px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background: var(--thsc-nav-accent);
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		line-height: 1;
	}

	.thsc-navbar__actions .minicart-menu-link.empty .minicart-item-count {
		display: none;
	}

	.thsc-navbar__whatsapp {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 7px 16px;
		border: 1px solid var(--thsc-wa-line);
		border-radius: 999px;
		background: var(--thsc-wa-bg);
		color: var(--thsc-wa-ink);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.04em;
		white-space: nowrap;
		transition: background 160ms ease, border-color 160ms ease;
	}

	.thsc-navbar__whatsapp:hover,
	.thsc-navbar__whatsapp:focus-visible {
		background: #d9eddc;
		border-color: #9fcfae;
		color: var(--thsc-wa-ink);
		outline: none;
	}

	/* Primary menu — own row, centered */
	#site-header #primary-menu.no-responsive {
		grid-area: nav;
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 36px;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: center;
	}

	#site-header #primary-menu.no-responsive > li {
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#site-header #primary-menu.no-responsive > li.menu-item-search,
	#site-header #primary-menu.no-responsive > li.menu-item-cart,
	#site-header #primary-menu.no-responsive > li.menu-item-whatsapp {
		display: none !important;
	}

	#site-header #primary-menu.no-responsive > li > a {
		padding: 10px 0 12px !important;
		border: 0 !important;
		border-bottom: 1px solid transparent !important;
		background: transparent !important;
		box-shadow: none !important;
		outline: none;
		color: var(--thsc-nav-ink) !important;
		font-size: 12.5px !important;
		font-weight: 500 !important;
		letter-spacing: 0.06em;
		line-height: 1.2 !important;
		text-transform: uppercase;
		transition: color 160ms ease, border-color 160ms ease;
	}

	#site-header #primary-menu.no-responsive > li > a::before,
	#site-header #primary-menu.no-responsive > li > a::after {
		display: none !important;
	}

	#site-header #primary-menu.no-responsive > li:hover > a,
	#site-header #primary-menu.no-responsive > li.menu-item-active > a,
	#site-header #primary-menu.no-responsive > li.current-menu-item > a,
	#site-header #primary-menu.no-responsive > li.current-menu-ancestor > a,
	#site-header #primary-menu.no-responsive > li.current_page_item > a {
		color: var(--thsc-nav-accent) !important;
		border-bottom-color: var(--thsc-nav-accent) !important;
	}

	#site-header #primary-menu.no-responsive > li > a:focus-visible {
		border-bottom-color: var(--thsc-nav-accent) !important;
	}

	/* Sticky (shrunk) header: drop to one tight block */
	#site-header.fixed.shrink .header-main {
		padding-top: 8px !important;
	}

	#site-header.fixed.shrink .header-main > .site-title .site-logo img {
		max-height: 34px !important;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile + tablet (TheGem's responsive menu, 979px and below)         */
/* Bar: [menu button] [logo] [wishlist] [cart]. The button and the     */
/* wishlist + cart pair are the same width so the logo stays centered. */
/* ------------------------------------------------------------------ */

@media (max-width: 979px) {
	:root {
		--thsc-header-height: 60px;
		--thsc-m-icon: 44px;
		--thsc-m-gutter: 6px;
		--thsc-m-row: 52px;
		--thsc-chat-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4h13A1.5 1.5 0 0 1 20 5.5v10a1.5 1.5 0 0 1-1.5 1.5H9l-4 3.5V5.5z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");
	}

	/* Bar surface */
	#site-header .header-background,
	#site-header .header-background::before {
		background: var(--thsc-nav-bg) !important;
	}

	#site-header .header-background {
		border-bottom: 1px solid var(--thsc-nav-line);
	}

	#site-header .header-background > .container {
		padding-left: var(--thsc-m-gutter) !important;
		padding-right: var(--thsc-m-gutter) !important;
	}

	#site-header .header-main {
		display: flex !important;
		align-items: center;
		min-height: var(--thsc-header-height);
		padding: 0 !important;
	}

	/* Let the menu button and wishlist become direct flex items of .header-main.
	   `#page` matches TheGem's tablet rule, which makes the nav a table-cell. */
	#page #site-header #primary-navigation,
	.thsc-navbar #site-header .thsc-navbar__actions {
		display: contents;
	}

	/* Logo */
	#site-header .header-main > .site-title {
		order: 2;
		display: block !important;
		flex: 1 1 auto;
		min-width: 0;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		line-height: 1 !important;
		text-align: center;
	}

	#site-header .header-main > .site-title .site-logo {
		display: inline-block;
		width: auto !important;
		margin: 0 auto;
	}

	/* Menu button — three lines that cross into an X while the menu is open */
	.thsc-navbar #site-header #primary-navigation .menu-toggle {
		order: 1;
		position: relative;
		display: block;
		flex: 0 0 var(--thsc-m-icon);
		width: var(--thsc-m-icon);
		height: var(--thsc-m-icon);
		margin: 0 var(--thsc-m-icon) 0 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent !important;
		box-shadow: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle:focus-visible {
		outline: 2px solid var(--thsc-nav-accent);
		outline-offset: -4px;
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle span {
		position: absolute;
		left: 11px;
		width: 22px;
		height: 1.5px;
		border-radius: 1px;
		background: var(--thsc-nav-ink) !important;
		transition: top 200ms ease, transform 240ms ease, opacity 160ms ease;
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle .menu-line-1 {
		top: 15px;
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle .menu-line-2 {
		top: 21px;
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle .menu-line-3 {
		top: 27px;
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle.dl-active .menu-line-1 {
		top: 21px;
		transform: rotate(45deg);
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle.dl-active .menu-line-2 {
		opacity: 0;
	}

	.thsc-navbar #site-header #primary-navigation .menu-toggle.dl-active .menu-line-3 {
		top: 21px;
		transform: rotate(-45deg);
	}

	/* Wishlist (ours) and cart (TheGem's .mobile-cart — keeps the mini-cart panel) */
	.thsc-navbar #site-header .thsc-navbar__actions .thsc-navbar__whatsapp,
	.thsc-navbar #site-header .thsc-navbar__actions .minicart-menu-link {
		display: none;
	}

	.thsc-navbar #site-header .thsc-navbar__actions .thsc-navbar__wishlist,
	.thsc-navbar #site-header .header-main > .mobile-cart {
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 var(--thsc-m-icon);
		width: var(--thsc-m-icon);
		height: var(--thsc-m-icon);
		margin: 0;
		padding: 0;
	}

	.thsc-navbar #site-header .thsc-navbar__actions .thsc-navbar__wishlist {
		order: 3;
		color: var(--thsc-nav-ink);
		text-decoration: none !important;
		transition: color 160ms ease;
	}

	.thsc-navbar #site-header .thsc-navbar__actions .thsc-navbar__wishlist:hover,
	.thsc-navbar #site-header .thsc-navbar__actions .thsc-navbar__wishlist:focus-visible {
		color: var(--thsc-nav-accent);
		outline: none;
	}

	.thsc-navbar #site-header .header-main > .mobile-cart {
		order: 4;
	}

	.thsc-navbar #site-header .mobile-cart > a.minicart-menu-link {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--thsc-m-icon);
		height: var(--thsc-m-icon);
		color: var(--thsc-nav-ink);
		font-size: 0;
		text-decoration: none !important;
	}

	.thsc-navbar #site-header .mobile-cart > a.minicart-menu-link::before {
		content: "";
		display: block;
		position: static;
		width: 24px;
		height: 24px;
		background: currentColor !important;
		-webkit-mask: var(--thsc-bag-icon) center / contain no-repeat;
		mask: var(--thsc-bag-icon) center / contain no-repeat;
	}

	.thsc-navbar #site-header .mobile-cart > a.minicart-menu-link .minicart-item-count {
		top: 4px;
		right: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background: var(--thsc-nav-accent);
		color: #fff;
		font-size: 10px;
		font-weight: 600;
		line-height: 1;
	}

	.thsc-navbar #site-header .mobile-cart > a.minicart-menu-link.empty .minicart-item-count {
		display: none;
	}

	/* Menu panel — opens as a sheet under the bar */
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu.dl-menu {
		top: 100%;
		left: calc(-1 * var(--thsc-m-gutter));
		right: calc(-1 * var(--thsc-m-gutter));
		max-height: calc(100vh - var(--thsc-site-chrome) - 12px);
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--thsc-nav-line);
		/* TheGem blanks every responsive <ul> background with !important. */
		background: var(--thsc-nav-bg) !important;
		box-shadow: 0 22px 36px -14px rgba(74, 47, 34, 0.32);
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li {
		border: 0 !important;
		background: transparent !important;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li > a,
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.dl-back > a {
		display: block;
		min-height: var(--thsc-m-row);
		padding: 0 56px 0 24px;
		border: 0;
		border-bottom: 1px solid var(--thsc-nav-line);
		background: transparent !important;
		color: var(--thsc-nav-ink) !important;
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.06em;
		line-height: var(--thsc-m-row);
		text-transform: uppercase;
		transition: color 160ms ease, background 160ms ease;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li > a:hover,
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li > a:focus-visible,
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.menu-item-current > a,
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.menu-item-active > a,
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.current-menu-item > a {
		color: var(--thsc-nav-accent) !important;
		background: transparent !important;
		outline: none;
	}

	/* Drill-down: parent chevron and the "back" row */
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.menu-item-parent > a::after,
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.dl-back::after {
		color: var(--thsc-nav-muted);
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.dl-back {
		text-align: left;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu li.dl-back > a {
		padding: 0 24px 0 56px;
		color: var(--thsc-nav-accent) !important;
	}

	/* Items TheGem puts in the panel itself */
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-cart {
		display: none;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-search {
		padding: 18px 24px 10px;
		border: 0;
	}

	/* TheGem's search trigger icon; the field below it is always open here. */
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-search > a {
		display: none;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-search .minisearch {
		padding: 0;
		background: transparent !important;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-search .sf-input {
		width: 100%;
		height: 46px;
		padding: 0 46px 0 16px;
		border: 1px solid var(--thsc-nav-line);
		border-radius: 3px;
		background: #fff !important;
		box-shadow: none;
		color: var(--thsc-nav-ink);
		font-size: 14px;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-search .sf-input:focus {
		border-color: var(--thsc-nav-accent);
		outline: none;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-search .sf-input::placeholder {
		color: var(--thsc-nav-muted);
		opacity: 1;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-search .sf-submit-icon::before {
		color: var(--thsc-nav-ink);
	}

	/* WhatsApp row (added in header-navbar.php) */
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-whatsapp {
		padding: 6px 24px 24px;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-whatsapp > a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		min-height: 48px;
		padding: 0 20px;
		border: 1px solid var(--thsc-wa-line);
		border-radius: 999px;
		background: var(--thsc-wa-bg) !important;
		color: var(--thsc-wa-ink) !important;
		font-size: 13px;
		letter-spacing: 0.04em;
		line-height: 1.2;
		text-transform: none;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-whatsapp > a::before {
		content: "";
		width: 18px;
		height: 18px;
		background: currentColor;
		-webkit-mask: var(--thsc-chat-icon) center / contain no-repeat;
		mask: var(--thsc-chat-icon) center / contain no-repeat;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-whatsapp > a:hover,
	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu > li.menu-item-whatsapp > a:focus-visible {
		border-color: #9fcfae;
		background: #d9eddc !important;
		color: var(--thsc-wa-ink) !important;
	}
}

/* Very narrow phones: the logo gets whatever is left between the two 88px sides. */
@media (max-width: 359px) {
	:root {
		--thsc-logo-max-height: 28px;
		--thsc-logo-max-width: 112px;
	}
}

/* Tablet portrait: roomier bar, and the panel hangs under the menu button
   as a card instead of stretching across the whole width. */
@media (min-width: 768px) and (max-width: 979px) {
	:root {
		--thsc-header-height: 72px;
		--thsc-m-gutter: 20px;
		--thsc-logo-max-height: 44px;
		--thsc-logo-max-width: 200px;
	}

	.thsc-navbar #site-header #primary-navigation.responsive #primary-menu.dl-menu {
		right: auto;
		width: 400px;
		max-width: 100%;
		border-right: 1px solid var(--thsc-nav-line);
	}
}