/* =============================================================================
   AWC Smart Search  v4.1  –  Based on v4.0 · Pill bar · Syne · Footer fix
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Design tokens ──────────────────────────────────────────────────────────── */
.awc-search-root {
	--c-accent:    #D0103A;
	--c-accent-dk: #A80D2F;
	--c-accent-bg: rgba(208,16,58,0.06);
	--c-accent-rg: rgba(208,16,58,0.16);
	--c-border:    #e4e7ed;
	--c-border-2:  #f0f2f5;
	--c-bg:        #ffffff;
	--c-surface:   #f8f9fb;
	--c-text:      #1c1e2e;
	--c-text-2:    #50566a;
	--c-muted:     #9aa0b4;
	--c-sale:      #d97706;
	--c-oos:       #dc2626;
	--c-green:     #16a34a;
	--r-bar:       999px;   /* ← pill */
	--r-drop:      18px;
	--r-card:      12px;
	--r-pill:      999px;
	--shadow-bar:  0 1px 8px rgba(0,0,0,0.07), 0 3px 18px rgba(0,0,0,0.05);
	--shadow-drop: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
	--f:           'DM Sans', system-ui, sans-serif;
	--f-display:   'Syne', system-ui, sans-serif;
	--ease:        cubic-bezier(.4,0,.2,1);

	position: relative;
	font-family: var(--f);
	max-width: 860px;
	margin: 0 auto;
	isolation: isolate;
}

.awc-sr-only {
	position: absolute; width:1px; height:1px; padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ── Search bar ─────────────────────────────────────────────────────────────── */
.awc-form { position: relative; }

.awc-bar {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #fff;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-bar);
	padding: 5px 5px 5px 20px;
	box-shadow: var(--shadow-bar);
	transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
	position: relative; z-index: 2;
}
.awc-bar:focus-within {
	border-color: var(--c-accent);
	box-shadow: 0 0 0 4px var(--c-accent-rg), var(--shadow-bar);
}

/* Search icon */
.awc-icon-mag {
	flex-shrink: 0; color: var(--c-muted); margin-right: 10px;
	display: flex; align-items: center; pointer-events: none;
	transition: color .18s;
}
.awc-icon-mag svg { width:17px; height:17px; display:block; }
.awc-bar:focus-within .awc-icon-mag { color: var(--c-accent); }

/* Text input */
.awc-input {
	flex: 1; min-width: 0;
	background: transparent; border: none; outline: none;
	font-family: var(--f-display); font-size: 15px; font-weight: 500;
	color: var(--c-text); padding: 9px 0;
	letter-spacing: -.01em;
}
.awc-input::placeholder { color: var(--c-muted); font-family: var(--f); font-weight: 300; }
.awc-input::-webkit-search-decoration,
.awc-input::-webkit-search-cancel-button { display:none; }

/* Icon buttons — clear, voice, image */
.awc-ibtn {
	flex-shrink: 0; display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: transparent; border: none; border-radius: 50%;
	cursor: pointer; color: var(--c-muted); padding: 0;
	transition: background .13s, color .13s, transform .12s;
}
.awc-ibtn svg { width: 16px; height: 16px; display: block; }
.awc-ibtn:hover { background: var(--c-surface); color: var(--c-text-2); transform: scale(1.1); }
.awc-ibtn.is-clear:hover { color: var(--c-oos); background: rgba(220,38,38,.06); }
.awc-ibtn.is-voice.listening { color: var(--c-oos); background: rgba(220,38,38,.07); animation: pulse-voice 1.5s ease infinite; }
.awc-ibtn.is-image:hover { color: var(--c-accent); background: var(--c-accent-bg); }

.awc-sep { width:1px; height:20px; background: var(--c-border); flex-shrink:0; margin: 0 2px; }

/* Submit button — pill shape */
.awc-submit {
	flex-shrink: 0; display: flex; align-items: center; gap: 6px;
	height: 44px; padding: 0 22px;
	background: var(--c-accent); color: #fff;
	border: none; border-radius: var(--r-bar);
	font-family: var(--f-display); font-size: 12.5px; font-weight: 700;
	cursor: pointer; letter-spacing: .06em; text-transform: uppercase;
	transition: background .18s, transform .12s, box-shadow .18s;
	white-space: nowrap; overflow: hidden; position: relative;
}
.awc-submit span { position: relative; z-index: 1; }
.awc-submit svg { width:13px; height:13px; position: relative; z-index: 1; }
/* shimmer on hover */
.awc-submit::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
	transform: translateX(-100%); transition: transform .38s var(--ease);
}
.awc-submit:hover::after { transform: translateX(100%); }
.awc-submit:hover { background: var(--c-accent-dk); transform: translateY(-1px); box-shadow: 0 4px 14px var(--c-accent-rg); }
.awc-submit:active { transform: translateY(0); box-shadow: none; }

/* ── Dropdown panel ─────────────────────────────────────────────────────────── */
.awc-drop {
	position: absolute; top: calc(100% + 10px); left:0; right:0;
	background: #fff;
	border: 1.5px solid var(--c-border);
	border-radius: var(--r-drop);
	box-shadow: var(--shadow-drop);
	z-index: 99999; overflow: hidden;
	opacity: 0; transform: translateY(-6px) scaleY(.97);
	transform-origin: top center;
	transition: opacity .16s var(--ease), transform .16s var(--ease);
	pointer-events: none;
}
.awc-drop.open { opacity:1; transform: translateY(0) scaleY(1); pointer-events: auto; }

/* Section label */
.awc-sec-lbl {
	display: flex; align-items: center; gap: 8px;
	padding: 16px 20px 7px;
	font-family: var(--f-display); font-size: 9.5px; font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase; color: var(--c-muted);
}
.awc-sec-lbl::after { content:''; flex:1; height:1px; background: var(--c-border-2); }

/* ── Category pills ─────────────────────────────────────────────────────────── */
.awc-cats { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 20px 16px; }

.awc-pill {
	display: flex; align-items: center; gap: 9px;
	background: var(--c-surface); border: 1.5px solid var(--c-border);
	border-radius: var(--r-pill); padding: 5px 15px 5px 5px;
	cursor: pointer; text-decoration: none;
	transition: border-color .13s, box-shadow .13s, background .13s, transform .13s;
	max-width: 230px;
}
.awc-pill:hover {
	border-color: var(--c-accent); background: var(--c-accent-bg);
	box-shadow: 0 2px 10px var(--c-accent-rg); transform: translateY(-1px);
}
.awc-pill-thumb {
	width: 32px; height: 32px; border-radius: 50%;
	object-fit: cover; border: 1.5px solid var(--c-border); flex-shrink:0;
}
.awc-pill-ico {
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--c-accent-bg); flex-shrink:0;
	display: flex; align-items: center; justify-content: center; color: var(--c-accent);
}
.awc-pill-ico svg { width:13px; height:13px; }
.awc-pill-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.awc-pill-parent { font-size: 9.5px; color: var(--c-muted); line-height:1.2; }
.awc-pill-name {
	display: block; font-family: var(--f-display); font-size: 13px; font-weight: 600; color: var(--c-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;
	line-height: 1.3;
}
.awc-pill-name mark { background:transparent; color: var(--c-accent); font-weight:700; }
.awc-pill-count { font-size: 10px; color: var(--c-muted); }

/* ── Product cards — horizontal scroll row ──────────────────────────────────── */
.awc-prod-row {
	display: flex; gap: 10px;
	padding: 4px 20px 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	/* hide scrollbar */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.awc-prod-row::-webkit-scrollbar { display: none; }

.awc-card {
	flex: 0 0 158px;
	width: 158px;
	display: flex; flex-direction: column;
	background: #fff; border: 1.5px solid var(--c-border);
	border-radius: var(--r-card); overflow: hidden;
	cursor: pointer; text-decoration: none;
	scroll-snap-align: start;
	transition: border-color .13s, box-shadow .13s, transform .13s;
	position: relative;
}
.awc-card:hover, .awc-card.focused {
	border-color: var(--c-accent);
	box-shadow: 0 4px 18px var(--c-accent-rg);
	transform: translateY(-2px);
}

/* Card image */
.awc-card-img-wrap {
	aspect-ratio: 1; overflow: hidden;
	background: var(--c-surface); position: relative;
}
.awc-card-img {
	width:100%; height:100%; object-fit: cover; display:block;
	transition: transform .28s var(--ease);
}
.awc-card:hover .awc-card-img { transform: scale(1.07); }

/* Badges */
.awc-badges { position: absolute; top:6px; left:6px; display:flex; flex-direction:column; gap:3px; z-index:1; }
.awc-badge {
	display:inline-block; padding: 2px 6px;
	border-radius: 4px; font-size: 9px; font-weight:700;
	letter-spacing:.05em; text-transform:uppercase; line-height:1.8;
}
.awc-badge-sale { background: var(--c-sale); color:#fff; }
.awc-badge-oos  { background: var(--c-oos);  color:#fff; }

/* Card body */
.awc-card-body { padding: 9px 11px 11px; flex:1; display:flex; flex-direction:column; gap:3px; }
.awc-card-cat  { font-family: var(--f-display); font-size:8.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--c-accent); line-height:1; }
.awc-card-name {
	font-size: 11.5px; font-weight:500; color:var(--c-text); line-height:1.38;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.awc-card-name mark { background:transparent; color:var(--c-accent); font-weight:600; }
.awc-card-price {
	margin-top:auto; padding-top:5px;
	font-family: var(--f-display); font-size: 12.5px; font-weight:700; color: var(--c-text);
}
.awc-card-price del { font-weight:400; font-size:10.5px; opacity:.4; margin-right:2px; }
.awc-card-price ins { text-decoration:none; color: var(--c-accent); }

/* ── No results ─────────────────────────────────────────────────────────────── */
.awc-empty { padding: 36px 20px; text-align:center; }
.awc-empty svg { width:36px; height:36px; display:block; margin: 0 auto 12px; opacity:.2; }
.awc-empty-h { font-family: var(--f-display); font-size:14px; font-weight:700; color:var(--c-text); margin:0 0 5px; }
.awc-empty-s { font-size:12.5px; color:var(--c-muted); margin:0; }

/* ── Skeleton ───────────────────────────────────────────────────────────────── */
.awc-skel-row { display:flex; gap:10px; padding: 4px 20px 16px; overflow:hidden; }
.awc-skel-card { flex:0 0 158px; width:158px; border:1.5px solid var(--c-border); border-radius:var(--r-card); overflow:hidden; }
.awc-sk {
	background: linear-gradient(90deg, var(--c-surface) 25%, #eef0f4 50%, var(--c-surface) 75%);
	background-size: 200% 100%;
	animation: awc-shimmer 1.4s infinite;
}
.awc-sk-img   { aspect-ratio:1; width:100%; }
.awc-sk-body  { padding:9px; display:flex; flex-direction:column; gap:6px; }
.awc-sk-t     { height:10px; border-radius:4px; width:80%; }
.awc-sk-s     { height: 9px; border-radius:4px; width:55%; }
.awc-sk-p     { height:12px; border-radius:4px; width:38%; margin-top:3px; }
@keyframes awc-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Footer — text left · red circle arrow right ────────────────────────────── */
/* Exact structure: button.awc-see-all > svg + span#awc-see-lbl + svg          */
.awc-footer { border-top:1px solid var(--c-border-2); padding: 10px 20px 13px; }

.awc-see-all {
	display: flex; align-items: center;
	width: 100%; height: 48px;
	padding: 0 8px 0 20px;
	background: transparent; border: none; cursor: pointer;
	gap: 10px;
}

/* First svg — small search icon */
.awc-see-all > svg:first-child {
	width: 15px; height: 15px; flex-shrink: 0;
	color: var(--c-muted); display: block;
}

/* Label span — grows, text left */
.awc-see-all > span {
	flex: 1; text-align: left;
	font-family: var(--f); font-size: 13.5px; font-weight: 500;
	color: var(--c-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Last svg — red circle arrow */
.awc-see-all > svg:last-child {
	flex-shrink: 0; display: block;
	width: 14px; height: 14px;
	color: #fff;
	padding: 11px; box-sizing: content-box;
	background: var(--c-accent); border-radius: 50%;
	transition: background .16s var(--ease), transform .16s, box-shadow .16s;
}
.awc-see-all:hover > svg:last-child {
	background: var(--c-accent-dk);
	transform: translateX(3px);
	box-shadow: 0 4px 14px var(--c-accent-rg);
}

/* ── Voice overlay ──────────────────────────────────────────────────────────── */
.awc-voice-ovl {
	position: absolute; inset:0; background: #fff;
	border: 1.5px solid var(--c-border); border-radius: var(--r-bar);
	display: flex; flex-direction:column; align-items:center; justify-content:center;
	gap: 13px; z-index:200;
}
.awc-voice-ring {
	width:52px; height:52px; border-radius:50%;
	background: rgba(208,16,58,.05); position:relative;
}
.awc-voice-ring::before, .awc-voice-ring::after {
	content:''; position:absolute; inset:-10px; border-radius:50%;
	border: 1.5px solid rgba(208,16,58,.2);
	animation: awc-ripple 1.5s ease-out infinite;
}
.awc-voice-ring::after { animation-delay:.6s; }
@keyframes awc-ripple { 0%{transform:scale(.8);opacity:1} 100%{transform:scale(1.8);opacity:0} }
.awc-voice-txt  { font-size:13px; color:var(--c-text-2); margin:0; }
.awc-voice-stop {
	padding: 6px 16px; background: var(--c-surface); border: 1px solid var(--c-border);
	border-radius:7px; color:var(--c-text-2); font-size:12.5px; cursor:pointer; font-family: var(--f);
}
.awc-voice-stop:hover { background: #eef0f4; }

/* ── Image overlay ──────────────────────────────────────────────────────────── */
.awc-img-ovl {
	position: absolute; inset:0; background: #fff;
	border: 1.5px solid var(--c-border); border-radius: var(--r-bar);
	display: flex; flex-direction:column; align-items:center; justify-content:center;
	gap:13px; z-index:200;
}
.awc-spin {
	width:34px; height:34px;
	border: 3px solid var(--c-border); border-top-color: var(--c-accent);
	border-radius:50%; animation: awc-spin .7s linear infinite;
}
.awc-img-ovl p { font-size:12.5px; color:var(--c-muted); margin:0; }
@keyframes awc-spin { to{ transform:rotate(360deg) } }

/* ── Animations ─────────────────────────────────────────────────────────────── */
@keyframes pulse-voice { 0%,100%{box-shadow:0 0 0 0 rgba(208,16,58,.3)} 50%{box-shadow:0 0 0 5px rgba(208,16,58,0)} }

/* ── Mobile ─────────────────────────────────────────────────────────────────── */
@media(max-width:560px){
	.awc-card { flex: 0 0 138px; width: 138px; }
	.awc-submit span { display:none; }
	.awc-submit { padding: 0 14px; }
}