/* Homz Header Kit
   ألوان مأخوذة من الشعار: ذهبي ورمادي داكن. غيّرها من هنا. */
:root {
	--hk-accent: #d0a12c;
	--hk-ink: #1b1d21;
	--hk-muted: #6f7681;
	--hk-line: #e6e8ec;
	--hk-soft: #f5f6f8;
	--hk-radius: 12px;
}

.hk-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------ الهيدر */
.hk-header {
	background: #fff;
	border-bottom: 1px solid var(--hk-line);
	position: relative;
	z-index: 9000;
	font-family: inherit;
}

.hk-header--sticky.is-fixed {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 99000;
}

.hk-header.is-stuck {
	box-shadow: 0 4px 18px rgba(16, 24, 40, .08);
}

.hk-sticky-placeholder[hidden] {
	display: none;
}

.hk-shell {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 72px;
}

.hk-header__main .hk-shell {
	flex-wrap: nowrap;
}

.hk-start {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

@media (min-width: 700px) {
	.hk-header__main .hk-shell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "start actions";
		align-items: center;
	}

	.hk-header__main .hk-shell:has(.hk-search) {
		grid-template-columns: auto minmax(160px, 1fr) auto;
		grid-template-areas: "start search actions";
	}

	.hk-start { grid-area: start; justify-self: start; }
	.hk-header__main .hk-search { grid-area: search; justify-self: stretch; max-width: none; }
	.hk-actions { grid-area: actions; justify-self: end; }
}

.hk-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--hk-ink);
}

.hk-logo img {
	max-height: 52px;
	width: auto;
	display: block;
}

.hk-logo__text {
	font-size: 20px;
	font-weight: 800;
}

/* القائمة */
.hk-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.hk-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
}

.hk-nav__list > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--hk-ink);
	text-decoration: none;
	border-radius: 8px;
	white-space: nowrap;
	transition: color .2s ease, background-color .2s ease;
}

.hk-nav__list > li > a .hk-icon {
	width: 14px;
	height: 14px;
	color: var(--hk-muted);
}

.hk-nav__list > li > a:hover,
.hk-nav__list > li.current-menu-item > a,
.hk-nav__list > li:focus-within > a {
	color: var(--hk-accent);
	background: var(--hk-soft);
}

/* القوائم المنسدلة */
.hk-nav .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius);
	box-shadow: 0 14px 34px rgba(16, 24, 40, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 40;
}

.hk-nav__item {
	position: relative;
}

.hk-nav__item--has-sub:hover > .sub-menu,
.hk-nav__item--has-sub:focus-within > .sub-menu,
.hk-nav__item--has-sub.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.hk-nav .sub-menu a {
	display: block;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--hk-ink);
	text-decoration: none;
	border-radius: 8px;
	white-space: nowrap;
}

.hk-nav .sub-menu a:hover {
	background: var(--hk-soft);
	color: var(--hk-accent);
}

/* زر الشراء وزر الهامبرجر */
.hk-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	background: var(--hk-ink);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	border-radius: var(--hk-radius);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s ease;
}

.hk-cta:hover {
	background: var(--hk-accent);
	color: #fff;
}

.hk-burger {
	display: grid;
	width: 42px;
	height: 42px;
	border: 0;
	background: none;
	color: var(--hk-ink);
	cursor: pointer;
	border-radius: 10px;
	place-items: center;
	flex: 0 0 auto;
}

.hk-burger:hover {
	background: var(--hk-soft);
}

.hk-burger .hk-icon {
	width: 26px;
	height: 26px;
}

/* نقاط التجاوب */
.hk-nav {
	display: none;
}

@media (max-width: 1024px) {
	.hk-shell { gap: 12px; min-height: 64px; }
	.hk-logo img { max-height: 42px; }
	.hk-actions { flex: 0 0 auto; }
	.hk-hide-md { display: none; }
	.hk-search { max-width: 100%; }
	.hk-search--collapsed .hk-search__form { width: min(320px, 86vw); }
}

@media (max-width: 700px) {
	.hk-shell { min-height: 58px; padding: 0 12px; }
	.hk-logo img { max-height: 36px; }
	.hk-hide-sm { display: none; }
	.hk-actions--labels .hk-btn__label { display: none; }
	/* البحث يتحوّل لأيقونة تلقائيًا على الموبايل */
	.hk-search .hk-search__form {
		position: absolute;
		top: calc(100% + 10px);
		/* inset-inline-end: 0; */
        right: -85px;	
		width: min(320px, calc(100vw - 24px));
		background: #fff;
		border-color: var(--hk-line);
		box-shadow: 0 10px 26px rgba(16, 24, 40, .14);
		z-index: 60;
		display: none;
	}
	.hk-search.is-open .hk-search__form { display: flex; }
	.hk-search .hk-search__open { display: inline-flex; }
	.hk-suggest { position: fixed; inset-inline: 12px; top: auto; width: auto; min-width: 0; }
	.hk-catstrip__item a {flex-direction: column;}
}

/* ------------------------------------------------------- أدوات الهيدر */
.hk-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
}

.hk-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 0;
	background: none;
	color: var(--hk-ink);
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--hk-radius);
	transition: color .2s ease, background-color .2s ease;
	line-height: 1;
}

.hk-btn:hover,
.hk-btn:focus-visible {
	color: var(--hk-accent);
	background: var(--hk-soft);
}

.hk-btn__icon {
	position: relative;
	display: inline-flex;
}

.hk-btn__label {
	display: none;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.hk-actions--labels .hk-btn__label {
	display: inline;
}

.hk-badge {
	position: absolute;
	top: -6px;
	inset-inline-end: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--hk-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.hk-badge[hidden] {
	display: none;
}

/* حقل البحث */
.hk-search {
	position: relative;
	flex: 1 1 auto;
	max-width: 380px;
}

.hk-search__form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	height: 42px;
	background: var(--hk-soft);
	border: 1px solid transparent;
	border-radius: 999px;
	transition: border-color .2s ease, background-color .2s ease;
}

.hk-search__form:focus-within {
	background: #fff;
	border-color: var(--hk-accent);
}

.hk-search__form .hk-icon {
	width: 18px;
	height: 18px;
	color: var(--hk-muted);
}

.hk-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font-size: 14px;
	color: var(--hk-ink);
	padding: 0;
	box-shadow: none;
}

.hk-search__input::-webkit-search-cancel-button {
	display: none;
}

.hk-search__clear {
	border: 0;
	background: none;
	color: var(--hk-muted);
	cursor: pointer;
	padding: 2px;
	display: grid;
	place-items: center;
}

.hk-search__clear[hidden] {
	display: none;
}

.hk-search__open { display: none; }
.hk-search--collapsed .hk-search__open { display: inline-flex; }

/* وضع الأيقونة: البحث ينفتح عند الضغط */
.hk-search--collapsed .hk-search__form {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	width: min(360px, 80vw);
	z-index: 60;
	background: #fff;
	border-color: var(--hk-line);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
	display: none;
}

.hk-search--collapsed.is-open .hk-search__form {
	display: flex;
}

/* نتائج البحث الفوري */
.hk-suggest {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	width: 100%;
	min-width: 300px;
	background: #fff;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius);
	box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
	overflow: hidden;
	z-index: 70;
}

.hk-search--collapsed .hk-suggest {
	top: calc(100% + 58px);
	inset-inline-start: auto;
	inset-inline-end: 0;
	width: min(360px, 80vw);
}

.hk-suggest[hidden] {
	display: none;
}

.hk-suggest__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--hk-ink);
	border-bottom: 1px solid var(--hk-line);
}

.hk-suggest__item:last-of-type {
	border-bottom: 0;
}

.hk-suggest__item:hover,
.hk-suggest__item.is-active {
	background: var(--hk-soft);
}

.hk-suggest__item img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
}

.hk-suggest__text {
	min-width: 0;
}

.hk-suggest__title {
	display: block;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hk-suggest__price {
	font-size: 13px;
	color: var(--hk-accent);
	font-weight: 700;
}

.hk-suggest__msg {
	padding: 16px 12px;
	font-size: 14px;
	color: var(--hk-muted);
	text-align: center;
}

.hk-suggest__all {
	display: block;
	padding: 12px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--hk-accent);
	text-decoration: none;
	background: var(--hk-soft);
}

@media (max-width: 1024px) {
	.hk-search { max-width: 100%; }
}

/* --------------------------------------------------- الشريط الإخباري */
.hk-ticker {
	background: var(--hk-ink);
	color: #fff;
	overflow: hidden;
	position: relative;
	padding-inline-end: 34px;
}

.hk-ticker__close {
	position: absolute;
	top: 50%;
	inset-inline-end: 8px;
	transform: translateY(-50%);
	width: 22px;
	height: auto;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	/* display: grid; */
	place-items: center;
	cursor: pointer;
	flex: 0 0 auto;
	z-index: 2;
}

.hk-ticker__close:hover {
	background: rgba(255, 255, 255, .3);
}

.hk-ticker__close .hk-icon {
	width: 12px;
	height: 12px;
}

.hk-ticker__track {
	display: flex;
	width: max-content;
	animation: hk-ticker-scroll var(--hk-ticker-duration, 22s) linear infinite;
}

.hk-ticker:hover .hk-ticker__track,
.hk-ticker:focus-within .hk-ticker__track {
	animation-play-state: paused;
}

.hk-ticker__set {
	display: flex;
	flex: 0 0 auto;
}

.hk-ticker__item {
	display: inline-flex;
	align-items: center;
	padding: 8px 24px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	position: relative;
}

.hk-ticker__item::after {
	content: "•";
	position: absolute;
	inset-inline-end: -3px;
	opacity: .55;
}

@keyframes hk-ticker-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

[dir="rtl"] .hk-ticker__track {
	animation-name: hk-ticker-scroll-rtl;
}

@keyframes hk-ticker-scroll-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
	.hk-ticker__track { animation: none; }
}

/* -------------------------------------------------------- زر اللغة */
/* شورت كود GTranslate ([gtranslate]) أو TranslatePress ([language-switcher])
   بيرسم عناصره الخاصة — نصفّر التنسيق الافتراضي بتاعه ونلبسه شكل الأزرار عندنا.
   اختر شكل الودجت "Just Text" أو "Dropdown Without Flags" من إعدادات GTranslate
   لأقرب نتيجة لتصميم الهيدر. */
.hk-langbtn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.hk-langbtn ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hk-langbtn img {
	display: none;
}

.hk-langbtn a,
.hk-langbtn select {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--hk-soft);
	color: var(--hk-ink);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
}

.hk-langbtn a:hover,
.hk-langbtn select:hover {
	background: var(--hk-accent);
	color: #fff;
}

/* ------------------------------------------------------- شريط الأقسام */
.hk-catstrip {
	background: #fff;
	border-bottom: 1px solid var(--hk-line);
}

.hk-catstrip__shell {
	padding-block: 8px;
	gap: 10px;
	min-height: 0;
}

.hk-catstrip__track {
	list-style: none;
	margin: 0;
	padding: 2px 0;
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	flex: 1 1 auto;
	min-width: 0;
}

.hk-catstrip__track::-webkit-scrollbar {
	display: none;
}

.hk-catstrip__item {
	flex: 0 0 calc((100% - (var(--hk-cs-count, 5) - 1) * 18px) / var(--hk-cs-count, 5));
	min-width: 120px;
}

.hk-catstrip__item a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--hk-ink);
}

.hk-catstrip__pic {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--hk-soft);
	display: block;
	flex: 0 0 auto;
}

.hk-catstrip__pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hk-catstrip__name {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 1 1 auto;
}

.hk-catstrip__arrow {
	flex: 0 0 auto;
    justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--hk-line);
	background: #fff;
	color: var(--hk-ink);
	display: none;
	place-items: center;
	cursor: pointer;
}

.hk-catstrip__arrow .hk-icon {
	width: 16px;
	height: 16px;
}

/* الافتراضي (LTR): زر "التالي" يشير لليمين، وزر "السابق" يشير لليسار */
.hk-catstrip__arrow--next .hk-icon {
	transform: scaleX(-1);
}

/* في الاتجاه العربي (RTL) الوضع معكوس بصريًا: "التالي" يسار الشريط ويشير لليسار،
   و"السابق" يمين الشريط ويشير لليمين */
[dir="rtl"] .hk-catstrip__arrow--next .hk-icon {
	transform: none;
}

[dir="rtl"] .hk-catstrip__arrow:not(.hk-catstrip__arrow--next) .hk-icon {
	transform: scaleX(-1);
}

.hk-catstrip__arrow:hover {
	background: var(--hk-soft);
	color: var(--hk-accent);
}

.hk-catstrip--scrollable .hk-catstrip__arrow {
	display: grid;
}

.hk-catstrip.is-start [data-hk-cat-prev],
.hk-catstrip.is-end [data-hk-cat-next] {
	visibility: hidden;
}

/* منتجات سريعة عند تحويم الماوس على قسم (ديسكتوب فقط) — تستخدم position:fixed
   عشان تفلت من قصّ overflow-x الخاص بشريط السكرول، والموضع بيتحسب بالجافاسكريبت. */
.hk-catstrip__flyout {
	position: fixed;
	display: none;
	width: 260px;
	background: #fff;
	border: 1px solid var(--hk-line);
	border-radius: var(--hk-radius);
	box-shadow: 0 14px 34px rgba(16, 24, 40, .16);
	padding: 10px;
	z-index: 5000;
}

.hk-catstrip__flyout.is-open {
	display: block;
}

.hk-catstrip__flyout-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hk-catstrip__flyout-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--hk-ink);
	padding: 6px;
	border-radius: 8px;
}

.hk-catstrip__flyout-list a:hover {
	background: var(--hk-soft);
}

.hk-catstrip__flyout-list img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 8px;
	flex: 0 0 auto;
	display: block;
}

.hk-catstrip__flyout-name {
	font-size: 13px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 0;
}

.hk-catstrip__flyout-price {
	font-size: 12px;
	font-weight: 700;
	color: var(--hk-accent);
	flex: 0 0 auto;
	white-space: nowrap;
}

.hk-catstrip__flyout-old {
	font-size: 11px;
	font-weight: 500;
	color: var(--hk-muted);
	text-decoration: line-through;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* بعض القوالب بتفرض حجم/لون كبير على أسعار ووكوميرس في كل الموقع —
   نلغي ده جوه صندوق التحويم الصغير ونخليه ياخد حجم اللي إحنا حددناه بس. */
.hk-catstrip__flyout .woocommerce-Price-amount,
.hk-catstrip__flyout .woocommerce-Price-amount bdi,
.hk-catstrip__flyout .woocommerce-Price-currencySymbol,
.hk-catstrip__flyout ins,
.hk-catstrip__flyout del {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	text-decoration: inherit !important;
	background: none !important;
}

.hk-catstrip__flyout .screen-reader-text {
	display: none !important;
}

.hk-catstrip__flyout-all {
	display: block;
	margin-top: 6px;
	padding: 8px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--hk-accent);
	text-decoration: none;
	background: var(--hk-soft);
	border-radius: 8px;
}

@media (max-width: 700px) {
	.hk-catstrip__item { flex-basis: inherit; min-width: inherit; }
	.hk-catstrip__pic { width: 30px; height: 30px; }
	.hk-catstrip__name { font-size: 12px; }
	.hk-catstrip__arrow { display: none !important; }
	.hk-catstrip__flyout { display: none !important; }
	.hk-catstrip__item a {
        flex-direction: column;
    }
}

/* ------------------------------------------------------- درج الموبايل */
.hk-drawer {
	position: fixed;
	inset: 0;
	z-index: 99990;
}

.hk-drawer[hidden] {
	display: none;
}

.hk-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(12, 15, 20, .45);
	opacity: 0;
	transition: opacity .25s ease;
}

.hk-drawer.is-open .hk-drawer__overlay {
	opacity: 1;
}

.hk-drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(420px, 100%);
	background: #fff;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
	box-shadow: 0 0 40px rgba(12, 15, 20, .2);
}

[dir="rtl"] .hk-drawer__panel {
	transform: translateX(100%);
}

.hk-drawer.is-open .hk-drawer__panel {
	transform: translateX(0);
}

.hk-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--hk-line);
	flex: 0 0 auto;
}

.hk-drawer__logo img {
	max-height: 44px;
	width: auto;
	display: block;
}

.hk-drawer__close {
	width: 40px;
	height: 40px;
	border: 0;
	background: none;
	color: var(--hk-ink);
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: 50%;
}

.hk-drawer__close:hover {
	background: var(--hk-soft);
}

.hk-drawer__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 16px;
}

.hk-drawer__search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 14px;
	background: var(--hk-soft);
	border-radius: 999px;
	margin-bottom: 12px;
}

.hk-drawer__search .hk-icon {
	width: 18px;
	height: 18px;
	color: var(--hk-muted);
}

.hk-drawer__search input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	outline: none;
	font-size: 15px;
	padding: 0;
	box-shadow: none;
}

.hk-drawer__login {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	border: 1.5px solid var(--hk-accent);
	border-radius: var(--hk-radius);
	color: var(--hk-accent);
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 24px;
}

.hk-drawer__title {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
	color: var(--hk-ink);
}

/* قسم رئيسي + شريط أفقي */
.hk-cat {
	margin-bottom: 22px;
}

.hk-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 16px;
	background: var(--hk-tint, var(--hk-soft));
	border-radius: var(--hk-radius);
	text-decoration: none;
	color: var(--hk-ink);
	font-weight: 700;
	font-size: 16px;
}

.hk-cat__head .hk-icon {
	width: 18px;
	height: 18px;
	color: var(--hk-muted);
}

[dir="rtl"] .hk-cat__head .hk-icon {
	transform: scaleX(-1);
}

.hk-strip {
	list-style: none;
	margin: 14px 0 0;
	padding: 0 0 4px;
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.hk-strip::-webkit-scrollbar {
	display: none;
}

.hk-tile {
	flex: 0 0 84px;
	scroll-snap-align: start;
	margin: 0;
}

.hk-tile a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--hk-ink);
}

.hk-tile__img {
	width: 84px;
	height: 84px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--hk-soft);
	display: block;
}

.hk-tile__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hk-tile__name {
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hk-drawer__foot {
	flex: 0 0 auto;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--hk-line);
	background: #fff;
}

.hk-drawer__shop {
	display: block;
	text-align: center;
	padding: 13px;
	border-radius: var(--hk-radius);
	background: var(--hk-ink);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.hk-drawer__links {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-top: 12px;
}

.hk-drawer__links a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--hk-muted);
	text-decoration: none;
}

.hk-drawer__links .hk-icon {
	width: 18px;
	height: 18px;
}

body.hk-locked {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.hk-drawer__panel,
	.hk-drawer__overlay {
		transition: none;
	}
}

/* ------------------------------------------------- توافق مع القوالب
   بعض القوالب (ومنها ودجت الشورت كود في إليمنتور) بتفرض ستايل على
   الأيقونات والحقول والأزرار. القواعد دي بتلغي التداخل ده. */

.hk-header svg.hk-icon,
.hk-actions svg.hk-icon,
.hk-drawer svg.hk-icon {
	fill: none !important;
	stroke: currentColor !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	max-width: none !important;
	display: block;
}

.hk-actions,
.hk-actions *,
.hk-header,
.hk-header * {
	box-sizing: border-box;
}

.hk-actions {
	position: relative;
	flex-wrap: nowrap;
	max-width: 100%;
}

/* الأزرار: نمنع خلفيات وحدود القالب */
.hk-actions .hk-btn,
.hk-actions .hk-search__clear,
.hk-drawer .hk-drawer__close {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.hk-actions .hk-btn:hover {
	background: var(--hk-soft) !important;
	color: var(--hk-accent) !important;
}

/* حقول البحث */
.hk-search__form,
.hk-drawer__search {
	background: var(--hk-soft) !important;
	box-shadow: none;
}

.hk-search__form input[type="search"],
.hk-drawer__search input[type="search"] {
	background: transparent !important;
	color: var(--hk-ink) !important;
	border: 0 !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	border-radius: 0 !important;
}

/* داخل ودجت الشورت كود في إليمنتور */
.elementor-widget-shortcode .hk-actions {
	width: 100%;
}

.elementor-shortcode {
	display: block;
}

/* الشارات فوق الأيقونات */
.hk-actions .hk-badge,
.hk-drawer .hk-badge {
	background: var(--hk-accent) !important;
	color: #fff !important;
	border: 0 !important;
}

/* --------------------------------------------------- زر واتساب العائم */
.hk-whatsapp {
	position: fixed;
	bottom: 24px;
	z-index: 9999;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transition: transform .2s ease;
}

.hk-whatsapp:hover {
	transform: scale(1.06);
	color: #fff;
}

.hk-whatsapp--left {
	left: 24px;
}

.hk-whatsapp--right {
	right: 24px;
}

@media (max-width: 700px) {
	.hk-whatsapp {
		width: 50px;
		height: 50px;
		bottom: 16px;
	}

	.hk-whatsapp--left { left: 16px; }
	.hk-whatsapp--right { right: 16px; }
}