/* ET Category Pages — стилі у дусі eBay category page, адаптовано під Wolmart */
.etcp {
	--etcp-accent: var(--wolmart-primary, #336699);
	--etcp-text: #222;
	--etcp-muted: #666;
	--etcp-line: #e5e5e5;
	--etcp-bg: #f5f6f8;
	--etcp-cols: 4;
	color: var(--etcp-text);
	font-size: 15px;
	line-height: 1.5;
}
.etcp a { color: inherit; text-decoration: none; }
.etcp a:hover { color: var(--etcp-accent); text-decoration: underline; }
.etcp-count { color: var(--etcp-muted); font-weight: 400; font-size: .9em; margin-left: .25em; }
.etcp-notice { color: #b00; background: #fff3f3; padding: 10px 14px; border: 1px solid #f3c2c2; }
.etcp-empty { color: var(--etcp-muted); padding: 20px 0; }

/* Банер */
.etcp-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 180px;
	margin: 0 0 32px;
	padding: 32px 36px;
	border-radius: 12px;
	background: linear-gradient(135deg, #1f2b3a 0%, #2f4a68 60%, #3d6a91 100%);
	color: #fff;
	overflow: hidden;
}
.etcp-banner__img {
	position: absolute; inset: 0;
	background-size: cover; background-position: center right;
	opacity: .28;
}
.etcp-banner__body { position: relative; max-width: 640px; }
.etcp-banner__title { margin: 0 0 8px; font-size: 32px; font-weight: 700; line-height: 1.2; color: #fff; }
.etcp-banner__desc { margin: 0 0 16px; font-size: 15px; opacity: .92; }
.etcp-banner__desc p { margin: 0 0 8px; }
.etcp-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 24px;
	background: #fff;
	color: #1f2b3a !important;
	font-weight: 600;
	transition: background .15s;
}
.etcp-btn:hover { background: #eaf1f8; text-decoration: none !important; }

/* Секції */
.etcp-section { margin: 0 0 40px; }
.etcp-section__title {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

/* Плитки із зображеннями */
.etcp-tiles {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 18px 16px;
}
.etcp-tile a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.etcp-tile a:hover { text-decoration: none; }
.etcp-tile__img {
	display: flex; align-items: center; justify-content: center;
	width: 128px; height: 128px;
	border-radius: 50%;
	background: var(--etcp-bg);
	overflow: hidden;
	transition: box-shadow .15s, transform .15s;
}
.etcp-tile a:hover .etcp-tile__img { box-shadow: 0 0 0 3px var(--etcp-accent) inset; transform: translateY(-2px); }
.etcp-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.etcp-tile__ph { font-size: 44px; font-weight: 700; color: var(--etcp-accent); opacity: .75; }
.etcp-tile__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.etcp-tile a:hover .etcp-tile__name { text-decoration: underline; }
.etcp-tile__count { font-size: 12px; color: var(--etcp-muted); margin-top: -6px; }

/* Колонки з підкатегоріями */
.etcp-groups {
	display: grid;
	grid-template-columns: repeat(var(--etcp-cols), minmax(0, 1fr));
	gap: 28px 32px;
	padding-top: 24px;
	border-top: 1px solid var(--etcp-line);
}
.etcp-group__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.etcp-group__list { list-style: none; margin: 0; padding: 0; }
.etcp-group__list li { margin: 0 0 6px; font-size: 14px; }
.etcp-group__more {
	display: inline-block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--etcp-accent) !important;
}

/* Адаптив */
@media (max-width: 1024px) { .etcp-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
	.etcp-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
	.etcp-banner { padding: 24px 20px; min-height: 0; }
	.etcp-banner__title { font-size: 24px; }
	.etcp-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
	.etcp-tile__img { width: 100px; height: 100px; }
}
@media (max-width: 480px) {
	.etcp-groups { grid-template-columns: 1fr; }
	.etcp-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
	.etcp-tile__img { width: 84px; height: 84px; }
	.etcp-tile__name { font-size: 13px; }
}

/* ===== Header: кнопка «Всі категорії» з випадаючою панеллю ===== */
.etcp-menu { position: relative; display: inline-block; font-size: 14px; }
.etcp-menu__btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 44px; padding: 0 16px;
	border: 1px solid var(--etcp-line); border-radius: 22px;
	background: #fff; color: var(--etcp-text);
	font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
	transition: border-color .15s, box-shadow .15s;
}
.etcp-menu__btn:hover, .etcp-menu.is-open .etcp-menu__btn { border-color: var(--etcp-accent); box-shadow: 0 0 0 3px rgba(51,102,153,.12); }
.etcp-menu__ico { color: var(--etcp-accent); flex: none; }
.etcp-menu__chev { flex: none; transition: transform .2s; opacity: .7; }
.etcp-menu.is-open .etcp-menu__chev { transform: rotate(180deg); }
.etcp-menu__panel {
	position: fixed; left: 0; top: 0; /* координати ставить menu.js від кнопки */
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 120px); overflow-y: auto;
	padding: 20px 20px 14px;
	background: #fff; border: 1px solid var(--etcp-line); border-radius: 12px;
	box-shadow: 0 14px 40px rgba(0,0,0,.14);
	z-index: 100000;
	opacity: 0; transform: translateY(-6px);
	transition: opacity .15s, transform .15s;
}
.etcp-menu__panel[hidden] { display: none; }
.etcp-menu.is-open .etcp-menu__panel { opacity: 1; transform: none; }
.etcp-tiles--menu { grid-template-columns: repeat(var(--etcp-menu-cols, 4), minmax(0, 1fr)); gap: 14px 10px; }
.etcp-tiles--menu .etcp-tile__img { width: 72px; height: 72px; }
.etcp-tiles--menu .etcp-tile__ph { font-size: 28px; }
.etcp-tiles--menu .etcp-tile__name { font-size: 13px; }
.etcp-menu__all {
	display: block; margin-top: 16px; padding-top: 12px;
	border-top: 1px solid var(--etcp-line);
	font-weight: 600; color: var(--etcp-accent) !important; text-align: right;
}

/* ===== Мобільне меню: розділ «Всі категорії» ===== */
.etcp-mobile { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
.etcp-mobile__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 15px; font-weight: 700; cursor: pointer;
	color: var(--etcp-accent);
}
.etcp-mobile__head svg { transition: transform .2s; }
.etcp-mobile.is-open .etcp-mobile__head svg { transform: rotate(180deg); }
.etcp-mobile__body { display: none; padding: 4px 12px 14px; }
.etcp-mobile.is-open .etcp-mobile__body { display: block; }
.etcp-tiles--mobile { grid-template-columns: repeat(3, 1fr); gap: 12px 6px; }
.etcp-tiles--mobile .etcp-tile__img { width: 64px; height: 64px; }
.etcp-tiles--mobile .etcp-tile__ph { font-size: 24px; }
.etcp-tiles--mobile .etcp-tile__name { font-size: 12px; font-weight: 500; }
/* Responsive Menu часто фарбує фон у темне — зробити плитки читабельними */
.rmp-menu .etcp-mobile .etcp-tile__name { color: inherit; }
.rmp-menu .etcp-mobile .etcp-tile__img { background: rgba(255,255,255,.92); }

/* Мобільний варіант кнопки: компактна, без стрілки (розміщення в рядку логотипа — див. header-align.css) */
@media (max-width: 767px) {
	.etcp-menu__btn { height: 40px; padding: 0 12px; font-size: 13px; }
	.etcp-menu__chev { display: none; }
	.etcp-menu__panel { width: calc(100vw - 32px); max-height: calc(100vh - 100px); }
	.etcp-tiles--menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.etcp-tiles--menu .etcp-tile__img { width: 60px; height: 60px; }
	.etcp-tiles--menu .etcp-tile__name { font-size: 12px; }
}