/* ==========================================================================
   TattooClub — Search experience (Overlay + /recherche/ page)
   Layout itself is native Elementor containers/widgets; this file supplies
   the interactive states (overlay open/close, live suggestions, filters,
   mobile drawer) needed for the JS layer. Same design tokens as shop.css.
   ========================================================================== */

:root{
	--srch-green: var(--tc-promo-green, #B7E41C);
	--srch-dark:  var(--tc-promo-dark, #111111);
	--srch-cream: var(--tc-promo-cream, #F9F5EF);
	--srch-muted: var(--tc-promo-muted, #68645E);
	--srch-line:  var(--tc-promo-line, #DAD4C8);
}

#srch-overlay{
	position: fixed !important;
	inset: 0;
	top: 0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100vh;
	z-index: 999999;
	background: var(--srch-dark);
	display: none !important;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
#srch-overlay.is-open{ display: block !important; }
body.srch-overlay-locked{ overflow: hidden; }

#srch-ovl-inner{
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 24px 64px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}
@media (max-width: 767px){
	#srch-ovl-inner{ padding: 20px 18px 48px; }
}

#srch-ovl-topbar{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
#srch-ovl-close{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(249,245,239,.25);
	background: transparent;
	color: #F9F5EF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 17px;
}
#srch-ovl-close:hover{ background: rgba(249,245,239,.1); }

#srch-ovl-eyebrow{
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--srch-green);
	margin: 0;
}
#srch-ovl-heading{
	font-family: 'Archivo Black', sans-serif;
	font-size: 40px;
	line-height: 1.05;
	text-transform: uppercase;
	color: #F9F5EF;
	margin: 4px 0 0;
}
@media (max-width: 767px){
	#srch-ovl-heading{ font-size: 28px; }
}

#srch-ovl-form{
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(249,245,239,.06);
	border: 1px solid rgba(249,245,239,.18);
	border-radius: 999px;
	padding: 6px 6px 6px 22px;
	max-width: 640px;
}
#srch-ovl-form i.srch-search-ic{ color: rgba(249,245,239,.55); font-size: 15px; }
#srch-ovl-input{
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: #F9F5EF;
	font-family: inherit;
	font-size: 16px;
	padding: 12px 0;
}
#srch-ovl-input::placeholder{ color: rgba(249,245,239,.4); }
#srch-ovl-submit{
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	border-radius: 50%;
	border: none;
	background: var(--srch-green);
	color: var(--srch-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 15px;
}
#srch-ovl-clear{
	display: none;
	width: 30px; height: 30px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: rgba(249,245,239,.5);
	cursor: pointer;
	font-size: 13px;
}
#srch-ovl-clear.is-visible{ display: flex; align-items: center; justify-content: center; }

.srch-pop-label{
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	color: rgba(249,245,239,.5);
	margin: 0 0 10px;
}
#srch-ovl-popular{
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.srch-pill{
	border: 1px solid rgba(249,245,239,.25);
	background: transparent;
	color: #F9F5EF;
	border-radius: 999px;
	padding: 9px 18px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	cursor: pointer;
}
.srch-pill:hover{ border-color: var(--srch-green); color: var(--srch-green); }

.srch-cat-label{
	font-family: 'Space Grotesk', sans-serif;
	font-size: 12px;
	color: rgba(249,245,239,.5);
	margin: 4px 0 12px;
}
#srch-ovl-categories{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 14px;
}
@media (max-width: 767px){
	#srch-ovl-categories{ grid-template-columns: repeat(3, 1fr); }
}
.srch-cat-tile{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
}
.srch-cat-tile__img{
	width: 100%;
	aspect-ratio: 1/1;
	border-radius: 14px;
	overflow: hidden;
	background: rgba(249,245,239,.08);
}
.srch-cat-tile__img img{ width: 100%; height: 100%; object-fit: cover; }
.srch-cat-tile__label{
	font-size: 12px;
	font-weight: 600;
	color: #F9F5EF;
	text-align: center;
}

.srch-suggestions{ display: none; flex-direction: column; gap: 22px; }
.srch-suggestions.is-visible{ display: flex; }

.srch-sugg-title{
	font-family: 'Space Grotesk', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
#srch-overlay .srch-sugg-title{ color: rgba(249,245,239,.55); }
.srch-page .srch-sugg-title{ color: var(--srch-muted); }

.srch-sugg-terms{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.srch-sugg-term{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 4px;
	cursor: pointer;
	border-radius: 8px;
	font-size: 15px;
	background: none;
	border: none;
	text-align: left;
	width: 100%;
	font-family: inherit;
}
#srch-overlay .srch-sugg-term{ color: #F9F5EF; }
.srch-page .srch-sugg-term{ color: var(--srch-dark); }
.srch-sugg-term:hover, .srch-sugg-term.is-active{ background: rgba(183,228,28,.12); }
.srch-sugg-term i{ font-size: 13px; opacity: .5; }

.srch-sugg-products{ display: flex; flex-direction: column; gap: 4px; }
.srch-sugg-product{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 4px;
	text-decoration: none;
	border-radius: 10px;
}
.srch-sugg-product:hover{ background: rgba(183,228,28,.08); }
.srch-sugg-product__img{ width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; background: rgba(120,120,120,.15); }
.srch-sugg-product__img img{ width: 100%; height: 100%; object-fit: cover; }
.srch-sugg-product__name{ font-size: 14px; font-weight: 700; }
#srch-overlay .srch-sugg-product__name{ color: #F9F5EF; }
.srch-page .srch-sugg-product__name{ color: var(--srch-dark); }
.srch-sugg-product__price{ font-size: 13px; }
#srch-overlay .srch-sugg-product__price{ color: rgba(249,245,239,.55); }
.srch-page .srch-sugg-product__price{ color: var(--srch-muted); }

.srch-sugg-viewall{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	width: fit-content;
}
#srch-overlay .srch-sugg-viewall{ color: var(--srch-green); }
.srch-page .srch-sugg-viewall{ color: var(--srch-dark); }

.srch-landing.is-hidden,
#srch-ovl-landing.is-hidden{ display: none !important; }

#srch-page-root{ --tc-page: 1; }

.srch-breadcrumb{
	font-size: 13px;
	color: var(--srch-muted);
}
.srch-breadcrumb a{ color: var(--srch-muted); text-decoration: none; }
.srch-breadcrumb a:hover{ text-decoration: underline; }

#srch-landing{
	display: flex !important;
	flex-direction: column;
	gap: 28px;
}
#srch-landing.is-hidden{ display: none !important; }

.srch-page .srch-pill{
	border-color: var(--srch-line);
	color: var(--srch-dark);
}
.srch-page .srch-pill:hover{ border-color: var(--srch-dark); background: var(--srch-dark); color: #fff; }
.srch-page .srch-pop-label,
.srch-page .srch-cat-label{ color: var(--srch-muted); }
.srch-page .srch-cat-tile__label{ color: var(--srch-dark); }
.srch-page .srch-cat-tile__img{ background: var(--srch-cream); border: 1px solid var(--srch-line); }

#srch-page-form{
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--srch-line);
	border-radius: 999px;
	padding: 6px 6px 6px 22px;
	max-width: 640px;
}
#srch-page-form i.srch-search-ic{ color: var(--srch-muted); font-size: 15px; }
#srch-page-input{
	flex: 1 1 auto; min-width: 0;
	background: transparent; border: none; outline: none;
	color: var(--srch-dark); font-family: inherit; font-size: 16px; padding: 12px 0;
}
#srch-page-submit{
	width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; border: none;
	background: var(--srch-dark); color: #fff; display: flex; align-items: center; justify-content: center;
	cursor: pointer; font-size: 15px;
}
#srch-page-submit:hover{ background: var(--srch-green); color: var(--srch-dark); }

#srch-results{ display: none !important; flex-direction: column; gap: 24px; }
#srch-results.is-visible{ display: flex !important; }

#srch-results-heading{
	font-family: 'Archivo Black', sans-serif;
	font-size: 30px;
	text-transform: uppercase;
	color: var(--srch-dark);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}
#srch-results-heading::after{
	content: '';
	flex: 1 1 auto;
	height: 2px;
	background: var(--srch-green);
	max-width: 60px;
}
#srch-results-count{ font-size: 14px; color: var(--srch-muted); margin: 0; }

#srch-results-bar{
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
#srch-sort-select{
	appearance: none;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid var(--srch-line);
	border-radius: 999px;
	padding: 10px 34px 10px 16px;
	font-size: 13px;
	font-family: 'Space Grotesk', sans-serif;
	color: var(--srch-dark);
	cursor: pointer;
}

#srch-catalogue{ display: flex; align-items: flex-start; gap: 48px; }
#srch-sidebar-filters{ flex: 0 0 260px; width: 260px; position: sticky; top: 24px; }
#srch-main{ flex: 1 1 auto; min-width: 0; }
#srch-mobile-filter-btn{ display: none; }
@media (max-width: 900px){
	#srch-catalogue{ flex-direction: column; gap: 20px; }
	#srch-sidebar-filters{ display: none; }
	#srch-mobile-filter-btn{
		display: flex; align-items: center; justify-content: center; gap: 8px;
		background: #fff; color: var(--srch-dark); border: 1px solid var(--srch-line);
		border-radius: 999px; padding: 12px 20px; font-family: 'Space Grotesk', sans-serif;
		font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer;
	}
}

.srch-filter-group{ border-bottom: 1px solid var(--srch-line); padding-bottom: 18px; margin-bottom: 18px; }
.srch-filter-group__head{ display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 12px; }
.srch-filter-group__head span{ font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--srch-dark); }
.srch-filter-group__head i{ font-size: 11px; color: var(--srch-muted); transition: transform .2s ease; }
.srch-filter-group.is-collapsed .srch-filter-group__head i{ transform: rotate(-90deg); }
.srch-filter-group.is-collapsed .srch-filter-group__list,
.srch-filter-group.is-collapsed .srch-filter-price{ display: none; }
.srch-filter-group__list{ display: flex; flex-direction: column; gap: 10px; }
.srch-filter-row{ display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--srch-dark); cursor: pointer; }
.srch-filter-row input[type="checkbox"]{ width: 16px; height: 16px; accent-color: var(--srch-green); cursor: pointer; }
.srch-filter-row .srch-filter-count{ color: var(--srch-muted); font-size: 13px; }
#srch-filter-reset{ background: none; border: none; padding: 0; font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; text-decoration: underline; color: var(--srch-dark); cursor: pointer; }

.srch-filter-price{ display: flex; flex-direction: column; gap: 10px; }
.srch-filter-price input[type="range"]{ width: 100%; accent-color: var(--srch-green); }
.srch-filter-price-labels{ display: flex; justify-content: space-between; font-size: 12px; color: var(--srch-muted); }

#srch-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1100px){ #srch-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px){ #srch-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 460px){ #srch-grid{ grid-template-columns: repeat(2, 1fr); gap: 10px; } }
#srch-card-template{ display: none; }

.srch-card{ display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--srch-line); }
.srch-card__media{ position: relative; aspect-ratio: 1/1; background: var(--srch-cream); display: flex; align-items: center; justify-content: center; }
.srch-card__media img{ width: 78%; height: 78%; object-fit: contain; }
.srch-card__media a{ display: block; width: 100%; height: 100%; }
.srch-card__heart{ position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--srch-dark); z-index: 2; }
.srch-card__heart.is-active{ color: #A3273A; }
.srch-card__body{ padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.srch-card__name{ font-size: 14px; font-weight: 700; color: var(--srch-dark); text-decoration: none; }
.srch-card__row{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.srch-card__price{ font-size: 14px; font-weight: 700; color: var(--srch-dark); }
.srch-card__add{ width: 34px; height: 34px; border-radius: 50%; background: var(--srch-dark); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.srch-card__add:hover, .srch-card__add.is-added{ background: var(--srch-green); color: var(--srch-dark); }

#srch-empty-state{ display: none; flex-direction: column; align-items: flex-start; gap: 18px; padding: 56px 0; }
#srch-empty-state.is-visible{ display: flex; }
#srch-empty-state i{ font-size: 34px; color: var(--srch-dark); }
#srch-empty-state h3{ font-family: 'Archivo Black', sans-serif; font-size: 24px; text-transform: uppercase; margin: 0; color: var(--srch-dark); }
#srch-empty-state p{ margin: 0; max-width: 480px; color: var(--srch-muted); font-size: 14px; line-height: 1.6; }
#srch-empty-cta{ display: inline-flex; align-items: center; gap: 8px; background: var(--srch-green); color: var(--srch-dark); border-radius: 999px; padding: 14px 26px; text-decoration: none; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
#srch-empty-alt-label{ font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--srch-muted); margin: 8px 0 0; }
#srch-empty-alt-terms{ display: flex; flex-wrap: wrap; gap: 10px; }

#srch-filter-drawer{ position: fixed !important; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; background: rgba(17,17,17,.45); display: none !important; flex-direction: row; align-items: stretch; justify-content: flex-end; z-index: 999998; }
#srch-filter-drawer.is-open{ display: flex !important; }
#srch-filter-panel{ width: 400px; max-width: 100%; flex: 0 0 400px; height: 100vh; overflow-y: auto; background: #fff; transform: translateX(100%); transition: transform .3s ease; box-shadow: -8px 0 32px rgba(17,17,17,.15); display: flex; flex-direction: column; }
#srch-filter-drawer.is-open #srch-filter-panel{ transform: translateX(0); }
@media (max-width: 480px){ #srch-filter-panel{ width: 100% !important; flex-basis: 100% !important; } }
#srch-filter-panel-head{ display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--srch-line); }
#srch-filter-panel-head span{ font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
#srch-filter-panel-close{ background: none; border: none; font-size: 18px; cursor: pointer; color: var(--srch-dark); }
#srch-filter-panel-body{ padding: 20px; flex: 1 1 auto; }
#srch-filter-panel-foot{ padding: 16px 20px; border-top: 1px solid var(--srch-line); display: flex; gap: 12px; }
#srch-filter-panel-foot button{ flex: 1 1 auto; border-radius: 999px; padding: 13px 16px; font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; text-transform: none; cursor: pointer; border: 1px solid var(--srch-dark); }
#srch-filter-apply-btn{ background: var(--srch-dark); color: #fff; }
#srch-filter-clear-btn{ background: #fff; color: var(--srch-dark); }

#srch-grid[data-tc-loading-host]{ position: relative; min-height: 160px; }
/* --- Header search funnel additions (2026-10-02): recent searches,
       loading + no-result states in the overlay. --- */
.srch-recent__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.srch-recent__head .srch-pop-label{ margin:0 0 10px; }
.srch-recent__clear{ background:none; border:0; padding:4px 0; margin:0 0 10px; cursor:pointer; font-family:'Space Grotesk',sans-serif; font-size:12px; color:rgba(249,245,239,.6); text-decoration:underline; text-underline-offset:3px; }
.srch-recent__clear:hover{ color:var(--srch-green); }
.srch-recent__list{ display:flex; flex-wrap:wrap; gap:8px; }
.srch-recent[hidden]{ display:none; }
.srch-pill--recent i{ margin-right:6px; opacity:.6; font-size:11px; }
#srch-overlay .srch-suggestions:not(.has-terms) #srch-ovl-sugg-terms,
#srch-overlay .srch-suggestions:not(.has-terms) .elementor-element-srchovlsuggt1,
#srch-overlay .srch-suggestions:not(.has-products) .elementor-element-srchovlsuggt2{ display:none; }
.srch-loading{ display:none; gap:6px; padding:8px 0; }
.srch-suggestions.is-loading .srch-loading{ display:flex; }
.srch-loading span{ width:8px; height:8px; border-radius:50%; background:var(--srch-green); animation:srchDot 1s ease-in-out infinite; }
.srch-loading span:nth-child(2){ animation-delay:.15s; } .srch-loading span:nth-child(3){ animation-delay:.3s; }
@keyframes srchDot{ 0%,80%,100%{ opacity:.25; transform:scale(.8);} 40%{ opacity:1; transform:scale(1);} }
.srch-ovl-empty{ display:flex; flex-direction:column; gap:10px; padding:4px 0 8px; }
.srch-ovl-empty[hidden]{ display:none; }
.srch-ovl-empty__title{ margin:0; font-family:'Archivo Black',sans-serif; font-size:20px; line-height:1.15; color:#F9F5EF; }
.srch-ovl-empty__text{ margin:0; font-family:'Space Grotesk',sans-serif; font-size:14px; color:rgba(249,245,239,.6); }
.srch-ovl-empty__pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
@media (prefers-reduced-motion: reduce){ .srch-loading span{ animation:none; opacity:.8; } }