/* =========================================================
   Cartloop হেডার — ডিজাইনের উৎস: mockups/header-categories.html
   ========================================================= */
:root {
	--cl-brand: #2596be;
	--cl-brand-dark: #1d7fa2;
	--cl-brand-deep: #176a88;
	--cl-accent: #f5c84c;
}

/* ---------- টপ বার ---------- */
.whb-top-bar {
	background: linear-gradient(90deg, var(--cl-brand-deep), var(--cl-brand)) !important;
	color: #fff;
	font-size: 13px;
}
.whb-top-bar .cl-hotline {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #fff;
	white-space: nowrap;
}
.whb-top-bar .cl-hotline svg { width: 15px; height: 15px; flex: none; }
.whb-top-bar .cl-hotline b { font-weight: 700; }
.whb-top-bar .cl-toplinks { display: flex; justify-content: flex-end; gap: 22px; white-space: nowrap; }
.whb-top-bar .cl-toplinks a { color: #fff; opacity: .95; }
.whb-top-bar .cl-toplinks a:hover { opacity: 1; text-decoration: underline; color: #fff; }
.whb-top-bar .cl-topbar-m { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }

/* ---------- মূল হেডার: সার্চ পুরো জায়গা নেবে ---------- */
.whb-general-header .whb-column9 { flex: 1 1 auto; }
.whb-general-header .whb-column8,
.whb-general-header .whb-column10 { flex: 0 0 auto; }
.whb-general-header .whb-column9 .wd-header-search-form { flex: 1 1 auto; max-width: none; width: 100%; }
.whb-general-header .whb-column10 { gap: 4px; }

/* সার্চ বক্স: নীল বর্ডার, ভেতরে "Search" লেখা বাটন */
.whb-general-header .wd-header-search-form form.searchform input.s {
	height: 46px;
	border: 2px solid var(--cl-brand);
	border-radius: 40px;
	background: #fff;
	padding-left: 20px;
	padding-right: 160px;
	font-size: 14px;
}
.whb-general-header .wd-header-search-form form.searchform .searchsubmit {
	top: 4px;
	right: 4px;
	width: auto;
	height: 38px;
	padding: 0 26px;
	border-radius: 30px;
	background: var(--cl-brand);
	color: #fff;
}
.whb-general-header .wd-header-search-form form.searchform .searchsubmit:hover { background: var(--cl-brand-dark); }
.whb-general-header .wd-header-search-form form.searchform .searchsubmit span {
	font-size: 14px;
	font-weight: 700;
	width: auto;
	line-height: 38px;
}
.whb-general-header .wd-header-search-form form.searchform .searchsubmit::after { display: none; }
.whb-general-header .wd-header-search-form form.searchform .wd-clear-search { right: 150px; }
.whb-general-header .wd-header-search-form { --cl-lens-right: 112px; }
/* লেন্স বাটন বন্ধ থাকলে তার জায়গা ছেড়ে দেওয়া */
body.cl-no-lens .whb-general-header .wd-header-search-form form.searchform input.s { padding-right: 116px; }
body.cl-no-lens .whb-general-header .wd-header-search-form form.searchform .wd-clear-search { right: 106px; }

/* কার্ট: কমলা থেকে ব্র্যান্ডের নীল */
.whb-general-header .wd-header-cart.wd-design-8 .wd-tools-inner { background-color: var(--cl-brand) !important; }
.whb-general-header .wd-header-cart.wd-design-8 .wd-tools-icon,
.whb-general-header .wd-header-cart.wd-design-8 .wd-tools-count { color: var(--cl-brand); }

/* ছবি দিয়ে সার্চের বাটন */
.wd-header-search-form form.searchform .cl-lens,
.wd-header-search-form-mobile form.searchform .cl-lens {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: var(--cl-lens-right, 120px);
	z-index: 3;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--cl-brand);
	box-shadow: none;
}
.wd-header-search-form form.searchform .cl-lens:hover,
.wd-header-search-form-mobile form.searchform .cl-lens:hover { background: #eef6fa; }
.wd-header-search-form form.searchform .cl-lens svg,
.wd-header-search-form-mobile form.searchform .cl-lens svg { width: 22px; height: 22px; }
.wd-header-search-form form.searchform .cl-lens svg .a,
.wd-header-search-form-mobile form.searchform .cl-lens svg .a { stroke: var(--cl-accent); }

/* ---------- ক্যাটাগরি বার ---------- */
.whb-header-bottom .whb-column12 { flex: 1 1 auto; min-width: 0; }
.whb-header-bottom .whb-column11,
.whb-header-bottom .whb-column13 { display: none; }
.whb-header-bottom .wd-header-text { width: 100%; padding: 0; }

.cl-catbar { position: relative; width: 100%; }
.cl-cats {
	display: flex;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.cl-cats::-webkit-scrollbar { display: none; }
.cl-cat {
	flex: 0 0 auto;
	width: 130px;
	padding: 12px 8px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: #fff !important;
	text-decoration: none;
	border-radius: 8px;
	transition: background .15s;
	line-height: 1.2;
}
.cl-cat:hover { background: rgba(255, 255, 255, .12); }
.cl-cat svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cl-cat svg .a { stroke: var(--cl-accent); }
.cl-cat svg .af { fill: var(--cl-accent); stroke: none; }
.cl-cat span {
	font-size: 14px;
	font-weight: 600;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cl-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	display: none;
	place-items: center;
	cursor: pointer;
	z-index: 2;
}
.cl-arrow:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.cl-arrow svg { width: 18px; height: 18px; }
.cl-prev { left: 0; }
.cl-next { right: 0; }
.cl-catbar.cl-can-prev .cl-prev,
.cl-catbar.cl-can-next .cl-next { display: grid; }

/* ---------- ছবি দিয়ে সার্চের পপআপ ---------- */
.cl-lens-pop {
	position: fixed;
	z-index: 100000;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
	padding: 20px;
	color: #242424;
	max-width: calc(100vw - 24px);
}
.cl-lens-pop[hidden] { display: none; }
.cl-lens-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.cl-lens-pop .cl-lens-x { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #888; padding: 0 4px; min-height: 0; }
.cl-drop { border: 2px dashed #b9d9e6; border-radius: 12px; background: #f5fafc; padding: 26px 16px; text-align: center; color: #777; font-size: 14px; }
.cl-drop.is-over { border-color: var(--cl-brand); }
.cl-drop svg { width: 44px; height: 44px; color: var(--cl-brand); margin: 0 auto 8px; display: block; }
.cl-drop b { color: #242424; }
.cl-upload { display: inline-block; margin-top: 12px; background: var(--cl-brand); color: #fff; border-radius: 24px; padding: 9px 22px; font-weight: 700; font-size: 13px; cursor: pointer; }
.cl-upload input { display: none; }
.cl-or { display: flex; align-items: center; gap: 10px; color: #aaa; font-size: 12px; margin: 14px 0; }
.cl-or::before, .cl-or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.cl-urlrow { display: flex; gap: 8px; }
.cl-lens-pop .cl-urlrow input { flex: 1; min-width: 0; border: 1px solid #e5e7eb; border-radius: 24px; padding: 0 14px; height: 40px; font-size: 13px; }
.cl-lens-pop .cl-urlrow input:focus { border-color: var(--cl-brand); }
.cl-lens-pop .cl-urlrow button { border: 1px solid var(--cl-brand); background: #fff; color: var(--cl-brand); border-radius: 24px; padding: 0 18px; min-height: 40px; font-weight: 700; font-size: 13px; cursor: pointer; }
.cl-preview { display: none; align-items: center; gap: 14px; margin-top: 14px; padding: 12px; border-radius: 12px; background: #f5fafc; font-size: 14px; }
.cl-preview.is-on { display: flex; }
.cl-preview img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cl-spin { width: 18px; height: 18px; border: 2px solid #cfe6ef; border-top-color: var(--cl-brand); border-radius: 50%; animation: cl-spin .8s linear infinite; flex: none; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
/* খোঁজ ব্যর্থ হলে: স্পিনার লুকানো, বার্তা লাল */
.cl-preview.is-error .cl-spin { display: none; }
.cl-preview.is-error .cl-preview-msg { color: #f0475e; }
.cl-preview:not(:has(img[src])) img { display: none; }

/* ---------- মোবাইল ---------- */
@media (max-width: 1024px) {
	.whb-top-bar { font-size: 12px; }
	.whb-top-bar .cl-toplinks { gap: 12px; }
	.whb-top-bar .cl-toplinks .cl-hide-mobile { display: none; }

	/* নিচের সারি: উপরে সার্চ (সাদা), নিচে নীল ক্যাটাগরি বার */
	.whb-header-bottom { background: #fff !important; height: auto !important; }
	.whb-header-bottom .whb-header-bottom-inner,
	.whb-header-bottom .whb-column_mobile5 { height: auto !important; max-height: none !important; }
	.whb-header-bottom .whb-column_mobile5 { flex-direction: column; align-items: stretch; width: 100%; padding: 0; }
	.whb-header-bottom .whb-column_mobile5 .wd-header-search-form-mobile { width: 100%; padding: 2px 6px 10px; }
	.wd-header-search-form-mobile form.searchform input.s::placeholder { color: #888; opacity: 1; }
	.wd-header-search-form-mobile form.searchform input.s { color: #242424; }
	/* সার্চের ফলাফল ক্যাটাগরি বারের উপরে, সার্চ বক্সের সমান চওড়া */
	.whb-header-bottom .wd-header-search-form-mobile { position: relative; z-index: 20; }
	.wd-header-search-form-mobile .wd-search-results { left: 0 !important; right: 0 !important; width: auto !important; transform: none; }
	.whb-header-bottom .whb-column_mobile5 .wd-header-text {
		background: var(--cl-brand);
		width: 100vw;
		margin-left: calc(50% - 50vw);
		padding: 0 6px;
	}

	/* মোবাইলের সার্চ বক্স, ডেস্কটপের মতো */
	.wd-header-search-form-mobile form.searchform input.s {
		height: 42px;
		border: 2px solid var(--cl-brand);
		border-radius: 40px;
		background: #fff;
		padding-left: 16px;
		padding-right: 128px;
		font-size: 13px;
	}
	.wd-header-search-form-mobile { --cl-lens-right: 86px; }
	.wd-header-search-form-mobile form.searchform .cl-lens { width: 34px; height: 34px; }
	.wd-header-search-form-mobile form.searchform .wd-clear-search { right: 122px; }
	body.cl-no-lens .wd-header-search-form-mobile form.searchform input.s { padding-right: 90px; }
	body.cl-no-lens .wd-header-search-form-mobile form.searchform .wd-clear-search { right: 84px; }
	.wd-header-search-form-mobile form.searchform .searchsubmit {
		top: 4px;
		right: 4px;
		width: auto;
		height: 34px;
		padding: 0 16px;
		border-radius: 30px;
		background: var(--cl-brand);
		color: #fff;
	}
	.wd-header-search-form-mobile form.searchform .searchsubmit span { font-size: 13px; font-weight: 700; width: auto; line-height: 34px; }
	.wd-header-search-form-mobile form.searchform .searchsubmit::after { display: none; }

	.cl-cat { width: 78px; padding: 10px 4px 9px; gap: 6px; }
	.cl-cat svg { width: 28px; height: 28px; }
	.cl-cat span { font-size: 11.5px; }
	.cl-catbar .cl-arrow { display: none !important; }
}