/* =========================================================================
   HamoonKPH — main theme stylesheet
   Mobile-first, RTL-first. Tokens come from tokens.css.
   Sections: base · layout · type · buttons/pills · badges · ticker · header
   · mobile menu · bottom nav · footer · home · faq · marquee · size-guide
   ========================================================================= */

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-fa-num); /* FaNum renders Persian numerals */
  font-weight: var(--weight-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* جای منوی پایین موبایل داخل «خود فوتر» رزرو می‌شود، نه بادی — وگرنه بعد از
   فوتر تیره، یک نوار به رنگ پس‌زمینه دیده می‌شد و حس «سایت بعد از فوتر ادامه
   دارد» می‌داد (گزارش مالک، همه صفحه‌ها در موبایل). */
body.has-bottom-nav { padding-bottom: 0; }
.has-bottom-nav .site-footer { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1024px) { .has-bottom-nav .site-footer { padding-bottom: 0; } }

/* Sticky footer: on any page shorter than the screen, keep the footer pinned to
   the bottom instead of floating mid-screen with the page background showing
   beneath it (read as «the site keeps going after the footer» on mobile). The
   fixed overlays/drawer/bottom-nav are out of flow, so they're unaffected. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.site-content { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); text-decoration: none; transition: color var(--motion-fast) var(--motion-ease); }
a:hover { color: var(--hkph-700); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; } /* فرم‌ها هرگز فونت پیش‌فرض مرورگر نگیرند */
[data-lucide], .lucide { display: inline-block; vertical-align: middle; stroke-width: 1.75; flex: 0 0 auto; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* Hidden above the viewport (no off-screen -9999px, which caused RTL overflow);
   slides in on keyboard focus. */
.skip-link { position: fixed; top: 8px; inset-inline-start: 16px; transform: translateY(-250%);
  background: var(--hkph-500); color: #fff; padding: 10px 16px; border-radius: var(--radius-pill);
  z-index: 1000; transition: transform var(--motion-base) var(--motion-ease); }
.skip-link:focus { transform: translateY(0); color: #fff; }

/* --------------------------------------------------------------- layout --- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
/* Safety net against stray horizontal overflow (esp. RTL, where it shifts the
   viewport and clips the start of every line). overflow-x:clip keeps vertical
   position:sticky working. */
.site-content { overflow-x: clip; }
img, table { max-width: 100%; }
.section { margin-block: var(--space-7); }
.section--tight { margin-block: var(--space-6); }
.stack > * + * { margin-top: var(--space-4); }

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--space-4); }
.section-head__title { font-size: var(--text-h3); font-weight: var(--weight-title); color: var(--text-strong); margin: 0; line-height: 1.3; }
.section-head__sub { font-size: var(--text-caption); font-weight: var(--weight-body); color: var(--muted); margin-top: 2px; }
.section-head__link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-caption);
  font-weight: var(--weight-strong); color: var(--hkph-500); white-space: nowrap; }
.section-head__link svg { width: 15px; height: 15px; }
@media (min-width: 1024px) {
  .section-head__title { font-size: var(--text-h2); }
}

/* --------------------------------------------------------- type helpers --- */
h1,h2,h3,h4 { font-weight: var(--weight-title); color: var(--text-strong); line-height: 1.3; }
.kicker { font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--hkph-500); letter-spacing: .01em; }
.muted { color: var(--muted); }
.price { font-weight: var(--weight-title); color: var(--hkph-500); white-space: nowrap; }
.price .unit { font-size: .72em; font-weight: var(--weight-ui); }
.price del, del.price { color: var(--muted-2); font-weight: var(--weight-ui); text-decoration: line-through; font-size: .82em; }
.en { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate; }
.num { font-family: var(--font-fa-num); }

/* ------------------------------------------------------- buttons / pills --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-fa); font-size: var(--text-button); font-weight: var(--weight-strong);
  line-height: 1; padding: 13px 24px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  background: var(--gray-100); color: var(--text-body); cursor: pointer;
  transition: background var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease);
  text-align: center;
}
.btn svg { width: 19px; height: 19px; }
.btn--primary { background: var(--hkph-500); color: #fff; }
.btn--primary:hover { background: var(--hkph-600); color: #fff; }
.btn--primary:active { background: var(--hkph-700); }
.btn--outline { background: #fff; border-color: var(--hkph-500); color: var(--hkph-700); }
.btn--outline:hover { background: var(--hkph-100); color: var(--hkph-700); }
.btn--ghost { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.26); color: #fff; }
.btn--dark { background: var(--slate-700); color: #fff; }
.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 15px 28px; border-radius: var(--radius-lg); }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: var(--gray-100); color: var(--text-body); font-size: var(--text-caption);
  font-weight: var(--weight-ui); padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.chip:hover { border-color: var(--border-soft); }
.chip.is-active, .chip[aria-current="true"] { background: var(--hkph-500); color: #fff; }
.chips-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips-row::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------------- badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--weight-strong);
  padding: 3px 9px; border-radius: var(--radius-pill); line-height: 1.4; white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge--bestseller { background: var(--badge-bestseller-bg, var(--hkph-500)); color: #fff; }
.badge--new       { background: var(--badge-new-bg, var(--success)); color: #fff; }
.badge--sale      { background: var(--badge-sale-bg, var(--danger)); color: #fff; }
.badge--deep      { font-weight: var(--weight-title, 800); } /* حراج عمیق (۴۰٪+): تأکید با ضخامت، بدون تغییرِ رنگِ ست‌شده */
.badge--custom    { background: var(--slate-600); color: #fff; }
.badge--ready     { background: var(--gray-150); color: var(--slate-600); }
.badge--lowstock  { background: var(--warning); color: #fff; }
.badge--soldout   { background: #fff; color: var(--muted-2); border: 1px solid var(--border-soft); }
.badge--limited   { background: var(--info-purple); color: #fff; }
.badge--lg { font-size: 11px; padding: 4px 10px; }

/* ------------------------------------------------------ status pills (UI) --- */
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-strong);
  padding: 4px 10px; border-radius: var(--radius-pill); }
.status-pill svg { width: 13px; height: 13px; }
.status-pill--info    { background: var(--hkph-100); color: var(--hkph-700); }
.status-pill--success { background: rgba(31,157,87,.12); color: var(--success); }
.status-pill--warning { background: rgba(232,147,42,.14); color: var(--warning); }
.status-pill--danger  { background: rgba(210,59,59,.12); color: var(--danger); }
.status-pill--muted   { background: var(--gray-100); color: var(--muted); }

/* --------------------------------------------------- announcement ticker --- */
/* رنگ نوار از تنظیمات می‌آید (--ticker-bg در hkph_dynamic_css)؛ fallback = رنگ برند */
.ticker { background: var(--ticker-bg, var(--hkph-500)); color: #fff; height: var(--ticker-h); overflow: hidden; }
.ticker__viewport { height: var(--ticker-h); overflow: hidden; }
.ticker__track { display: flex; flex-direction: column; }
.ticker__item { height: var(--ticker-h); display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: var(--weight-ui); padding-inline: 16px; text-align: center; }
.ticker__item svg { width: 15px; height: 15px; }
.ticker__item a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* JS-driven vertical rotation; CSS fallback animates when js disabled */
.no-js .ticker__track { animation: hkph-tick var(--ticker-cycle, 13s) cubic-bezier(.7,0,.3,1) infinite; }

/* چیپ کد تخفیف کپی‌شونده داخل پیام تیکر (فیلد «کد تخفیف» هر پیام) */
.ticker__code { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 10px;
  border: 1px dashed currentColor; border-radius: var(--radius-pill); background: rgba(255,255,255,.12);
  color: inherit; font-family: var(--font-fa-num); font-size: 12px; font-weight: var(--weight-strong);
  letter-spacing: .04em; cursor: pointer; }
.ticker__code:hover { background: rgba(255,255,255,.22); }

/* --------------------------------------------------------------- header --- */
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; }
.site-header__bar { display: flex; align-items: center; gap: 12px; position: relative;
  max-width: var(--container-max); margin-inline: auto;
  height: var(--header-h); padding-inline: var(--container-pad); border-bottom: 1px solid var(--border-soft); }
.site-header--transparent { position: absolute; inset: 0 0 auto 0; background: transparent; }
.site-header--transparent .site-header__bar { border-bottom: 0; }

/* Order: menu-toggle · brand · nav · actions.
   Mobile  → toggle (start/right), brand centered, actions (end/left).
   Desktop → brand (start/right), nav centered, actions (end/left). */
.menu-toggle { order: 0; }
/* Mobile: brand absolutely centered between the toggle (start) and icons (end). */
.site-header__brand { order: 1; display: inline-flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.primary-nav { order: 2; }
.site-header__actions { order: 3; margin-inline-start: auto; } /* push icons to the end (left in RTL) */
.site-header__actions .header-icon--account { display: none; } /* account lives in the bottom-nav on mobile */

/* منوها با items_wrap=%3$s بدون <ul> رندر می‌شوند؛ ریستِ «ul, ol{list-style:none}»
   به این li‌های بی‌والد نمی‌رسد و مارکرِ disc پیش‌فرض (نقطهٔ تیره) کنارِ هر آیتم
   ظاهر می‌شود. در هر دو ناوِ هدر (دسکتاپ + کشوی موبایل) مارکر را خاموش می‌کنیم. */
.primary-nav li, .menu-drawer__nav li { list-style: none; }

.header-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: var(--slate-600); background: transparent; border: 0; border-radius: var(--radius-pill); }
.header-icon svg { width: 23px; height: 23px; }
.header-icon:hover { color: var(--hkph-600); }
.site-header--transparent .header-icon { color: #fff; }

.brand { display: inline-flex; align-items: center; }
.brand img { height: 36px; width: auto; }
/* موتور لوگوی خودش را ندارد: تا وقتی برند «لوگوی سفارشی» نگذاشته یا چایلد فیلترِ
   hkph_logo_html را نگرفته، نامِ سایت به‌صورت wordmark متنی چاپ می‌شود. */
.brand--wordmark { font-weight: var(--weight-strong, 700); font-size: 19px; letter-spacing: -.01em;
  color: var(--text-strong, #394246); text-decoration: none; }
.site-footer .brand--wordmark, .brand--white .brand--wordmark { color: #fff; }
.site-footer a.brand--wordmark { color: #fff; }
.site-header__center { flex: 1; display: flex; justify-content: center; }
.site-header__actions, .site-header__nav-left { display: flex; align-items: center; gap: 4px; }

.cart-link { position: relative; }
.cart-count { position: absolute; top: 2px; inset-inline-start: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--hkph-500); color: #fff; font-size: 10px; font-weight: var(--weight-strong);
  border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; }
.cart-count.is-empty { display: none; }
.site-header--transparent .cart-count { background: #fff; color: var(--hkph-500); }

/* desktop nav */
.primary-nav { display: none; }
@media (min-width: 1024px) {
  .site-header__bar { height: 72px; }
  .brand img { height: 44px; }
  .menu-toggle { display: none; }
  /* brand pinned to the start (right in RTL); nav fills + centers; icons at end (left) */
  .site-header__brand { order: 0; margin-inline: 0; position: static; transform: none; }
  .site-header__actions .header-icon--account { display: inline-flex; }
  .primary-nav { order: 1; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 28px; }
  .site-header__actions { order: 2; }
  .primary-nav a { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-fa);
    font-size: 15px; font-weight: var(--weight-ui); color: var(--slate-700); white-space: nowrap; }
  .primary-nav a:hover { color: var(--hkph-600); }
  .primary-nav .current-menu-item > a,
  .primary-nav .current_page_item > a,
  .primary-nav a[aria-current] { color: var(--hkph-500); font-weight: var(--weight-strong); }
  .header-icon { width: 40px; height: 40px; }
}

/* --------------------------------------------------- mega menu (opt-in) ---
   فعال با «مگامنوی دسکتاپ» در تنظیمات ← هدر و فوتر (کلاس .primary-nav--mega).
   ساختار منو: آیتم سطح ۱ ← ستون‌ها (سطح ۲) ← لینک‌ها (سطح ۳).
   پنل تمام‌عرضِ هدر، با hover و :focus-within (کیبورد) باز می‌شود.
   موبایل درگیر نیست (primary-nav آن‌جا display:none است). */
.primary-nav--mega .sub-menu { display: none; }
@media (min-width: 1024px) {
  .primary-nav--mega > .menu-item-has-children > a { padding-block: 24px; } /* پل hover تا پنل */
  /* فلش کوچک کنار آیتم‌های دارای زیرمنو (مثل Header ماک RT) */
  .primary-nav--mega > .menu-item-has-children > a::after {
    content: ""; width: 6px; height: 6px; flex: 0 0 auto; margin-inline-start: 3px;
    border-inline-end: 1.7px solid currentColor; border-block-end: 1.7px solid currentColor;
    transform: rotate(45deg) translateY(-1px); opacity: 0.65;
    transition: transform var(--motion-fast, 160ms) ease; }
  .primary-nav--mega > .menu-item-has-children:hover > a::after,
  .primary-nav--mega > .menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translateY(-1px); }
  .primary-nav--mega > .menu-item-has-children > .sub-menu {
    position: absolute; top: 100%; inset-inline: 0; z-index: 70;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 28px;
    background: var(--surface, #fff); border: 1px solid var(--border-soft); border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-raised);
    padding: 24px 28px; margin: 0; list-style: none; }
  .primary-nav--mega > .menu-item-has-children:hover > .sub-menu,
  .primary-nav--mega > .menu-item-has-children:focus-within > .sub-menu { display: grid; }
  /* ستون: تیتر (سطح ۲) + لینک‌های عمودی (سطح ۳) */
  .primary-nav--mega .sub-menu > li > a { font-weight: var(--weight-strong); color: var(--text-strong, var(--slate-700));
    font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 8px; width: 100%; }
  .primary-nav--mega .sub-menu .sub-menu { display: block; position: static; margin: 0; padding: 0; list-style: none;
    border: 0; box-shadow: none; background: transparent; }
  .primary-nav--mega .sub-menu .sub-menu a { font-weight: var(--weight-body, 400); color: var(--slate-600);
    font-size: 13.5px; padding: 5px 0; display: block; white-space: normal; }
  .primary-nav--mega .sub-menu .sub-menu a:hover { color: var(--hkph-600); }
}

/* wishlist header icon — mobile hides it (bottom-nav has the account path) */
.site-header__actions .header-icon--wishlist { display: none; }
@media (min-width: 1024px) {
  .site-header__actions .header-icon--wishlist { display: inline-flex; }
}

/* ------------------------------------------- header search field (opt-in) ---
   «شکل جستجوی هدر = فیلد» (تنظیمات ← هدر و فوتر): جعبه‌ی پیل‌شکل داخل هدر
   دسکتاپ که با کلیک همان اورلی جستجو را باز می‌کند. موبایل = آیکون قبلی. */
.header-search-field { display: none; }
@media (min-width: 1024px) {
  .header-search-field { order: 2; display: flex; align-items: center; gap: 10px;
    flex: 1 1 auto; max-width: 360px; height: 44px; padding: 0 16px; margin-inline: auto;
    background: var(--gray-100); border: 0; border-radius: var(--radius-pill);
    color: var(--muted); font-family: var(--font-fa); font-size: 14px; cursor: text; }
  .header-search-field svg { flex: 0 0 auto; }
  .header-search-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .site-header--searchfield .site-header__actions { order: 3; }
  .site-header--searchfield .site-header__actions [data-search-open].header-icon { display: none; }
  .site-header--searchfield .primary-nav { flex: 0 1 auto; }
}

/* ----------------------------------------------------------- mobile menu --- */
.menu-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.menu-drawer.is-open { visibility: visible; }
.menu-drawer__overlay { position: absolute; inset: 0; background: rgba(20,26,30,.5); opacity: 0;
  transition: opacity var(--motion-base) var(--motion-ease); }
.menu-drawer.is-open .menu-drawer__overlay { opacity: 1; }
.menu-drawer__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(86vw, 340px);
  background: #fff; transform: translateX(-100%); transition: transform var(--motion-slow) var(--motion-ease);
  display: flex; flex-direction: column; overflow-y: auto; box-shadow: var(--shadow-raised); }
html[dir="rtl"] .menu-drawer__panel { transform: translateX(100%); }
.menu-drawer.is-open .menu-drawer__panel { transform: translateX(0); }
.menu-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft); }
.menu-drawer__nav { padding: 8px 0; }
.menu-drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
  font-family: var(--font-fa); font-size: 15px; font-weight: var(--weight-ui); color: var(--slate-700);
  border-bottom: 1px solid #f3f3f3; }
.menu-drawer__nav a:hover { background: var(--gray-100); }
/* mobile submenu accordion (parent items that have children) */
.menu-drawer__nav .menu-item-has-children { position: relative; }
.menu-drawer__nav .menu-item-has-children > a { padding-inline-end: 52px; }
.menu-drawer__expand { position: absolute; top: 0; inset-inline-end: 0; width: 50px; height: 49px; z-index: 2;
  display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer;
  color: var(--muted-2, #6b7280); border-bottom: 1px solid #f3f3f3; }
.menu-drawer__expand::before { content: ""; width: 9px; height: 9px; margin-top: -3px;
  border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .2s var(--motion-ease, ease); }
.menu-drawer__nav .menu-item-has-children.is-open > .menu-drawer__expand::before { transform: rotate(-135deg); margin-top: 3px; }
.menu-drawer__nav .sub-menu { list-style: none; margin: 0; padding: 0; display: none; background: var(--gray-100, #f6f6f6); }
.menu-drawer__nav .menu-item-has-children.is-open > .sub-menu { display: block; }
.menu-drawer__nav .sub-menu a { padding-inline-start: 34px; font-size: 14px; color: var(--slate-600); }
/* mobile drawer logo: suppress tap/focus box (moved here from «CSS اضافی» — root fix) */
.menu-drawer__head .brand:focus, .menu-drawer__head .brand:focus-visible { outline: none; box-shadow: none; }
.menu-drawer a, .menu-drawer .brand { -webkit-tap-highlight-color: transparent; }
.menu-drawer__foot { margin-top: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1024px) { .menu-drawer { display: none; } }

/* ------------------------------------------------------------ bottom nav --- */
.bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 90; background: #fff;
  border-top: 1px solid var(--border-soft); display: flex; justify-content: space-around;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav__item { display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted-2); font-size: 10px; font-weight: var(--weight-ui); min-width: 44px; min-height: 44px;
  justify-content: center; position: relative; }
.bottom-nav__item svg { width: 23px; height: 23px; }
.bottom-nav__item.is-active { color: var(--hkph-500); font-weight: var(--weight-strong); }
.bottom-nav .cart-count { top: -2px; inset-inline-start: 50%; transform: translateX(50%); }
html[dir="rtl"] .bottom-nav .cart-count { transform: translateX(-50%); inset-inline-start: 56%; }
@media (min-width: 1024px) { .bottom-nav { display: none; } }

/* --------------------------------------------------------------- footer --- */
.site-footer { background: var(--slate-600); color: #fff; margin-top: var(--space-7); }
.site-footer__inner { padding-block: 26px 16px; }
/* Footer grid — the column count comes from the data: footer.php prints
   --footer-cols / --footer-cols-md / --footer-cols-sm on .site-footer__top.
   Mobile: brand full-width on top, then the link columns side-by-side
   (3-up for the classic 3 columns, 2-up from 4 columns on, so a 375px phone
   never gets 106px-wide columns with the rest orphaned on a far-below row).
   The var() fallbacks below are the old 3-column layout, so even a page served
   without the style attribute renders like it always did.
   MIRRORED: hkph_footer_grid_css() (inc/footer-builder.php) prints the exact
   same three grid rules inline in <head> with data-no-optimize, because
   hkph_asset() serves the frozen main-vX.Y.Z.css copy whenever it exists — and
   that copy still carries the old hardcoded repeat(3, 1fr) until release.sh
   regenerates it. Change a rule here and you MUST change it there too. */
.site-footer__top { display: grid; grid-template-columns: repeat(var(--footer-cols-sm, 3), minmax(0, 1fr));
  gap: 20px 12px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.14); }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand img { height: 32px; margin-bottom: 10px; }
.site-footer__brand p { font-size: 12.5px; font-weight: var(--weight-body); line-height: 1.85;
  color: rgba(255,255,255,.72); margin: 0; max-width: 420px; }
.footer-col__title { font-size: 13px; font-weight: var(--weight-strong); margin-bottom: 9px; }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col li { overflow-wrap: break-word; } /* a long URL-as-label must wrap, not clip */
.footer-col a { font-size: 12.5px; font-weight: var(--weight-body); color: rgba(255,255,255,.78); }
.footer-col a:hover { color: #fff; }
/* a footer-builder row with text but no URL — same look as the links around it.
   Scoped to the builder's own class on purpose: every footer widget wrapper is
   itself a .footer-col, so a bare `.footer-col li > span` would also restyle
   spans inside existing footer widgets (a price, a post date) on sites that
   never opened the builder. */
.footer-col li > .footer-col__text { font-size: 12.5px; font-weight: var(--weight-body); color: rgba(255,255,255,.78); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 14px; font-size: 12.5px; font-weight: var(--weight-body); color: rgba(255,255,255,.6); }
.footer-seals { display: none; flex-wrap: wrap; gap: 10px; } /* mobile: seals already shown in the home trust section */
.footer-seal { display: flex; align-items: center; gap: 5px; background: rgba(255,255,255,.1);
  border-radius: var(--radius-sm); padding: 6px 11px; font-size: 11px; font-weight: var(--weight-ui);
  color: rgba(255,255,255,.85); }
.footer-seal svg { width: 14px; height: 14px; }
/* Tablet / big phone: room for the classic 3-up row again, whatever the count. */
@media (min-width: 600px) {
  .site-footer__top { grid-template-columns: repeat(var(--footer-cols-md, 3), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 1.6fr repeat(var(--footer-cols, 3), minmax(0, 1fr)); gap: 30px; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__brand img { height: 34px; }
  .footer-seals { display: flex; }
}

/* footer contact: address / phone / email under the brand */
.footer-contact { list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.footer-contact__item { display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.75; color: rgba(255,255,255,.78); }
.footer-contact__item svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px;
  color: var(--hkph-500); }
.footer-contact__item a { color: rgba(255,255,255,.9); }
.footer-contact__item a:hover { color: #fff; }
.footer-contact__addr span { max-width: 30ch; }
/* the phone is a memorable number — make it the prominent line */
.footer-contact__phone { align-items: center; }
.footer-contact__phone a, .footer-contact__phone span { font-size: 18px;
  font-weight: var(--weight-strong); letter-spacing: .5px; color: #fff; }

/* trust seals strip (eNamad + extra badges) — white cards on the dark footer */
.footer-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 16px 0; border-top: 1px solid rgba(255,255,255,.14); }
.enamad-seal { display: inline-flex; background: #fff; border-radius: var(--radius-md);
  padding: 6px; line-height: 0; box-shadow: 0 2px 12px rgba(0,0,0,.2); transition: transform .15s ease; }
.enamad-seal:hover { transform: translateY(-2px); }
.enamad-seal img { display: block; height: 84px; width: auto; }
.footer-trust__extra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; line-height: 0; }
.footer-trust__extra img { height: 84px; width: auto; border-radius: var(--radius-md); }

/* ============================================================ HOME ====== */

/* hero — one or more cross-fading slides (slides share one grid cell so the
   container auto-sizes to the tallest slide; the engine is initSlideshow) */
.hero { position: relative; border-radius: var(--radius-xl); overflow: hidden; margin-top: var(--space-4); display: grid; }
.hero__slide { position: relative; grid-area: 1 / 1; }
.hero--multi .hero__slide { opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.hero--multi .hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__media { width: 100%; height: 290px; object-fit: cover; display: block; }
.hero__overlay { position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(22,28,32,.85), rgba(22,28,32,.05)); padding: 20px 18px 18px; }
.hero__title { font-size: 24px; font-weight: var(--weight-title); color: #fff; line-height: 1.35; margin: 0 0 4px; }
.hero__sub { font-size: 13px; font-weight: var(--weight-body); color: rgba(255,255,255,.88); line-height: 1.7; margin: 0 0 13px; }
.hero__cta { display: flex; gap: 9px; flex-wrap: wrap; }
.hero__cta .btn { padding: 10px 18px; }
/* dots (only rendered when there are 2+ slides); reuse .slideshow__dot styling */
.hero__dots { position: absolute; inset: auto 0 12px 0; z-index: 4; display: flex; justify-content: center; gap: 6px; }
.hero--multi .hero__overlay { padding-bottom: 34px; } /* clear the dots on mobile */
@media (min-width: 1024px) {
  .hero__slide { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; background: var(--gray-100); }
  .hero__media { height: 100%; min-height: 460px; }
  .hero--split .hero__panel { order: -1; display: flex; flex-direction: column; justify-content: center; padding: 60px 56px; }
  .hero--split .hero__overlay { position: static; background: none; padding: 0; }
  .hero--split .hero__title { font-size: 48px; color: var(--text-strong); margin-bottom: 16px; }
  .hero--split .hero__sub { font-size: 16px; color: var(--slate-500); max-width: 380px; margin-bottom: 28px; }
  .hero--split .hero__kicker { color: var(--hkph-500); font-weight: var(--weight-strong); margin-bottom: 14px; }
  .hero--split .btn--ghost { background: #fff; border-color: #d8dcde; color: var(--slate-600); }
  .hero--multi .hero__overlay { padding-bottom: 0; } /* desktop: panel layout, no overlap */
}

/* line tiles (آماده چاپ / بیسیک) */
.line-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.line-tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 15px 14px; min-height: 84px; }
.line-tile__title { font-size: 15px; font-weight: var(--weight-title); margin-bottom: 3px; }
.line-tile__sub { font-size: 11.5px; font-weight: var(--weight-body); line-height: 1.6; }
.line-tile__icon { position: absolute; inset-inline-start: -6px; bottom: -8px; width: 40px; height: 40px; opacity: .25; }
.line-tile--ready { background: var(--hkph-500); color: #fff; }
.line-tile--basic { background: var(--gray-150); color: var(--text-strong); }
.line-tile--basic .line-tile__sub { color: var(--slate-500); }
.line-tile--basic .line-tile__icon { color: #9aa1a6; opacity: .3; }

/* collections — homepage = 2-row HORIZONTAL scroller (swipe left/right; ~2 columns
   visible per view + a peek, on mobile AND desktop). The collections landing page
   keeps .collections-grid (vertical 2 → 3 columns). */
.home-collections { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  grid-auto-columns: 46%; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 8px; }
.home-collections::-webkit-scrollbar { height: 6px; }
.home-collections::-webkit-scrollbar-thumb { background: #cfd6da; border-radius: 9px; }
.home-collections .collection-tile { scroll-snap-align: start; }
.collections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.collection-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg);
  display: flex; align-items: flex-end; color: #fff; text-decoration: none;
  transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); }
.collection-tile:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(20, 30, 35, .15); }
.collection-tile__img { position: absolute; inset: 0; background: #dfe3e6 center top / cover no-repeat;
  transition: transform var(--motion-slow) var(--motion-ease); }
.collection-tile:hover .collection-tile__img { transform: scale(1.05); }
.collection-tile--noimg .collection-tile__img { background: linear-gradient(150deg, #1f6f8b, #0c2c38);
  display: flex; align-items: center; justify-content: center; }
.collection-tile__watermark { width: 46%; height: auto; opacity: .16; }
.collection-tile__scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 18, 22, .82) 6%, rgba(12, 18, 22, 0) 50%); }
.collection-tile__body { position: relative; padding: 11px 13px; width: 100%; }
.collection-tile__name { font-size: 15px; font-weight: var(--weight-title); color: #fff; }
.collection-tile__count { font-size: 11.5px; font-weight: var(--weight-body); color: #fff; opacity: .92; margin-top: 1px; }
@media (min-width: 768px) {
  .collections-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .home-collections { grid-auto-columns: 38%; gap: 16px; }  /* ~2 columns visible + peek; scrolls horizontally */
  .collections-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .collection-tile__name { font-size: 18px; }
  .collection-tile__count { font-size: 12.5px; }
}

/* why-us */
.whyus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.whyus-card { background: var(--gray-100); border-radius: var(--radius-lg); padding: 16px 13px; text-align: center; }
.whyus-card__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--hkph-100);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 9px; }
.whyus-card__icon svg { width: 23px; height: 23px; color: var(--hkph-500); }
.whyus-card__title { font-size: 14px; font-weight: var(--weight-title); color: var(--text-strong); margin-bottom: 3px; }
.whyus-card__text { font-size: 11px; font-weight: var(--weight-body); color: var(--muted); line-height: 1.6; }
@media (min-width: 1024px) { .whyus-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* promo */
.promo { background: linear-gradient(135deg, var(--hkph-500), #0079b3); border-radius: var(--radius-xl);
  padding: 22px 20px; color: #fff; }
.promo__title { font-size: 18px; font-weight: var(--weight-title); margin-bottom: 5px; }
.promo__sub { font-size: 13px; font-weight: var(--weight-body); opacity: .92; margin-bottom: 13px; }
.promo__code { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.16);
  border: 1px dashed rgba(255,255,255,.6); border-radius: var(--radius-sm); padding: 9px 16px;
  font-size: 15px; font-weight: var(--weight-strong); letter-spacing: .05em; cursor: pointer; color: #fff; }
.promo__code svg { width: 15px; height: 15px; }
@media (min-width: 1024px) { .promo { display: flex; align-items: center; justify-content: space-between; padding: 32px 40px; }
  .promo__title { font-size: 24px; } .promo__sub { margin-bottom: 0; } }

/* faq */
.faq-item { border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 13px 14px; }
.faq-item + .faq-item { margin-top: 9px; }
.faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 0; padding: 0; text-align: start; font-size: 14px; font-weight: var(--weight-strong);
  color: var(--text-strong); line-height: 1.5; }
.faq-item__q svg { width: 18px; height: 18px; color: var(--hkph-500); transition: transform var(--motion-base); }
.faq-item.is-open .faq-item__q .faq-icon-plus { display: none; }
.faq-item:not(.is-open) .faq-item__q .faq-icon-minus { display: none; }
.faq-item__a { font-size: 12.5px; font-weight: var(--weight-body); color: var(--slate-500); line-height: 1.85;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid #f0f0f0; }
.faq-item:not(.is-open) .faq-item__a { display: none; }

/* brand marquee */
.marquee { overflow: hidden; margin-inline: calc(-1 * var(--container-pad));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; gap: 10px; width: max-content; animation: hkph-scrollx 24s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 56px;
  padding: 0 22px; background: var(--gray-100); border-radius: var(--radius-md); font-size: 14px;
  font-weight: var(--weight-strong); color: var(--muted); }
.marquee__item img { max-height: 32px; width: auto; object-fit: contain; }

/* trust seals */
.seals { background: var(--gray-100); border-radius: var(--radius-lg); padding: 16px 12px; }
.seals__title { font-size: 12.5px; font-weight: var(--weight-strong); color: var(--slate-700); text-align: center; margin-bottom: 13px; }
.seals__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seal { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 11px 4px; text-align: center; }
.seal svg { width: 21px; height: 21px; color: var(--hkph-500); margin-inline: auto; }
.seal__t { font-size: 10px; font-weight: var(--weight-strong); color: var(--slate-700); margin-top: 5px; }
.seal__s { font-size: 8.5px; font-weight: var(--weight-body); color: var(--muted-2); }

/* info note (blue tint) */
.note { display: flex; align-items: flex-start; gap: 9px; background: var(--hkph-100);
  border-radius: var(--radius-md); padding: 11px 14px; font-size: 12px; font-weight: var(--weight-body);
  color: var(--slate-500); line-height: 1.7; }
.note svg { width: 17px; height: 17px; color: var(--hkph-500); margin-top: 1px; }

/* cta card (e.g. "طرح دلخواهت نیست؟") */
.cta-card { background: var(--gray-150); border-radius: var(--radius-lg); padding: 18px; text-align: center; }
.cta-card__title { font-size: 15px; font-weight: var(--weight-title); color: var(--text-strong); margin-bottom: 4px; }
.cta-card__text { font-size: 12.5px; font-weight: var(--weight-body); color: var(--slate-500); line-height: 1.7; margin-bottom: 14px; }

/* ============================================ slideshow (collections) === */
.slideshow { position: relative; overflow: hidden; background: #16323a; height: 320px; }
.slideshow__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--motion-slow) var(--motion-ease); }
.slideshow__slide.is-active { opacity: 1; }
.slideshow__slide img { width: 100%; height: 100%; object-fit: cover; }
.slideshow__scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,28,34,.92), rgba(13,28,34,.25) 55%, rgba(13,28,34,.5)); }
.slideshow__caption { position: absolute; inset-inline: 0; bottom: 0; padding: 20px 18px 34px; color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.slideshow__kicker { font-size: 13px; font-weight: var(--weight-strong); color: #7fe0ff; margin-bottom: 7px; }
.slideshow__title { font-size: 26px; font-weight: var(--weight-title); line-height: 1.3; margin: 0 0 6px; }
.slideshow__sub { font-size: 13px; font-weight: var(--weight-body); color: rgba(255,255,255,.85); line-height: 1.7; max-width: 360px; }
.slideshow__dots { position: absolute; inset-inline: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.slideshow__dot { width: 6px; height: 5px; border-radius: 9px; background: rgba(255,255,255,.5); border: 0; padding: 0;
  transition: width var(--motion-base); cursor: pointer; }
.slideshow__dot.is-active { width: 20px; background: #fff; }
@media (min-width: 1024px) {
  .slideshow { height: 520px; }
  .slideshow__scrim { background: linear-gradient(to left, rgba(13,28,34,.92), rgba(13,28,34,.15) 60%); }
  html[dir="rtl"] .slideshow__scrim { background: linear-gradient(to right, rgba(13,28,34,.92), rgba(13,28,34,.15) 60%); }
  .slideshow__caption { top: 0; bottom: 0; inset-inline-start: auto; width: 46%;
    display: flex; flex-direction: column; justify-content: center; padding: 0 56px; }
  .slideshow__title { font-size: 42px; }
  .slideshow__sub { font-size: 15px; }
}

/* ===================================================== size-guide modal == */
.modal { position: fixed; inset: 0; z-index: 300; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(20,26,30,.55); }
.modal__sheet { position: absolute; inset-inline: 0; bottom: 0; background: #fff;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; max-height: 90vh; overflow-y: auto;
  transform: translateY(100%); transition: transform var(--motion-slow) var(--motion-ease); padding-bottom: 18px; }
.modal.is-open .modal__sheet { transform: translateY(0); }
.modal__grab { width: 42px; height: 5px; border-radius: 9px; background: #cdd2d4; margin: 9px auto 4px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 18px 14px;
  border-bottom: 1px solid #f0f0f0; }
.modal__title { font-size: 17px; font-weight: var(--weight-title); color: var(--text-strong); }
.modal__close { width: 32px; height: 32px; border-radius: 50%; background: var(--gray-100); border: 0;
  display: flex; align-items: center; justify-content: center; color: var(--slate-600); }
.modal__body { padding: 16px 18px 4px; }
@media (min-width: 768px) {
  /* Centered dialog on desktop — physical left/top + translate works for both
     LTR and RTL (the previous logical-property override pushed it off-screen). */
  .modal__sheet { inset: auto; top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -45%) scale(.96);
    width: min(460px, 92vw); border-radius: var(--radius-xl); max-height: 88vh; }
  .modal.is-open .modal__sheet { transform: translate(-50%, -50%) scale(1); }
  .modal__grab { display: none; }
}

/* size-guide table + diagram */
.sizeguide__diagram { display: flex; justify-content: center; margin-bottom: 8px; }
.sizeguide__image { display: flex; justify-content: center; margin-bottom: 10px; }
.sizeguide__image img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.sizeguide__flat { background: var(--surface-page, #f0eeed); border: 1px solid var(--border-soft, #e7e1d8); border-radius: var(--radius-lg, 16px); padding: 10px 12px; }
/* flats are line-art on white → multiply drops the white into the نخودی panel */
.sizeguide__flat img { max-height: 300px; width: auto; mix-blend-mode: multiply; }
.sizeguide__legend { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.sizeguide__legend span { display: inline-flex; align-items: center; gap: 5px; background: var(--hkph-100);
  color: var(--hkph-700); font-size: 11px; font-weight: var(--weight-strong); padding: 5px 10px; border-radius: var(--radius-pill); }
.size-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); overflow: hidden; font-size: 12px; }
.size-table th, .size-table td { padding: 9px 3px; text-align: center; }
.size-table thead { background: var(--gray-100); color: var(--slate-600); font-weight: var(--weight-strong); font-size: 10.5px; line-height: 1.5; }
.size-table__ref { display: block; font-weight: var(--weight-body); color: var(--hkph-500); font-size: 10px; font-family: var(--font-fa-num); }
.size-table tbody { font-family: var(--font-fa-num); }
.size-table tbody tr { border-top: 1px solid #f0f0f0; }
.size-table tbody td:first-child { font-weight: var(--weight-title); color: var(--hkph-500); font-family: var(--font-fa); white-space: nowrap; }
.sizeguide__note { font-size: 11px; font-weight: var(--weight-body); color: var(--muted-2); margin: 12px 0 14px; text-align: start; }
.sizeguide__note strong { color: var(--text-strong); font-weight: var(--weight-strong); }
.sizeguide__note ul { margin: 5px 0 0; padding-inline-start: 16px; list-style: disc; }
.sizeguide__note li { margin-bottom: 3px; line-height: 1.7; }

/* ----------------------------------------------------------- utilities --- */
.is-hidden { display: none !important; }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.full-bleed { margin-inline: calc(-1 * var(--container-pad)); }

/* --------------------------------------------------- content / blog ----- */
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2 { font-size: var(--text-h3); margin-top: var(--space-6); }
.entry-content img { border-radius: var(--radius-md); }
.entry-content a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.page-article__media { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); }
/* single blog article (مجله) */
.page-article { max-width: 760px; }
.page-article__cats { font-size: var(--text-caption); font-weight: var(--weight-strong); color: var(--hkph-500); margin-bottom: 8px; }
.page-article__cats a { color: inherit; }
.page-article__title { font-size: var(--text-h2); font-weight: var(--weight-title); color: var(--text-strong); line-height: 1.3; margin: 0 0 10px; }
.page-article__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--text-caption); color: var(--muted); margin-bottom: var(--space-5); }
.page-article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.page-article__meta svg { color: var(--hkph-500); }
.page-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.page-article__tags a { font-size: 12px; color: var(--text-body); background: var(--gray-100); padding: 5px 12px; border-radius: var(--radius-pill); }
.post-list--grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .post-list--grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .page-article__title { font-size: var(--text-h1); } }
.post-list .card { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden; padding: 0 0 16px; }
.post-list .card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.post-list .card__title { font-size: var(--text-h3); margin: 14px 16px 6px; }
.post-list .card__title a { color: var(--text-strong); }
.post-list .card .muted, .post-list .card__excerpt { margin-inline: 16px; }
.post-list .card .section-head__link { margin: 10px 16px 0; }
.hkph-searchform input { flex: 1; }
.pagination, .woocommerce-pagination { margin-top: 24px; }

/* ---------------------------------------------------------- animations --- */
@keyframes hkph-tick {
  0%,15%{transform:translateY(0)} 20%,35%{transform:translateY(-20%)}
  40%,55%{transform:translateY(-40%)} 60%,75%{transform:translateY(-60%)}
  80%,100%{transform:translateY(-80%)}
}
@keyframes hkph-scrollx { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .marquee__track { animation-name: hkph-scrollx-rtl; }
@keyframes hkph-scrollx-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
  .marquee__track, .ticker__track { animation: none !important; }
}

/* ============================================================
   «راهنمای تیشرت با طرح دلخواه» — how it works (home)
   Mobile = compact rows; desktop = three screenshot cards.
   Flat (no gradient), official palette, calm motion (brand spec).
   ============================================================ */
.hiw { background: var(--gray-100); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-4); }
.hiw__head { text-align: center; max-width: 640px; margin: 0 auto var(--space-5); }
.hiw__kicker { display: inline-block; font-size: var(--text-caption); font-weight: var(--weight-title); letter-spacing: .08em; color: var(--hkph-700); margin-bottom: var(--space-2); }
.hiw__title { font-size: var(--text-h3); line-height: 1.35; font-weight: var(--weight-title); color: var(--text-strong); margin: 0; }
.hiw__sub { margin-top: var(--space-2); font-size: var(--text-button); color: var(--text-body); }
.hiw__grid { display: flex; flex-direction: column; gap: var(--space-3); max-width: 1040px; margin: 0 auto; }

.hiw__step { display: flex; align-items: center; gap: var(--space-3); background: var(--white); border: 1px solid var(--gray-150); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-card); transition: transform var(--motion-slow) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); animation: hiwUp .5s var(--motion-ease) backwards; }
.hiw__step:nth-child(1) { animation-delay: .05s; }
.hiw__step:nth-child(2) { animation-delay: .16s; }
.hiw__step:nth-child(3) { animation-delay: .27s; }
.hiw__step:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }
.hiw__phone { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-150); border: 1px solid var(--gray-150); }
.hiw__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform var(--motion-slow) var(--motion-ease); }
.hiw__badge { position: absolute; top: 4px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--hkph-500); color: #fff; font-weight: var(--weight-title); font-size: 14px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; animation: hiwBadge .5s var(--motion-ease) backwards; }
.hiw__step:nth-child(1) .hiw__badge { animation-delay: .18s; }
.hiw__step:nth-child(2) .hiw__badge { animation-delay: .29s; }
.hiw__step:nth-child(3) .hiw__badge { animation-delay: .40s; }
.hiw__body { flex: 1; min-width: 0; }
.hiw__step-title { font-size: var(--text-button); font-weight: var(--weight-title); color: var(--text-strong); margin: 0 0 2px; }
.hiw__step-desc { font-size: var(--text-caption); color: var(--text-body); line-height: 1.8; margin: 0; }

.hiw__cta { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; max-width: 360px; margin: var(--space-5) auto 0; }
.hiw__cta .btn { width: 100%; }
.hiw__cta .btn--primary { animation: hiwPulse 2.6s var(--motion-ease) infinite; }
.hiw__cta .btn--primary:hover { animation: none; }
.hiw__trust { text-align: center; margin-top: var(--space-3); font-size: var(--text-caption); color: var(--muted); }

@keyframes hiwUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hiwBadge { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@keyframes hiwPulse { 0% { box-shadow: 0 0 0 0 rgba(0,173,230,.35); } 70% { box-shadow: 0 0 0 12px rgba(0,173,230,0); } 100% { box-shadow: 0 0 0 0 rgba(0,173,230,0); } }

@media (min-width: 1024px) {
  .hiw { padding: var(--space-7) var(--space-6); }
  .hiw__head { margin-bottom: var(--space-6); }
  .hiw__title { font-size: var(--text-h2); }
  .hiw__sub { font-size: var(--text-body-md); }
  .hiw__grid { flex-direction: row; gap: var(--space-4); }
  .hiw__step { flex: 1; display: block; text-align: right; padding: var(--space-4); }
  .hiw__step:hover { transform: translateY(-6px); }
  .hiw__step:hover .hiw__phone img { transform: scale(1.06); }
  .hiw__phone { width: auto; height: auto; aspect-ratio: 9 / 13; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
  .hiw__badge { top: 10px; inset-inline-start: 10px; width: 42px; height: 42px; font-size: var(--text-h3); border: 0; }
  .hiw__step-title { font-size: var(--text-button); margin-bottom: var(--space-1); }
  .hiw__step-desc { font-size: 14px; }
  .hiw__cta { flex-direction: row; justify-content: center; gap: var(--space-3); max-width: none; }
  .hiw__cta .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hiw__step, .hiw__badge { animation: none; }
  .hiw__phone img { transition: none; }
  .hiw__cta .btn--primary { animation: none; }
}

/* ============================================================
   Home builder — category carousel + campaign/countdown (Phase B/C)
   Scoped, additive; does not affect the standard ul.products grid.
   ============================================================ */
.hkph-carousel { position: relative; }
.hkph-carousel ul.products {
  display: grid; grid-auto-flow: column; grid-auto-columns: 46%;
  grid-template-columns: none !important; /* !important: beats .home/.shop-content ul.products (equal specificity, loaded later in woocommerce.css) so overflow cards don't collapse into 0px slivers */
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.hkph-carousel ul.products::-webkit-scrollbar { display: none; }
.hkph-carousel ul.products > li { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px)  { .hkph-carousel ul.products { grid-auto-columns: 30%; gap: 16px; } }
@media (min-width: 1024px) { .hkph-carousel ul.products { grid-auto-columns: 22%; } }

.hkph-campaign {
  border-radius: var(--radius-lg, 16px); background: var(--surface-tint, rgba(0,173,230,.10));
  padding: 28px 20px; text-align: center; background-size: cover; background-position: center;
}
.hkph-campaign--image { color: #fff; position: relative; overflow: hidden; }
.hkph-campaign--image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.hkph-campaign__body { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; display: grid; gap: 12px; justify-items: center; }
.hkph-campaign__title { font-size: var(--text-h2, 30px); font-weight: var(--weight-title, 800); margin: 0; }
.hkph-campaign__sub { margin: 0; opacity: .9; }
.hkph-countdown { display: flex; gap: 10px; direction: ltr; }
.hkph-countdown__unit { display: grid; gap: 4px; min-width: 56px; padding: 8px 6px; border-radius: var(--radius-sm, 8px); background: rgba(255,255,255,.16); }
.hkph-campaign:not(.hkph-campaign--image) .hkph-countdown__unit { background: #fff; box-shadow: var(--shadow-card); }
.hkph-countdown__num { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hkph-countdown__label { font-size: var(--text-label, 12px); opacity: .8; }
.hkph-campaign__cta { margin-top: 4px; }

/* Installments row + model-size note (Phase C) */
.hkph-installments {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 10px 0; padding: 10px 12px;
  border: 1px solid var(--border-soft, #EBEBEB); border-radius: var(--radius-sm, 8px);
  background: var(--surface-subtle, #F4F4F4);
  font-size: var(--text-caption, 13px); color: var(--text-body, #4B555A);
}
.hkph-installments__text bdi, .hkph-installments .amount { font-weight: 700; color: var(--text-strong, #394246); }
.hkph-installments__provider { color: var(--text-muted, #7a8388); }
/* لوگوی ارائه‌دهندهٔ اقساط (اسنپ‌پی): یک بجِ پرداخت است، نه تصویر شاخص —
   ارتفاع ثابت و عرض آزاد تا هیچ‌وقت کشیده نشود، و با margin-inline-start:auto
   به لبهٔ انتهایی ردیف می‌چسبد. روی موبایلِ باریک ردیف wrap می‌شود و لوگو به
   سطر بعد می‌رود؛ نه ردیف را می‌شکند نه متن را فشرده می‌کند. */
.hkph-installments__logo {
  flex: 0 0 auto; align-self: center;
  height: 28px; width: auto; max-width: 104px;
  margin-inline-start: auto; object-fit: contain; opacity: .92;
}
.hkph-model-note { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--text-caption, 13px); color: var(--text-muted, #7a8388); }

/* Back-in-stock notify form (Phase C round 3) */
.hkph-bis { margin: 12px 0; padding: 14px; border: 1px solid var(--border-soft, #EBEBEB); border-radius: var(--radius-md, 12px); background: var(--surface-subtle, #F4F4F4); }
.hkph-bis__head { display: flex; align-items: center; gap: 8px; font-size: var(--text-caption, 13px); color: var(--text-body, #4B555A); margin-bottom: 10px; }
.hkph-bis__row { display: flex; gap: 8px; }
.hkph-bis__email { flex: 1 1 auto; min-width: 0; }
.hkph-bis__msg { margin: 8px 0 0; font-size: var(--text-caption, 13px); color: var(--success, #1F9D57); }
.hkph-bis.is-done .hkph-bis__row { display: none; }

/* Live search suggestions (Phase C round 4) */
.search-suggest { margin-top: 12px; display: grid; gap: 4px; }
.search-suggest__item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm,8px); text-decoration: none; color: var(--text-strong,#394246); }
.search-suggest__item:hover { background: var(--surface-subtle,#F4F4F4); }
.search-suggest__item img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.search-suggest__t { flex: 1 1 auto; font-size: var(--text-body-md,16px); }
.search-suggest__p { font-weight: 700; font-size: var(--text-caption,13px); white-space: nowrap; }

/* Order tracking */
.hkph-track__row { display: flex; flex-wrap: wrap; gap: 8px; }
.hkph-track__row .input { flex: 1 1 160px; min-width: 0; }
.hkph-track__result { margin-top: 14px; }
.hkph-track__card { padding: 14px; border: 1px solid var(--border-soft,#EBEBEB); border-radius: var(--radius-md,12px); background: var(--surface-subtle,#F4F4F4); }
.hkph-track__status { font-weight: 800; color: var(--color-primary,#00ADE6); }
.hkph-track__meta { font-size: var(--text-caption,13px); color: var(--text-muted,#7a8388); margin: 4px 0 8px; }
.hkph-track__items { margin: 0 0 8px; padding-inline-start: 18px; font-size: var(--text-caption,13px); }
.hkph-track__total { font-weight: 700; }
.hkph-track__err { color: var(--danger,#D23B3B); }

/* Category panel (mobile drawer + [hkph_categories]) */
.hkph-cats { margin-top: 8px; }
.hkph-cats__title { font-weight: 700; font-size: var(--text-caption,13px); color: var(--text-muted,#7a8388); margin: 12px 0 6px; }
.hkph-cats__list, .hkph-cats__sub { list-style: none; margin: 0; padding: 0; }
.hkph-cats__parent { display: block; padding: 8px 0; font-weight: 600; color: var(--text-strong,#394246); text-decoration: none; }
.hkph-cats__sub { padding: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.hkph-cats__sub a { font-size: var(--text-caption,13px); color: var(--text-body,#4B555A); text-decoration: none; background: var(--surface-subtle,#F4F4F4); padding: 4px 10px; border-radius: var(--radius-pill,999px); }

/* Newsletter / SMS signup (Phase C round 5) */
.hkph-news { margin: 12px 0; }
.hkph-news__title { font-weight: 700; }
.hkph-news__sub { font-size: var(--text-caption,13px); color: var(--text-muted,#7a8388); margin: 2px 0 8px; }
.hkph-news__row { display: flex; gap: 8px; }
.hkph-news__input { flex: 1 1 auto; min-width: 0; }
.hkph-news__msg { margin: 8px 0 0; font-size: var(--text-caption,13px); color: var(--success,#1F9D57); }
.hkph-news.is-done .hkph-news__row { display: none; }

/* ============================================================
   Stores (شعب) + Support (پشتیبانی) page templates
   ============================================================ */
.hkph-empty { text-align: center; color: var(--muted); padding: 32px 16px; }
.hkph-empty svg { color: var(--hkph-500); margin: 0 auto 10px; }

.hkph-stores { padding-block: 22px 40px; }
.hkph-stores__head, .hkph-support__head { text-align: center; max-width: 600px; margin: 0 auto 22px; }
.hkph-stores__title, .hkph-support__title { font-size: var(--text-h2); font-weight: var(--weight-title); color: var(--text-strong); margin: 0; }
.hkph-stores__sub, .hkph-support__sub { font-size: var(--text-caption); color: var(--muted); margin: 8px 0 0; line-height: 1.8; }
.hkph-stores__intro { max-width: 760px; margin: 0 auto 22px; }
.hkph-stores__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px)  { .hkph-stores__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .hkph-stores__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.hkph-store-card { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 16px; background: var(--surface, #fff); }
.hkph-store-card__name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: var(--weight-title); color: var(--text-strong); margin: 0 0 8px; }
.hkph-store-card__name svg { color: var(--hkph-500); flex: 0 0 auto; }
.hkph-store-card__addr { font-size: 12.5px; color: var(--text-body); line-height: 1.8; margin: 0 0 10px; }
.hkph-store-card__meta { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.hkph-store-card__meta li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-body); }
.hkph-store-card__meta svg { color: var(--hkph-500); flex: 0 0 auto; }
.hkph-store-card__meta a { color: var(--text-strong); }

.hkph-support { padding-block: 22px 40px; }
.hkph-support__channels { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 768px) { .hkph-support__channels { grid-template-columns: repeat(4, 1fr); } }
.hkph-support__ch { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 18px 12px; color: inherit;
  transition: border-color var(--motion-fast), transform var(--motion-fast); }
.hkph-support__ch:hover { border-color: var(--hkph-500); transform: translateY(-2px); }
.hkph-support__ch svg { color: var(--hkph-500); }
.hkph-support__ch-t { font-size: 13px; font-weight: var(--weight-strong); color: var(--text-strong); margin-top: 4px; }
.hkph-support__ch-v { font-size: 11.5px; color: var(--muted); }
.hkph-support__hours { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }
.hkph-support__hours svg { color: var(--hkph-500); }
.hkph-support__h2 { font-size: var(--text-h3); font-weight: var(--weight-title); color: var(--text-strong); margin: 0 0 14px; }
.hkph-support__track, .hkph-support__faq, .hkph-support__content { margin-top: 30px; }

/* ============================================================
   Home builder — marketing blocks (banner row · newsletter band)
   ============================================================ */
.hkph-banner-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hkph-banner { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.hkph-banner img { width: 100%; height: auto; display: block; transition: transform var(--motion-slow) var(--motion-ease); }
.hkph-banner:hover img { transform: scale(1.02); }
@media (min-width: 768px) {
  .hkph-banner-row--2 { grid-template-columns: 1fr 1fr; }
  .hkph-banner-row--3 { grid-template-columns: repeat(3, 1fr); }
}

.hkph-news-banner { background: var(--hkph-500); color: #fff; border-radius: var(--radius-xl); padding: 28px 24px; display: grid; gap: 14px; }
.hkph-news-banner__title { font-size: var(--text-h3); font-weight: var(--weight-title); color: #fff; margin: 0; }
.hkph-news-banner__sub { font-size: var(--text-caption); color: rgba(255,255,255,.82); margin: 6px 0 0; line-height: 1.8; }
.hkph-news-banner .hkph-news { margin: 0; }
@media (min-width: 768px) { .hkph-news-banner { grid-template-columns: 1.1fr 1fr; align-items: center; } }

/* ============================================================
 * Page Composer — block wrapper utilities + composer blocks
 * (رابط بصری صفحه‌ساز: تنظیمات مشترک هر بخش + بلوک‌های خلاقانه)
 * ============================================================ */

/* Common per-block controls: background */
.hkph-block--bg-soft,
.hkph-block--bg-brand,
.hkph-block--bg-dark { border-radius: var(--radius-lg); padding-inline: 16px; }
.hkph-block--bg-soft  { background: var(--surface-subtle); }
.hkph-block--bg-brand { background: var(--surface-tint); }
.hkph-block--bg-dark  { background: var(--surface-inverse); color: #fff; }
.hkph-block--bg-dark .section-head__title,
.hkph-block--bg-dark h2, .hkph-block--bg-dark h3 { color: #fff; }

/* Vertical rhythm variants (target the inner .section margins) */
.hkph-block--pad-compact  .section { margin-block: var(--space-5, 20px); }
.hkph-block--pad-spacious .section { margin-block: calc(var(--space-7) * 1.6); }
.hkph-block--pad-none     .section { margin-block: 0; }

/* Full-bleed breakout (content stays aligned to the container) */
.hkph-block--full { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; }
.hkph-block--full > .section {
  max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad);
}

/* Per-device visibility */
@media (max-width: 781px) { .hkph-hide-mobile  { display: none !important; } }
@media (min-width: 782px) { .hkph-hide-desktop { display: none !important; } }

/* Campaign + CTA backgrounds as custom properties (mobile artwork swap) */
.hkph-campaign--image { background-image: var(--hkph-cmp-bg); }
@media (max-width: 640px) {
  .hkph-campaign--image { background-image: var(--hkph-cmp-bg-m, var(--hkph-cmp-bg)); }
}

.hkph-cta {
  border-radius: var(--radius-lg); background: var(--surface-inverse); color: #fff;
  padding: 44px 24px; text-align: center; background-size: cover; background-position: center;
}
.hkph-cta--image { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), var(--hkph-cta-bg); }
@media (max-width: 640px) {
  .hkph-cta--image { background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), var(--hkph-cta-bg-m, var(--hkph-cta-bg)); }
}
.hkph-cta__body { display: grid; gap: 10px; justify-items: center; max-width: 640px; margin-inline: auto; }
.hkph-cta__title { margin: 0; color: #fff; font-size: var(--text-h2); font-weight: var(--weight-title); }
.hkph-cta__sub { margin: 0; opacity: .88; }
.hkph-cta__btn { margin-top: 6px; }

/* Video hero */
.hkph-vhero__media { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: #000; min-height: 200px; }
.hkph-vhero__video, .hkph-vhero__poster { display: block; width: 100%; height: auto; }
.hkph-vhero__embed { position: relative; padding-top: 56.25%; }
.hkph-vhero__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hkph-vhero__overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.58)); padding: 22px;
}
.hkph-vhero__inner { color: #fff; display: grid; gap: 8px; justify-items: start; }
.hkph-vhero__title { margin: 0; color: #fff; font-size: var(--text-h2); font-weight: var(--weight-title); }
.hkph-vhero__sub { margin: 0; opacity: .9; }
@media (min-width: 768px) { .hkph-vhero__overlay { padding: 40px; } }

/* Bento / mosaic grid */
.hkph-bento { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
.hkph-bento__tile { display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-subtle); }
.hkph-bento__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--motion-slow) var(--motion-ease); }
.hkph-bento__tile:hover img { transform: scale(1.04); }
.hkph-bento__tile--feature { grid-column: span 2; grid-row: span 2; }
@media (min-width: 768px) {
  .hkph-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 170px; }
  .hkph-bento--2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 300px; }
  .hkph-bento--2 .hkph-bento__tile--feature { grid-column: span 1; grid-row: span 1; }
}

/* Benefits bar */
.hkph-benefits {
  list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-page);
}
.hkph-benefits__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hkph-benefits__icon { color: var(--hkph-500); display: inline-flex; flex: 0 0 auto; }
.hkph-benefits__text { font-size: var(--text-caption); color: var(--text-body); }
@media (min-width: 900px) { .hkph-benefits { grid-template-columns: repeat(4, 1fr); padding: 18px 22px; } }

/* Product tabs */
.hkph-ptabs__head { flex-wrap: wrap; }
.hkph-ptabs__nav { display: flex; gap: 4px; background: var(--surface-subtle); border-radius: 999px; padding: 4px; }
.hkph-ptabs__tab {
  border: 0; background: none; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  font-size: var(--text-caption); color: var(--text-body); font-family: inherit;
}
.hkph-ptabs__tab.is-active { background: var(--surface-page); color: var(--text-strong); font-weight: 700; box-shadow: var(--shadow-card); }
.hkph-ptabs__panel[hidden] { display: none; }

/* Category grid */
.hkph-catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hkph-catgrid__card {
  display: grid; gap: 10px; justify-items: center; text-decoration: none; padding: 16px 10px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--surface-page);
  transition: box-shadow var(--motion-fast, 160ms) var(--motion-ease, ease), transform var(--motion-fast, 160ms) var(--motion-ease, ease);
}
.hkph-catgrid__card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.hkph-catgrid__thumb, .hkph-catgrid__ph { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--surface-subtle); display: block; }
.hkph-catgrid__name { font-size: var(--text-caption); color: var(--text-strong); font-weight: 600; text-align: center; }
@media (min-width: 640px)  { .hkph-catgrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .hkph-catgrid { grid-template-columns: repeat(6, 1fr); } }

/* Spacer / divider */
.hkph-spacer { position: relative; }
.hkph-spacer--small  { height: 16px; }
.hkph-spacer--medium { height: 40px; }
.hkph-spacer--large  { height: 72px; }
.hkph-spacer__rule { position: absolute; top: 50%; right: 0; left: 0; border-top: 1px solid var(--border-soft); }

/* Rich text */
.hkph-richtext__body { max-width: 720px; display: grid; gap: 12px; justify-items: start; }
.hkph-richtext--center .hkph-richtext__body { margin-inline: auto; text-align: center; justify-items: center; }
.hkph-richtext__title { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-title); color: var(--text-strong); }
.hkph-richtext__body p { margin: 0; line-height: 2; color: var(--text-body); }

/* Sticky campaign bar */
.hkph-sticky-bar {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: var(--hkph-500); color: #fff; border-radius: var(--radius-sm);
}
.hkph-sticky-bar.is-stuck { position: fixed; top: 0; right: 0; left: 0; z-index: 90; border-radius: 0; box-shadow: 0 2px 12px rgba(0,0,0,.18); }
body.admin-bar .hkph-sticky-bar.is-stuck { top: 32px; }
.hkph-sticky-bar__inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; flex: 1 1 auto; min-width: 0; }
.hkph-sticky-bar__text { font-weight: 700; font-size: var(--text-caption); }
.hkph-sticky-bar__cta { color: #fff; font-size: var(--text-caption); text-decoration: underline; text-underline-offset: 3px; }
.hkph-sticky-bar__close { background: none; border: 0; color: #fff; cursor: pointer; display: inline-flex; padding: 4px; flex: 0 0 auto; }
.hkph-countdown--inline { display: inline-flex; gap: 6px; }
.hkph-countdown--inline .hkph-countdown__unit { min-width: auto; padding: 2px 7px; display: inline-flex; gap: 4px; align-items: baseline; background: rgba(255,255,255,.18); }
.hkph-countdown--inline .hkph-countdown__num { font-size: 14px; }
.hkph-countdown--inline .hkph-countdown__label { font-size: 10px; opacity: .85; }
@media (max-width: 640px) { .hkph-sticky-bar__inner { gap: 8px; } .hkph-sticky-bar__text { font-size: 12px; } }

/* ---- Creative batch 2: stories / testimonials / marquee / media-text ---- */

/* Story circles */
.hkph-stories {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 10px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.hkph-stories::-webkit-scrollbar { display: none; }
.hkph-story {
  display: grid; gap: 8px; justify-items: center; flex: 0 0 auto;
  text-decoration: none; scroll-snap-align: start; width: 86px;
}
.hkph-story__ring {
  width: 78px; height: 78px; border-radius: 50%; padding: 3px; display: block;
  background: conic-gradient(from 210deg, var(--hkph-500), var(--hkph-700, #007AA6), var(--hkph-500));
}
.hkph-story__ring img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--surface-page, #fff);
}
.hkph-story:hover .hkph-story__ring { filter: brightness(1.06); }
.hkph-story__label {
  font-size: var(--text-label, 12px); color: var(--text-strong); text-align: center;
  max-width: 86px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 900px) {
  .hkph-story { width: 104px; }
  .hkph-story__ring { width: 94px; height: 94px; }
  .hkph-story__label { max-width: 104px; }
}

/* Testimonials */
.hkph-quotes { display: grid; gap: 14px; grid-template-columns: 1fr; }
.hkph-quote {
  margin: 0; padding: 18px 20px; border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); background: var(--surface-page, #fff); display: grid; gap: 10px;
  align-content: start;
}
.hkph-quote__stars { color: #E8A33D; font-size: 15px; letter-spacing: 2px; }
.hkph-quote__text { margin: 0; color: var(--text-body); line-height: 2; font-size: var(--text-caption, 13.5px); }
.hkph-quote__name { color: var(--text-muted, #7a8388); font-size: var(--text-label, 12px); }
.hkph-quote__name::before { content: "— "; }
@media (min-width: 768px)  { .hkph-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hkph-quotes { grid-template-columns: repeat(4, 1fr); } }
.hkph-quotes:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .hkph-quotes:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* Marquee ticker */
.hkph-marquee {
  display: block; overflow: hidden; background: var(--surface-inverse, #22303A); color: #fff;
  border-radius: var(--radius-sm); padding-block: 10px; text-decoration: none; margin-block: var(--space-6);
}
.hkph-marquee__track { display: flex; width: max-content; }
.hkph-marquee__strip { display: flex; align-items: center; animation: hkph-marquee 22s linear infinite; }
.hkph-marquee--slow .hkph-marquee__strip { animation-duration: 36s; }
.hkph-marquee--fast .hkph-marquee__strip { animation-duration: 13s; }
.hkph-marquee:hover .hkph-marquee__strip { animation-play-state: paused; }
.hkph-marquee__item { padding-inline: 22px; font-weight: 700; font-size: var(--text-caption, 13px); white-space: nowrap; }
.hkph-marquee__dot { font-size: 7px; opacity: .6; }
/* RTL: strip flows right-to-left, loop moves toward +x (right). */
@keyframes hkph-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.hkph-marquee__track { transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) {
  .hkph-marquee__strip { animation: none; }
  .hkph-marquee__track { transform: none; }
  .hkph-marquee__strip[aria-hidden="true"] { display: none; }
}

/* Media + text split */
.hkph-mediatext { display: grid; gap: 20px; align-items: center; }
.hkph-mediatext__media img { width: 100%; height: auto; border-radius: var(--radius-xl); display: block; }
.hkph-mediatext__body { display: grid; gap: 14px; justify-items: start; }
.hkph-mediatext__title { margin: 0; font-size: var(--text-h2); font-weight: var(--weight-title); color: var(--text-strong); }
.hkph-mediatext__text p { margin: 0 0 10px; line-height: 2.1; color: var(--text-body); }
.hkph-mediatext__text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .hkph-mediatext { grid-template-columns: 1fr 1fr; gap: 44px; }
  /* media_side=right → عکس سمت راست (ستون اول در RTL) */
  .hkph-mediatext--left .hkph-mediatext__media { order: 2; }
  .hkph-mediatext--left .hkph-mediatext__body  { order: 1; }
}

/* ---- Coupon copy strip (بلوک کد تخفیف کپی‌شو) ---- */
.hkph-coupon {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border: 1.5px dashed var(--hkph-500, #00ADE6);
  border-radius: var(--radius-lg); background: var(--surface-tint, rgba(0,173,230,.08));
}
.hkph-coupon__text { display: grid; gap: 2px; min-width: 0; }
.hkph-coupon__title { font-size: var(--text-h4, 17px); color: var(--text-strong); }
.hkph-coupon__sub { font-size: var(--text-caption, 13px); color: var(--text-body); }
.hkph-coupon__chip {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--surface-page, #fff); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 9px 16px; transition: box-shadow var(--motion-fast, 160ms) ease;
}
.hkph-coupon__chip:hover { box-shadow: var(--shadow-card); }
.hkph-coupon__chip code { font-size: 17px; font-weight: 800; letter-spacing: 1px; color: var(--text-strong); background: none; }
.hkph-coupon__hint { font-size: var(--text-label, 11.5px); color: var(--hkph-500, #00ADE6); font-weight: 700; }
.hkph-coupon__chip.is-copied { border-color: #1a7f37; }
.hkph-coupon__chip.is-copied .hkph-coupon__hint { color: #1a7f37; }
@media (max-width: 640px) { .hkph-coupon { justify-content: center; text-align: center; } .hkph-coupon__text { justify-items: center; } }

/* ---- آپلود طرح دلخواه (PDP) ---- */
.hkph-design-upload {
  display: grid; gap: 12px; margin: 14px 0; padding: 16px;
  border: 1.5px dashed var(--hkph-500, #00ADE6); border-radius: var(--radius-lg);
  background: var(--surface-tint, rgba(0,173,230,.06));
}
.hkph-design-upload__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.hkph-design-upload__head strong { font-size: var(--text-h4, 15.5px); color: var(--text-strong); }
.hkph-design-upload__fee { font-size: var(--text-label, 12px); color: var(--hkph-700, #007AA6); font-weight: 700; }
.hkph-design-upload__drop {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px; border-radius: var(--radius-sm); background: var(--surface-page, #fff);
  border: 1px solid var(--border-soft); min-height: 52px;
}
.hkph-design-upload__drop:hover { border-color: var(--hkph-500, #00ADE6); }
.hkph-design-upload__cta { font-size: var(--text-caption, 13px); color: var(--text-body); }
.hkph-design-upload.has-file .hkph-design-upload__cta { color: var(--hkph-700, #007AA6); font-weight: 700; }
.hkph-design-upload__file { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hkph-design-upload__preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-soft); display: block; }
.hkph-design-upload__row { display: grid; gap: 10px; grid-template-columns: minmax(120px, auto) 1fr; }
.hkph-design-upload__row label { display: grid; gap: 4px; }
.hkph-design-upload__row span { font-size: var(--text-label, 12px); color: var(--text-strong); font-weight: 700; }
.hkph-design-upload__row select, .hkph-design-upload__row input { width: 100%; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 8px; }
.hkph-design-upload__msg { margin: 0; min-height: 1.3em; font-size: var(--text-label, 12px); color: var(--text-muted); }
.hkph-design-upload__msg.is-error { color: #d63638; font-weight: 700; }
.hkph-design-upload.is-uploading { opacity: .7; }
@media (max-width: 640px) { .hkph-design-upload__row { grid-template-columns: 1fr; } }

/* Badge: چاپ طرح دلخواه */
.product-card__badge .badge--design { background: var(--hkph-500, #00ADE6); color: #fff; }

/* ---- باشگاه مشتریان: تبدیل امتیاز، تاریخچه، بنر معرفی ---- */
.hkph-club__credit { display: block; font-size: var(--text-label, 11.5px); color: var(--hkph-700, #007AA6); font-weight: 700; }
.hkph-club__flash { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hkph-club__flash.is-ok { background: #EDF8F1; border: 1px solid #BCE3C9; }
.hkph-club__flash.is-err { background: #FDF0F0; border: 1px solid #F0C4C4; color: #d63638; }
.hkph-club__redeem { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.hkph-club__chip {
  display: grid; gap: 2px; justify-items: center; cursor: pointer;
  padding: 10px 18px; border: 1.5px solid var(--hkph-500, #00ADE6); border-radius: 12px;
  background: var(--surface-page, #fff); color: var(--text-strong); transition: background var(--motion-fast, 160ms) ease;
}
.hkph-club__chip:hover { background: var(--surface-tint, rgba(0,173,230,.08)); }
.hkph-club__chip span { font-size: var(--text-label, 11.5px); color: var(--hkph-700, #007AA6); }
.hkph-club__chip--all { border-style: dashed; }
.hkph-club__rules { font-size: var(--text-label, 12px); color: var(--text-muted); line-height: 2; }
.hkph-club__rules--footer { border-top: 1px solid var(--border-soft); padding-top: 10px; margin-top: 18px; }
.hkph-club__coupons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hkph-club__coupon { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hkph-club__coupon.is-used { opacity: .55; }
.hkph-club__coupon-meta { font-size: var(--text-label, 12px); color: var(--text-muted); }
.hkph-club__history { width: 100%; border-collapse: collapse; font-size: var(--text-caption, 13px); }
.hkph-club__history th, .hkph-club__history td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); text-align: right; }
.hkph-club__history th { color: var(--text-muted); font-size: var(--text-label, 11.5px); }
.hkph-club__history .is-plus { color: #1a7f37; font-weight: 700; }
.hkph-club__history .is-minus { color: #d63638; font-weight: 700; }
.hkph-club-hint { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: var(--text-label, 12px); color: var(--hkph-700, #007AA6); }
.hkph-club-cart-line th, .hkph-club-cart-line td { font-size: var(--text-caption, 13px); color: var(--hkph-700, #007AA6); }

.hkph-clubbanner { border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 22px 20px 24px; background: var(--surface-page, #fff); }
.hkph-clubbanner__steps { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 6px 0 18px; }
.hkph-clubbanner__step { display: grid; gap: 6px; justify-items: center; text-align: center; position: relative; padding: 14px 10px; border-radius: var(--radius-lg); background: var(--surface-subtle, #F4F4F4); }
.hkph-clubbanner__num {
  position: absolute; top: 10px; inset-inline-start: 12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--hkph-500, #00ADE6); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.hkph-clubbanner__icon { color: var(--hkph-500, #00ADE6); }
.hkph-clubbanner__txt { font-size: var(--text-label, 12px); color: var(--text-muted); }
.hkph-clubbanner__cta { text-align: center; }
@media (min-width: 768px) { .hkph-clubbanner__steps { grid-template-columns: repeat(3, 1fr); } }

/* Club redeem confirm step */
.hkph-club__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.hkph-club__chip.is-selected { background: var(--surface-tint, rgba(0,173,230,.1)); box-shadow: 0 0 0 2px var(--hkph-500, #00ADE6); }
.hkph-club__confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-subtle, #F4F4F4); }
.hkph-club__confirm-text { font-size: var(--text-caption, 13px); color: var(--text-strong); }
.hkph-club__confirm-cancel { background: none; border: 0; cursor: pointer; color: var(--text-muted); text-decoration: underline; font-size: 12px; }

/* ============================================================
   Page-composer pack 2 — slider · carousel motion · entrance
   animations · custom block background · video · magazine ·
   draft-preview badge. Additive and scoped.
   ============================================================ */

/* ---- per-block custom background (auto light/dark text) ---- */
.hkph-block--bg-custom { background: var(--hkph-block-bg, transparent); border-radius: var(--radius-lg); padding-inline: 16px; }
.hkph-block--on-dark { color: #fff; --text-strong: #fff; --text-body: rgba(255,255,255,.88); --text-muted: rgba(255,255,255,.72); }
.hkph-block--on-dark .section-head__title,
.hkph-block--on-dark h2, .hkph-block--on-dark h3 { color: #fff; }
.hkph-block--on-dark .section-head__link { color: rgba(255,255,255,.85); }

/* ---- entrance animations (only below-the-fold blocks hide first) ---- */
.hkph-anim.is-pre { opacity: 0; will-change: opacity, transform; }
.hkph-anim--fade-up.is-pre { transform: translateY(26px); }
.hkph-anim.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: reduce) {
  .hkph-anim, .hkph-anim.is-pre { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- image slider ---- */
.hkph-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.hkph-slider__vp { position: relative; aspect-ratio: var(--hkph-slider-ratio, 16 / 6); overflow: hidden; background: var(--surface-subtle, #f4f4f4); }
@media (max-width: 767px) { .hkph-slider.has-mobile .hkph-slider__vp { aspect-ratio: 4 / 5; } }
.hkph-slider__track { display: flex; height: 100%; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.hkph-slider__slide { position: relative; flex: 0 0 100%; min-width: 100%; height: 100%; display: block; }
.hkph-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hkph-slider--fade .hkph-slider__track { display: block; transition: none; transform: none !important; }
.hkph-slider--fade .hkph-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.hkph-slider--fade .hkph-slider__slide.is-active { opacity: 1; pointer-events: auto; }
.hkph-slider__caption {
  position: absolute; inset-inline-start: 0; inset-inline-end: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 40px 22px 20px; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.hkph-slider__caption strong { font-size: clamp(16px, 2.6vw, 26px); line-height: 1.4; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hkph-slider__btn {
  display: inline-block; background: #fff; color: #1d2327; border-radius: 999px;
  padding: 8px 18px; font-size: 13px; font-weight: 700;
}
.hkph-slider__arrow, .hkph-car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.94); color: var(--text-strong, #222);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.14); transition: background .2s ease;
}
.hkph-slider__arrow:hover, .hkph-car-arrow:hover { background: #fff; }
.hkph-slider__arrow--prev { inset-inline-start: 10px; }
.hkph-slider__arrow--next { inset-inline-end: 10px; }
.hkph-slider__arrow::before { content: ""; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
html[dir="rtl"] .hkph-slider__arrow--prev::before { transform: rotate(45deg); margin-inline-start: 3px; }
html[dir="rtl"] .hkph-slider__arrow--next::before { transform: rotate(-135deg); margin-inline-end: 3px; }
html:not([dir="rtl"]) .hkph-slider__arrow--prev::before { transform: rotate(-135deg); margin-inline-start: 3px; }
html:not([dir="rtl"]) .hkph-slider__arrow--next::before { transform: rotate(45deg); margin-inline-end: 3px; }
.hkph-slider__dots { position: absolute; bottom: 10px; inset-inline-start: 50%; transform: translateX(50%); display: flex; gap: 7px; z-index: 5; }
html:not([dir="rtl"]) .hkph-slider__dots { transform: translateX(-50%); }
.hkph-slider__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; padding: 0; transition: all .2s ease; }
.hkph-slider__dot.is-active { background: #fff; width: 22px; border-radius: 999px; }
.hkph-slider__pause {
  position: absolute; bottom: 8px; inset-inline-end: 10px; z-index: 5;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center;
}
.hkph-slider__pause::before { content: ""; width: 10px; height: 10px; background: linear-gradient(to right, #fff 32%, transparent 32%, transparent 68%, #fff 68%); }
.hkph-slider__pause[data-playing="0"]::before { width: 0; height: 0; background: none; border-block: 6px solid transparent; border-inline-start: 9px solid #fff; }
@media (max-width: 767px) { .hkph-slider__arrow { width: 38px; height: 38px; } .hkph-slider__caption { padding: 30px 14px 14px; } }
@media (prefers-reduced-motion: reduce) { .hkph-slider__track, .hkph-slider--fade .hkph-slider__slide { transition: none; } }

/* ---- product-carousel arrows (desktop pointer devices only) ---- */
.hkph-carousel .hkph-car-arrow { opacity: 0; pointer-events: none; }
.hkph-carousel:hover .hkph-car-arrow, .hkph-carousel:focus-within .hkph-car-arrow { opacity: 1; pointer-events: auto; }
.hkph-car-arrow--prev { inset-inline-start: -8px; }
.hkph-car-arrow--next { inset-inline-end: -8px; }
html[dir="rtl"] .hkph-car-arrow--next svg { transform: scaleX(-1); }
html:not([dir="rtl"]) .hkph-car-arrow--prev svg { transform: scaleX(-1); }
@media (hover: none) { .hkph-carousel .hkph-car-arrow { display: none; } }

/* ---- continuous marquee mode («ردشونده پیوسته») ----
   قاب (والد) می‌بُرد، نه خودِ نوار: اگر روی همان المانی که transform می‌خورد
   overflow:hidden هم باشد، پنجرهٔ بُرش با المان جابه‌جا می‌شود و بعد از چند
   لحظه فقط جای خالی می‌ماند — یکی از دلیل‌های «نوار می‌ایستد». */
@keyframes hkphMarquee { from { transform: translateX(0); } to { transform: translateX(var(--mq-dist, 0px)); } }
.hkph-carousel--marquee { overflow: hidden; }
/* قاب (والد) می‌بُرد، نه خودِ نوار: اگر روی همان المانی که transform می‌خورد
   overflow:hidden هم باشد، پنجرهٔ بُرش با المان جابه‌جا می‌شود و بعد از چند
   لحظه فقط جای خالی می‌ماند — یکی از دلیل‌های «نوار می‌ایستد».
   بدون :hover — این بلوک تمام‌عرض است و روی دسکتاپ نشانگر ماوس تقریباً همیشه
   رویش می‌نشیند؛ pause با :hover باعث می‌شد نوار یک ثانیه بعد از لود یخ بزند و
   کاربر آن را خرابی ببیند. مکث را theme.js با is-paused می‌دهد: حرکت واقعی
   نشانگر، فوکوس کیبورد، یا کشیدن افقی.

   چرا سلکتور این‌قدر سنگین است ([data-motion="marquee"] + کلاس قاب)؟
   assets/css/motion-critical.css نسخهٔ «ضدِ UCSS» همین قواعد است و
   inc/enqueue.php آن را روی wp_head با اولویت ۲۱ به‌صورت <style> اینلاین چاپ
   می‌کند، یعنی بعد از <link> این فایل (اولویت ۸). قواعد آن فایل با سلکتور
   سبک‌تر هم‌وزنِ اینجا بودند و چون دیرتر می‌آیند برنده می‌شدند؛ تا وقتی آن فایل
   هم‌قواره نشده، این وزن بالاتر تنها چیزی است که رفتار درست را تضمین می‌کند.
   animation-play-state: running هم به همین دلیل صریح نوشته شده: هیچ کپیِ
   دیرترِ :hover نباید نوار را بخواباند. */
.hkph-carousel[data-motion="marquee"].hkph-carousel--marquee ul.products.is-marquee {
  overflow: visible; scroll-snap-type: none; will-change: transform;
  animation: hkphMarquee var(--mq-dur, 30s) linear infinite;
  animation-play-state: running;
}
.hkph-carousel[data-motion="marquee"].hkph-carousel--marquee.is-paused ul.products.is-marquee,
.hkph-carousel[data-motion="marquee"].hkph-carousel--marquee.is-offscreen ul.products.is-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hkph-carousel[data-motion="marquee"].hkph-carousel--marquee ul.products.is-marquee { animation: none; transform: none; }
}

/* ---- video block (click-to-load) ---- */
.hkph-video { margin-inline: auto; }
.hkph-video--9-16 { max-width: 420px; }
.hkph-video--1-1 { max-width: 640px; }
.hkph-video__frame {
  position: relative; display: block; width: 100%;
  aspect-ratio: var(--hkph-video-ratio, 16 / 9);
  border-radius: var(--radius-lg); overflow: hidden; background: #101418;
  border: 0; padding: 0; cursor: pointer;
}
.hkph-video__frame > img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; }
.hkph-video__frame iframe, .hkph-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hkph-video__play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 18px rgba(0,0,0,.35); transition: transform .2s ease;
}
.hkph-video__play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-block: 11px solid transparent; border-inline-start: 17px solid #1d2327;
  transform: translateX(-2px);
}
html:not([dir="rtl"]) .hkph-video__play::after { transform: translateX(2px); }
.hkph-video__frame:hover .hkph-video__play { transform: scale(1.07); }
.hkph-video__title { margin: 10px 0 0; text-align: center; color: var(--text-strong); font-weight: 600; }

/* ---- magazine posts ---- */
.hkph-magazine__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .hkph-magazine__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .hkph-magazine__grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
}
.hkph-magazine__card { display: block; color: inherit; }
.hkph-magazine__thumb {
  display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-subtle, #f4f4f4); margin-bottom: 10px;
}
.hkph-magazine__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.hkph-magazine__card:hover .hkph-magazine__thumb img { transform: scale(1.04); }
.hkph-magazine__title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--text-strong); font-size: 15px; line-height: 1.7;
}
.hkph-magazine__meta { display: flex; gap: 6px; margin-top: 6px; color: var(--text-muted); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .hkph-magazine__thumb img { transition: none; } }

/* ---- draft-preview badge ---- */
.hkph-draft-badge {
  position: fixed; bottom: 14px; inset-inline-start: 14px; z-index: 99999;
  background: #1d2327; color: #fff; padding: 9px 16px; border-radius: 999px;
  font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

/* ============================================================
   UX round 3 — modern search form (overlay) · composer text
   controls · PDP badge row.
   ============================================================ */

/* ---- search overlay: big friendly field ---- */
.search-overlay__sheet { max-width: 680px; }
.hkph-searchform { position: relative; display: flex; align-items: center; gap: 10px; }
.hkph-searchform__icon { position: absolute; inset-inline-start: 18px; color: var(--text-muted, #8a8a8a); display: flex; pointer-events: none; }
.hkph-searchform input[type="search"] {
  flex: 1; min-width: 0; height: 54px; border-radius: 999px;
  border: 1.5px solid var(--border-soft, #e4e1db); background: var(--gray-100, #f5f4f2);
  padding-inline-start: 50px; padding-inline-end: 16px;
  font-size: 15px; color: var(--text-strong); font-family: inherit;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.hkph-searchform input[type="search"]:focus {
  outline: none; border-color: var(--hkph-500); background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .04);
}
.hkph-searchform input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.hkph-searchform__btn {
  height: 54px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--hkph-500); color: var(--color-on-primary, #fff);
  font-size: 14px; font-weight: var(--weight-strong, 700); cursor: pointer; transition: background .2s ease;
}
.hkph-searchform__btn:hover { background: var(--hkph-600); }
.hkph-searchform__hint { margin: 10px 6px 0; font-size: 11.5px; color: var(--text-muted, #8a8a8a); }
@media (max-width: 640px) {
  .hkph-searchform input[type="search"] { height: 48px; font-size: 16px; }
  .hkph-searchform__btn { height: 48px; padding: 0 18px; }
}
.search-suggest { max-height: 52vh; overflow: auto; }
.search-suggest__item { border-radius: var(--radius-md); }
.search-suggest__item:hover { background: var(--gray-100, #f5f4f2); }

/* ---- composer text controls (رنگ/اندازه نوشته هر بلوک) ---- */
.hkph-block--tc .section-head__title,
.hkph-block--tc h2, .hkph-block--tc h3 { color: var(--hkph-title-c); }
.hkph-block--xc, .hkph-block--xc p { color: var(--hkph-text-c); }
.hkph-tsize-sm .section-head__title, .hkph-tsize-sm h2 { font-size: 15px; }
.hkph-tsize-lg .section-head__title, .hkph-tsize-lg h2 { font-size: clamp(20px, 3vw, 27px); }
.hkph-tsize-xl .section-head__title, .hkph-tsize-xl h2 { font-size: clamp(24px, 4.5vw, 36px); }

/* ---- PDP: primary + sale badges side by side ---- */
.product-gallery__badge { display: flex; gap: 6px; align-items: center; }

/* ---- sets/lookbook as a horizontal carousel (layout=carousel) ---- */
.hkph-carousel .hkph-sets-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.hkph-carousel .hkph-sets-track::-webkit-scrollbar { display: none; }
.hkph-carousel .hkph-sets-track > * { scroll-snap-align: start; min-width: 0; }
@media (min-width: 768px)  { .hkph-carousel .hkph-sets-track { grid-auto-columns: 44%; gap: 16px; } }
@media (min-width: 1024px) { .hkph-carousel .hkph-sets-track { grid-auto-columns: 31%; } }

/* marquee mode for the generic track (same engine + same fixes as ul.products:
   بُرش با قاب، بدون hover-pause، و همان وزن بالاتر برای غلبه بر کپیِ اینلاین
   motion-critical.css که بعد از این فایل چاپ می‌شود) */
.hkph-carousel[data-motion="marquee"].hkph-carousel--marquee .hkph-sets-track.is-marquee {
  overflow: visible; scroll-snap-type: none; will-change: transform;
  animation: hkphMarquee var(--mq-dur, 30s) linear infinite;
  animation-play-state: running;
}
.hkph-carousel[data-motion="marquee"].hkph-carousel--marquee.is-paused .hkph-sets-track.is-marquee,
.hkph-carousel[data-motion="marquee"].hkph-carousel--marquee.is-offscreen .hkph-sets-track.is-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hkph-carousel[data-motion="marquee"].hkph-carousel--marquee .hkph-sets-track.is-marquee { animation: none; transform: none; }
}