/* «دسته بندی محصولات» menu (js/category-menu.js). Desktop: a cream mega panel under the header with
 * categories, the active category's sub-categories and a photo. Phones/tablets: an accordion inside
 * the burger dropdown. Opening and switching only change opacity/transform/visibility (and
 * grid-template-rows for the accordion), so nothing reflows while it animates. */
.zph-site .elementor-location-header {
	--zcm-canvas: #fbf7ef;
	--zcm-tint: #f3ecdf;
	--zcm-ink: #29251f;
	--zcm-muted: #6b6256;
	--zcm-soft-ink: #8a8072;
	--zcm-line: #e8dfcf;
	--zcm-umber: #17110a;
	--zcm-gold: #d8a51d;
	--zcm-gold-deep: #8a6512;
	--zcm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- desktop trigger ---------- */
/* The panel is a child of the header (positioned), outside the menu list and its Elementor styles. */
.zph-site .zph-header-navigation .elementor-nav-menu--main .zcm-host { display: flex; align-items: center; gap: 2px; }
.zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--main .zcm-trigger { padding-inline-end: 0; }
.zph-site .zcm-toggle {
	display: inline-flex; align-items: center; justify-content: center; inline-size: 30px; block-size: 30px; margin: 0; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: inherit; color: #fff; cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.zph-site .zcm-toggle svg { transition: transform .28s var(--zcm-ease); }
.zph-site .zcm-toggle:hover, .zph-site .zcm-host[data-zcm-open] .zcm-toggle { background: #ffffff14; color: #f0d68c; }
.zph-site .zcm-host[data-zcm-open] .zcm-toggle svg { transform: rotate(180deg); }
.zph-site .elementor-location-header .zph-header-navigation .elementor-nav-menu--main .zcm-host[data-zcm-open] > .zcm-trigger { color: #f0d68c; opacity: 1; }

/* ---------- desktop panel ---------- */
.zcm-panel {
	position: absolute; inset-block-start: calc(100% + 8px); inset-inline: 0; z-index: 5;
	inline-size: min(1120px, calc(100% - 2 * clamp(16px, 3vw, 56px))); margin-inline: auto;
	color: var(--zcm-ink); font-family: "ZPH Persian", Tahoma, sans-serif; text-align: start;
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
	transition: opacity .18s ease, transform .26s var(--zcm-ease), visibility 0s linear .26s;
}
.zcm-panel[data-open] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
/* The 8px gap stays hoverable, so moving from the label into the panel never starts a close. */
.zcm-panel::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 100%; block-size: 8px; }
.zcm-panel__inner {
	display: grid; grid-template-columns: minmax(240px, 290px) minmax(0, 1fr) 248px; gap: 8px;
	padding: 8px; border: 1px solid #f0d68c33; border-radius: 22px; background: var(--zcm-canvas);
	box-shadow: 0 40px 80px -36px #000000b3, 0 2px 0 #fff inset;
}

/* Category list */
.zcm-col--list { display: flex; flex-direction: column; padding: 8px; border-radius: 16px; background: var(--zcm-tint); }
.zcm-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.zcm-list > li { margin: 0; }
.zcm-cat {
	position: relative; display: flex; align-items: center; gap: 10px; min-block-size: 46px; padding: 8px 14px;
	border-radius: 12px; color: var(--zcm-ink); font-size: 15px; font-weight: 600; line-height: 1.5; text-decoration: none;
	transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.zcm-cat__label { flex: 1; min-inline-size: 0; }
.zcm-cat__count { flex: none; min-inline-size: 28px; padding: 1px 8px; border-radius: 999px; background: #17110a0d; color: var(--zcm-soft-ink); font-size: 12px; font-weight: 600; text-align: center; }
.zcm-cat__chevron { display: inline-flex; flex: none; color: var(--zcm-soft-ink); transition: transform .2s var(--zcm-ease), color .2s ease; }
.zcm-cat::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; inline-size: 3px; border-radius: 3px; background: var(--zcm-gold); transform: scaleY(0); transition: transform .2s var(--zcm-ease); }
.zcm-cat:hover { color: var(--zcm-ink); }
.zcm-cat[data-active] { background: #fff; box-shadow: 0 8px 20px -14px #17110a59; color: var(--zcm-umber); }
.zcm-cat[data-active]::before { transform: scaleY(1); }
.zcm-cat[data-active] .zcm-cat__count { background: #d8a51d24; color: var(--zcm-gold-deep); }
.zcm-cat[data-active] .zcm-cat__chevron { color: var(--zcm-gold-deep); transform: translateX(-3px); }
[dir="ltr"] .zcm-cat[data-active] .zcm-cat__chevron { transform: translateX(3px) scaleX(-1); }
.zcm-cat[aria-current="page"] .zcm-cat__label::after { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-start: 8px; border-radius: 50%; background: var(--zcm-gold); vertical-align: middle; }
.zcm-all {
	display: flex; align-items: center; gap: 10px; margin-block-start: auto; padding: 14px 14px 8px;
	border-block-start: 1px solid var(--zcm-line); color: var(--zcm-gold-deep); font-size: 14px; font-weight: 700; text-decoration: none;
}
.zcm-col--list .zcm-list + .zcm-all { margin-block-start: 8px; }
.zcm-all span:first-of-type { flex: 1; white-space: nowrap; }
.zcm-all__count { white-space: nowrap; }
.zcm-all__count { color: var(--zcm-soft-ink); font-size: 12px; font-weight: 500; }
.zcm-all:hover { color: var(--zcm-umber); }

/* Sub-categories: every pane occupies the same grid cell, so switching cross-fades without resizing. */
.zcm-col--detail { min-inline-size: 0; padding: 22px clamp(18px, 2vw, 30px); }
.zcm-detail { display: grid; block-size: 100%; }
.zcm-pane {
	grid-area: 1 / 1; display: flex; flex-direction: column; min-inline-size: 0;
	opacity: 0; visibility: hidden; transform: translateX(6px);
	transition: opacity .2s ease, transform .26s var(--zcm-ease), visibility 0s linear .26s;
}
[dir="ltr"] .zcm-pane { transform: translateX(-6px); }
.zcm-pane[data-active] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.zcm-pane__head { margin-block-end: 16px; padding-block-end: 14px; border-block-end: 1px solid var(--zcm-line); }
.zcm-pane__title { margin: 0; color: var(--zcm-umber); font-size: 21px; font-weight: 800; line-height: 1.5; }
.zcm-pane__meta { margin: 2px 0 0; color: var(--zcm-soft-ink); font-size: 13px; }
.zcm-pane__text { margin: 0 0 18px; color: var(--zcm-muted); font-size: 14px; line-height: 2; }
/* Without sub-categories the button follows the text instead of sinking to the bottom. */
.zcm-pane__text + .zcm-pane__all { margin-block-start: 0; }
.zcm-sub { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.zcm-sub > li { margin: 0; }
.zcm-sub__link {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; min-block-size: 44px; padding: 8px 14px;
	border: 1px solid var(--zcm-line); border-radius: 12px; background: #fff; color: var(--zcm-ink); font-size: 14px; font-weight: 500; text-decoration: none;
	transition: border-color .18s ease, color .18s ease, transform .18s var(--zcm-ease);
}
.zcm-sub__link:hover { border-color: var(--zcm-gold); color: var(--zcm-gold-deep); transform: translateY(-1px); }
.zcm-sub__link[aria-current="page"] { border-color: var(--zcm-gold); }
.zcm-sub__count { color: var(--zcm-soft-ink); font-size: 12px; }
.zcm-pane__all {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-block-start: auto; min-block-size: 42px; padding: 0 18px;
	border-radius: 999px; background: var(--zcm-umber); color: #fbf5e9; font-size: 13.5px; font-weight: 700; text-decoration: none;
	transition: background-color .2s ease, transform .2s var(--zcm-ease);
}
.zcm-pane__all:hover { background: #2b2013; color: #f0d68c; transform: translateY(-1px); }

/* Photo of the active category's newest product */
.zcm-col--preview { min-inline-size: 0; }
.zcm-preview { position: relative; display: grid; block-size: 100%; min-block-size: 300px; overflow: hidden; border-radius: 16px; background: var(--zcm-tint); }
.zcm-preview__item { grid-area: 1 / 1; position: relative; display: block; opacity: 0; transition: opacity .3s ease; }
.zcm-preview__item[data-active] { opacity: 1; }
.zcm-preview__item img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; }
.zcm-preview__item.is-empty { background: radial-gradient(120% 90% at 70% 10%, #f0d68c55, #f3ecdf 60%); }
.zcm-preview__label {
	position: absolute; inset-inline: 0; inset-block-end: 0; padding: 40px 16px 14px;
	background: linear-gradient(180deg, #17110a00, #17110acc); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.6;
}

/* Narrow desktops: drop the photo column. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.zcm-panel__inner { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); }
	.zcm-col--preview { display: none; }
}
/* The burger dropdown takes over at the tablet breakpoint. */
@media (max-width: 1024px) {
	.zcm-panel, .zph-site .elementor-nav-menu--main .zcm-toggle { display: none; }
}

/* ---------- phones and tablets: accordion in the burger dropdown ---------- */
.zph-site .elementor-nav-menu--dropdown .zcm-host { display: block; }
.zph-site .elementor-location-header .zcm-m-row { display: flex; align-items: center; }
.zph-site .elementor-location-header .zcm-m-row > a { flex: 1; min-inline-size: 0; }
.zph-site .elementor-location-header .elementor-nav-menu--dropdown .zcm-m-row > a.elementor-item {
	min-block-size: 52px; padding-block: 12px; padding-inline-end: 8px; border-radius: 0;
	background: transparent !important; color: #fbf5e9; font: 700 15.5px/1.6 "ZPH Persian", Tahoma, sans-serif;
}
/* Elementor paints the current item white with gold text; inside the dark dropdown it stays dark, gold text only. */
.zph-site .elementor-location-header .elementor-nav-menu--dropdown .zcm-host[data-zcm-open] .zcm-m-row > a.elementor-item,
.zph-site .elementor-location-header .elementor-nav-menu--dropdown .zcm-m-row > a.elementor-item:is(.elementor-item-active, .highlighted, :hover) { color: #f0d68c; }
.zph-site .elementor-location-header .zcm-m-toggle {
	display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; margin: 0 6px; padding: 0;
	border: 1px solid #f0d68c2e; border-radius: 12px; background: #ffffff0a; color: #fbf5e9; cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.zph-site .elementor-location-header .zcm-m-toggle svg { transition: transform .3s var(--zcm-ease); }
.zph-site .elementor-location-header .zcm-m-toggle[aria-expanded="true"] { border-color: #d8a51d80; background: #d8a51d1f; color: #f0d68c; }
.zph-site .elementor-location-header .zcm-m-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.zph-site .elementor-location-header .zcm-m-toggle.is-sub { inline-size: 40px; block-size: 40px; border-color: transparent; background: transparent; }
.zph-site .elementor-location-header .zcm-acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--zcm-ease); }
.zph-site .elementor-location-header .zcm-acc[data-open] { grid-template-rows: 1fr; }
.zph-site .elementor-location-header .zcm-acc__inner { min-block-size: 0; overflow: hidden; }
.zph-site .elementor-location-header .zcm-m-list { margin: 0; padding: 4px 12px 12px; list-style: none; }
.zph-site .elementor-location-header .zcm-m-sub { margin: 0 0 8px; margin-inline-start: 14px; padding: 0; padding-inline-start: 10px; list-style: none; border-inline-start: 1px solid #f0d68c2e; }
.zph-site .elementor-location-header .zcm-m-item { margin: 0; border-block-end: 1px solid #f0d68c14; }
.zph-site .elementor-location-header .zcm-m-item:last-child { border-block-end: 0; }
.zph-site .elementor-location-header .zcm-m-item.is-all .zcm-m-link { color: #f0d68c; font-weight: 700; }
.zph-site .elementor-location-header .zcm-m-link {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 48px; padding: 8px 12px;
	border-radius: 10px; color: #fbf5e9; font: 500 15px/1.6 "ZPH Persian", Tahoma, sans-serif; text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.zph-site .elementor-location-header .zcm-m-link.is-sub { min-block-size: 44px; color: #fbf5e9d9; font-size: 14px; }
.zph-site .elementor-location-header .zcm-m-link:hover, .zph-site .elementor-location-header .zcm-m-link:focus-visible { background: #f0d68c14; color: #f0d68c; }
.zph-site .elementor-location-header .zcm-m-link[aria-current="page"] { color: #f0d68c; }
.zph-site .elementor-location-header .zcm-m-count { flex: none; min-inline-size: 28px; padding: 1px 8px; border-radius: 999px; background: #ffffff12; color: #fbf5e9a6; font-size: 12px; text-align: center; }

/* ---------- shared ---------- */
.zph-site :is(.zcm-toggle, .zcm-m-toggle, .zcm-cat, .zcm-sub__link, .zcm-pane__all, .zcm-all, .zcm-m-link):focus-visible { outline: 2px solid var(--zcm-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.zcm-panel, .zcm-pane, .zcm-preview__item, .zcm-acc, .zcm-cat, .zcm-cat::before, .zcm-sub__link, .zcm-toggle svg, .zcm-m-toggle svg { transition: none; }
}