/* TattooClub — Global header behaviour layer.
   Layout, colours and type live in the Elementor header (Solace sitebuilder
   post 33). This file only covers what Elementor's static settings cannot
   express: sticky/compact state, open/closed states of the mega menu and
   the mobile off-canvas, counters, active states, focus rings. */

:root {
	--tc-ink: #111111;
	--tc-lime: #B7E41C;
	--tc-ivory: #F9F5EF;
	--tc-muted: #68645E;
	--tc-line: #E8E4DC;
	--tc-ann-h: 34px;
}
@media (max-width: 767px) { :root { --tc-ann-h: 32px; } }

/* ------------------------------------------------------------------ */
/* Sticky header: the announcement bar scrolls away, the main bar stays */
/* ------------------------------------------------------------------ */
header.header {
	position: sticky !important;
	top: calc(var(--tc-ann-h) * -1);
	z-index: 1000 !important;
}
body.admin-bar header.header { top: calc(32px - var(--tc-ann-h)); }
@media (max-width: 782px) { body.admin-bar header.header { top: calc(46px - var(--tc-ann-h)); } }
@media (max-width: 600px) { body.admin-bar header.header { top: calc(var(--tc-ann-h) * -1); } }

.solace-custom-header-content > .elementor-33 { position: relative; }
/* Solace's .wrapper clips with overflow:hidden, which disables position:sticky.
   overflow:clip keeps the same clipping without creating a scroll container. */
.wrapper:has(> header.header) { overflow: clip !important; }

/* Flex sizing of the header rows (Elementor "Flex child" equivalents). */
.tc-hdr-left, .tc-hdr-actions, .tc-hdr-action, .tc-hdr-navwrap, .tc-mega-center, .tc-mnav-tile { --width: auto !important; width: auto !important; }
.tc-hdr-left, .tc-hdr-actions, .tc-hdr-action { flex: 0 0 auto !important; }
.tc-hdr-navwrap { flex: 1 1 auto !important; min-width: 0; }
.tc-mega-center { flex: 1 1 auto !important; min-width: 0; }
.tc-mnav-tile { flex: 1 1 0 !important; min-width: 0; }

/* Announcement bar */
.tc-hdr-announce { overflow: hidden; }
.tc-hdr-announce .elementor-icon-list-items { flex-wrap: nowrap !important; white-space: nowrap; }
.tc-hdr-announce .elementor-icon-list-item a { transition: opacity .15s ease; }
.tc-hdr-announce .elementor-icon-list-item a:hover { opacity: .7; }
@media (max-width: 1024px) {
	.tc-hdr-announce .elementor-icon-list-item:nth-child(n+3) { display: none !important; }
}
@media (max-width: 767px) {
	.tc-hdr-announce .elementor-icon-list-item:nth-child(n+2) { display: none !important; }
	.tc-hdr-announce .elementor-icon-list-item:after { display: none !important; }
}

/* Main bar: smooth compact transition */
.tc-hdr-main { transition: min-height .2s ease, box-shadow .2s ease; }
.tc-hdr-main .tc-hdr-logo img { transition: width .2s ease; }
.tc-hdr-compact .tc-hdr-main { --min-height: 64px !important; box-shadow: 0 6px 18px rgba(17, 17, 17, .06); }
.tc-hdr-compact .tc-hdr-main .tc-hdr-logo img { width: 80px; }
.tc-hdr-compact .tc-hdr-label { display: none !important; }
@media (max-width: 1024px) {
	.tc-hdr-compact .tc-hdr-main { --min-height: 56px !important; }
	.tc-hdr-compact .tc-hdr-main .tc-hdr-logo img { width: 70px; }
}

/* Nav: active / hover state = short electric-green bar */
.tc-hdr-nav .elementor-nav-menu--main .elementor-item { position: relative; }
.tc-hdr-nav .elementor-nav-menu--main .elementor-item:after {
	left: 50% !important; right: auto !important; width: 22px !important; transform: translateX(-50%);
	bottom: 2px !important; border-radius: 3px;
}
.tc-hdr-nav .tc-nav-styles > a {
	padding-right: 30px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 10px 6px !important;
}
.tc-mega-open .tc-hdr-nav .tc-nav-styles > a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%23111111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
.tc-mega-open .tc-hdr-nav .tc-nav-styles > a:after { opacity: 1 !important; transform: translateX(-50%) scale(1) !important; }

/* Desktop search field (opens the search overlay) */
.tc-hdr-search-field .elementor-button { width: 100%; justify-content: flex-start; cursor: text; }
.tc-hdr-search-field { width: 340px; max-width: 340px; }
.tc-hdr-search-field .elementor-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-hdr-search-field .elementor-button-icon { color: var(--tc-ink); }
@media (max-width: 1366px) { .tc-hdr-search-field { width: 290px; max-width: 290px; } }
@media (max-width: 1180px) { .tc-hdr-search-field { width: 190px; max-width: 190px; } }

/* Action icons + counters */
.tc-hdr-action { cursor: pointer; }
.tc-hdr-action .elementor-icon { transition: transform .15s ease; }
.tc-hdr-action:hover .elementor-icon { transform: translateY(-1px); }
.tc-hdr-label .elementor-heading-title { white-space: nowrap; }

.tc-hdr-badge {
	left: calc(50% + 3px) !important; right: auto !important; top: -7px !important;
	pointer-events: none;
}
.tc-mnav-tile .tc-hdr-badge { left: calc(50% + 6px) !important; top: 6px !important; }
.tc-hdr-badge .elementor-button {
	min-width: 18px; height: 18px; padding: 0 5px !important; line-height: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 2px #fff; font-variant-numeric: tabular-nums;
}
.tc-mnav-tile .tc-hdr-badge .elementor-button { box-shadow: 0 0 0 2px var(--tc-ink); }
.tc-hdr-badge.is-bump .elementor-button { animation: tcHdrBump .35s ease; }
@keyframes tcHdrBump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.tc-hdr-action .tc-hdr-badge:not(.tc-badge-ready) { visibility: hidden; }
.tc-count { display: none; }
.tc-count.is-visible { display: block; }

/* Burger + touch targets */
.tc-hdr-burger .elementor-icon,
.tc-hdr-search-icon .elementor-icon,
#tc-account-icon-wrap .elementor-icon,
#tc-wishlist-icon-wrap .elementor-icon,
#tc-cart-icon-wrap .elementor-icon { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1024px) {
	.tc-hdr-actions { --gap: 2px !important; gap: 2px !important; }
}
@media (max-width: 359px) {
	.tc-hdr-main .tc-hdr-logo img { width: 66px !important; }
	.tc-hdr-burger .elementor-icon,
	.tc-hdr-search-icon .elementor-icon,
	#tc-wishlist-icon-wrap .elementor-icon,
	#tc-cart-icon-wrap .elementor-icon { min-width: 36px; }
}

/* Focus visibility */
.elementor-33 a:focus-visible,
.elementor-33 button:focus-visible,
.elementor-33 [tabindex]:focus-visible {
	outline: 2px solid var(--tc-ink); outline-offset: 2px; border-radius: 6px;
	box-shadow: 0 0 0 4px var(--tc-lime);
}
.tc-mnav a:focus-visible { outline-color: var(--tc-lime) !important; box-shadow: none !important; }

/* ------------------------------------------------------------------ */
/* Mega menu "Par styles"                                             */
/* ------------------------------------------------------------------ */
.tc-mega {
	position: absolute !important; left: 0; right: 0; top: 100%;
	z-index: 5;
	visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	box-shadow: 0 24px 40px -24px rgba(17, 17, 17, .25);
}
.tc-mega-open .tc-mega {
	visibility: visible; opacity: 1; transform: none; pointer-events: auto;
	transition: opacity .18s ease, transform .18s ease;
}
.tc-mega-scrim {
	position: fixed; inset: 0; z-index: -1; background: rgba(17, 17, 17, .28);
	opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s;
}
.tc-mega-open .tc-mega-scrim { opacity: 1; visibility: visible; transition: opacity .18s ease; }
@media (max-width: 1024px) { .tc-mega, .tc-mega-scrim { display: none !important; } }

/* Style list (mega + mobile) */
.tc-style-list .elementor-icon-list-item > a,
.tc-style-list .elementor-icon-list-item > span {
	display: flex; align-items: center; width: 100%;
	padding: 10px 14px; border-radius: 8px; position: relative;
	transition: background-color .15s ease;
}
.tc-style-list--mega .elementor-icon-list-item > a:after {
	content: ""; margin-left: auto; width: 7px; height: 7px;
	border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
}
.tc-style-list--mega .elementor-icon-list-item.is-active > a,
.tc-style-list--mega .elementor-icon-list-item > a:hover,
.tc-style-list--mega .elementor-icon-list-item > a:focus-visible { background: var(--tc-lime); }
.tc-style-tag {
	margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: 2px 6px; border-radius: 4px; background: var(--tc-ivory); color: var(--tc-muted);
}
.tc-style-count { margin-left: 8px; font-size: 12px; color: var(--tc-muted); font-weight: 500; }
.tc-style-list--mega .is-active .tc-style-count,
.tc-style-list--mega a:hover .tc-style-count { color: var(--tc-ink); }

/* Center column: real product cards rendered by header.js */
.tc-mega-products { align-items: stretch; }
.tc-mega-card {
	flex: 1 1 0; min-width: 0; max-width: 200px; display: flex; flex-direction: column; gap: 8px;
	color: var(--tc-ink); text-decoration: none;
}
.tc-mega-card__img {
	aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--tc-ivory);
	display: flex; align-items: center; justify-content: center;
}
.tc-mega-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tc-mega-card:hover .tc-mega-card__img img { transform: scale(1.04); }
.tc-mega-card__name { font: 600 14px/1.25 "Space Grotesk", sans-serif; }
.tc-mega-card__price { font: 500 13px/1.2 "Space Grotesk", sans-serif; color: var(--tc-muted); }
.tc-mega-card__cta { font: 600 13px/1.2 "Space Grotesk", sans-serif; display: inline-flex; gap: 6px; align-items: center; }
.tc-mega-card__cta:after { content: "\2192"; }
.tc-mega-card.is-skeleton .tc-mega-card__img,
.tc-mega-card.is-skeleton .tc-mega-card__name,
.tc-mega-card.is-skeleton .tc-mega-card__price {
	background: linear-gradient(90deg, #F2EEE6 0%, #FAF7F2 50%, #F2EEE6 100%); background-size: 200% 100%;
	animation: tcHdrShimmer 1.2s linear infinite; border-radius: 6px; color: transparent;
}
.tc-mega-card.is-skeleton .tc-mega-card__name { height: 14px; width: 70%; }
.tc-mega-card.is-skeleton .tc-mega-card__price { height: 12px; width: 40%; }
@keyframes tcHdrShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.tc-mega-empty {
	flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
	padding: 24px; border: 1px dashed #DDD8CF; border-radius: 8px; color: var(--tc-muted);
	font: 400 14px/1.5 "Space Grotesk", sans-serif;
}
.tc-mega-empty strong { color: var(--tc-ink); font: 400 18px/1.2 "Archivo Black", sans-serif; }
.tc-mega-empty a { color: var(--tc-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--tc-lime); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tc-mega-all[hidden] { display: none; }
.tc-mega-all {
	margin-top: 18px; align-self: flex-start; color: var(--tc-ink); font: 600 14px/1 "Space Grotesk", sans-serif;
	text-decoration: underline; text-decoration-color: var(--tc-lime); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.tc-mega-promo { overflow: hidden; }
@media (max-width: 1280px) { .tc-mega-promo { --width: 300px !important; width: 300px !important; } }

/* ------------------------------------------------------------------ */
/* Mobile / tablet off-canvas menu                                    */
/* ------------------------------------------------------------------ */
.tc-mnav {
	position: fixed !important; inset: 0; z-index: 20;
	width: 100% !important; max-width: 480px; height: 100vh; height: 100dvh;
	transform: translateX(-102%); visibility: hidden;
	transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
	overflow: hidden; overscroll-behavior: contain;
}
.tc-mnav-open .tc-mnav { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.tc-mnav-scrim {
	position: fixed; inset: 0; z-index: 10; background: rgba(17, 17, 17, .5);
	opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
}
.tc-mnav-open .tc-mnav-scrim { opacity: 1; visibility: visible; transition: opacity .2s ease; }
@media (min-width: 1025px) { .tc-mnav, .tc-mnav-scrim { display: none !important; } }

.tc-mnav-top { flex-shrink: 0; }
.tc-mnav-panels { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tc-mnav-panel {
	position: absolute !important; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
	transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s;
	visibility: hidden;
}
.tc-mnav-panel--main { transform: translateX(-30%); }
.tc-mnav-panel--sub { transform: translateX(100%); background: var(--tc-ink); }
.tc-mnav-panel.is-active { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }

.tc-mnav-list .elementor-icon-list-item > a {
	display: flex !important; align-items: center; min-height: 54px; padding: 4px 12px; border-radius: 8px;
	transition: background-color .15s ease, color .15s ease;
}
.tc-mnav-list .elementor-icon-list-item > a:hover,
.tc-mnav-list .elementor-icon-list-item > a:active { background: rgba(249, 245, 239, .06); }
.tc-mnav-list .elementor-icon-list-item.is-current > a,
.tc-mnav-list .elementor-icon-list-item.is-current > a:hover { background: var(--tc-lime); }
.tc-mnav-list .elementor-icon-list-item.is-current > a .elementor-icon-list-text,
.tc-mnav-list .elementor-icon-list-item.is-current > a .elementor-icon-list-icon i { color: var(--tc-ink) !important; }
.tc-mnav-list .elementor-icon-list-item.is-current > a .elementor-icon-list-icon svg { fill: var(--tc-ink) !important; }
.tc-mnav-list .has-sub > a:after {
	content: ""; margin-left: auto; width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
	color: var(--tc-ivory);
}
.tc-mnav-list .has-sub.is-current > a:after { color: var(--tc-ink); }

/* Mobile style list: thumbnails */
.tc-style-list--mobile .elementor-icon-list-item > a { min-height: 60px; }
.tc-style-list--mobile .elementor-icon-list-icon {
	width: 44px !important; height: 44px; flex: 0 0 44px; border-radius: 8px; overflow: hidden;
	background: #1F1F1F; display: inline-flex !important; align-items: center; justify-content: center;
}
.tc-style-list--mobile .elementor-icon-list-icon img { width: 44px !important; height: 44px !important; max-width: none !important; object-fit: cover; background: var(--tc-ivory); display: block; }
.tc-style-list--mobile .elementor-icon-list-icon.has-thumb i,
.tc-style-list--mobile .elementor-icon-list-icon.has-thumb svg { display: none; }
.tc-style-list--mobile .elementor-icon-list-item > a:after {
	content: ""; margin-left: auto; width: 8px; height: 8px;
	border-right: 2px solid var(--tc-ivory); border-top: 2px solid var(--tc-ivory); transform: rotate(45deg);
}
.tc-style-list--mobile .tc-style-tag { background: rgba(249, 245, 239, .1); color: rgba(249, 245, 239, .7); }
.tc-style-list--mobile .tc-style-count { color: rgba(249, 245, 239, .55); }

.tc-mnav-back .elementor-button { padding-left: 4px !important; }
.tc-mnav-back { position: sticky !important; top: 0; z-index: 2; background: var(--tc-ink); }

.tc-mnav-tile { border-radius: 8px; transition: background-color .15s ease; cursor: pointer; }
.tc-mnav-tile:hover, .tc-mnav-tile:active { background: rgba(249, 245, 239, .06); }

/* The header is its own stacking context: lift it above every page layer
   (floating buttons, toasts) while the off-canvas menu is open. */
html.tc-mnav-open header.header { z-index: 100000 !important; }

/* Scroll lock while an overlay is open */
html.tc-hdr-locked, html.tc-hdr-locked body { overflow: hidden !important; }
body.tc-hdr-locked { touch-action: none; }

/* Wishlist mini dropdown: anchor it under the header icon */
#tc-wishlist-dropdown { top: var(--tc-wl-dd-top, 78px) !important; }
@media (max-width: 480px) {
	#tc-wishlist-dropdown { left: 12px !important; right: 12px !important; width: auto !important; max-width: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.tc-mega, .tc-mega-scrim, .tc-mnav, .tc-mnav-scrim, .tc-mnav-panel, .tc-hdr-main, .tc-hdr-main .tc-hdr-logo img { transition: none !important; }
	.tc-mega-card.is-skeleton * { animation: none !important; }
}

/* Small desktops (1025–1200px): keep the nav on one line */
.tc-hdr-nav .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap !important; }
.tc-hdr-nav .elementor-item { white-space: nowrap; }
@media (min-width: 1025px) and (max-width: 1200px) {
	.tc-hdr-nav .elementor-nav-menu--main .elementor-item { padding-left: 10px !important; padding-right: 10px !important; }
	.tc-hdr-nav .tc-nav-styles > a { padding-right: 26px !important; background-position: right 8px center !important; }
	.tc-hdr-actions { --gap: 16px !important; gap: 16px !important; }
	.tc-hdr-search-field { width: 170px; max-width: 170px; }
}

/* Wishlist mini dropdown rows keep their desktop row layout on phones
   (Elementor otherwise stacks every flex container below 768px). */
@media (max-width: 767px) {
	#tc-wishlist-dropdown [data-tc-wl-clone="1"] > .e-con-inner { flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; }
	#tc-wishlist-dropdown [data-tc-wl-clone="1"] .e-con { --width: auto !important; }
	#tc-wishlist-dropdown [data-tc-wl-clone="1"] > .e-con-inner > .e-con:nth-child(2) { flex: 1 1 auto !important; min-width: 0; }
}