/* ================================================================
   Shared page furniture: used by ordinary pages, search results and 404,
   which do not load the shop stylesheets.
   ================================================================ */

.page { padding-block: 12px 64px; }

/* ---------- Category head ---------- */
.cat-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-block: 8px 20px; }
.cat-head h1 { font-size: 30px; font-weight: 800; line-height: 1.45; }

/* ---------- Product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; list-style: none; margin: 0; padding: 0; }

.pc { position: relative; display: flex; flex-direction: column; }
.pc:has(.pc__title a:focus-visible) { outline: 3px solid var(--primary); outline-offset: 6px; border-radius: 16px; }

.pc__media {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--muted-2); border-radius: 14px;
}
.pc__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s var(--ease); }
.pc.is-out .pc__media img { filter: grayscale(1); opacity: .5; }
/* Hover: the photo zooms a little, the name turns brand blue */
@media (hover: hover) {
  .pc:hover .pc__media img { transform: scale(1.05); }
  .pc:hover .pc__title { color: var(--primary); }
}

.pc__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 4px 0; }
.pc__title { font-size: 15px; font-weight: 500; line-height: 1.8; transition: color .15s; }
.pc__title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1.8em * 2);
}
.pc__title a:focus-visible { outline: none; }
/* the whole card opens the product */
.pc__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.pc__foot { padding: 8px 4px 0; }
.price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.price__now { display: flex; align-items: center; gap: 4px; }
.price__now strong { font-size: 19px; font-weight: 800; letter-spacing: -.2px; }
.price__now .cur { font-size: 13px; color: var(--fg-muted); }
.pct {
  display: inline-flex; align-items: center; height: 20px; padding-inline: 6px;
  border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--danger);
}
.price__old { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg-subtle); }
.price__old del { text-decoration-thickness: 1px; }
.price__na { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 15px; font-weight: 700; color: var(--fg-subtle); }
.price__na .i { width: 18px; height: 18px; }

/* Empty state */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 48px 20px; border: 1px dashed var(--line-strong); border-radius: 16px; background: var(--muted-2);
}
.empty__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: var(--bg); color: var(--fg-subtle); }
.empty h3 { font-size: 18px; font-weight: 700; }
.empty p { max-width: 44ch; font-size: 15px; line-height: 1.9; color: var(--fg-muted); }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }

/* ---------- Pagination ---------- */
.pager { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pager__info { font-size: 14px; color: var(--fg-subtle); }
.pager__list { display: flex; align-items: center; gap: 6px; }
.pager__num, .pager__edge, .pager__gap {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding-inline: 8px; border-radius: 10px;
  font-size: 15px; font-weight: 500;
}
.pager__num { border: 1px solid var(--border); background: var(--bg); color: var(--fg); transition: border-color .12s, background-color .12s; }
.pager__num:hover { border-color: var(--primary); color: var(--primary); }
.pager__num[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.pager__edge { padding-inline: 14px; border: 1px solid var(--border); background: var(--bg); }
a.pager__edge:hover { border-color: var(--primary); color: var(--primary); }
.pager__edge[aria-disabled="true"] { color: #A3AEBD; background: var(--muted-2); }
.pager__gap { min-width: 24px; padding: 0; color: var(--fg-subtle); }

/* ---------- Long-form text ---------- */
}
.tax a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.prose p { font-size: 16px; line-height: 2.1; color: #334155; }
.prose p + p { margin-top: 10px; }
.prose strong { font-weight: 700; color: var(--fg); }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 20px; }
.shots figcaption { grid-column: 1 / -1; font-size: 14px; color: var(--fg-subtle); }
.shots img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 14px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
.two h3 { font-size: 18px; font-weight: 700; line-height: 1.7; margin-bottom: 10px; }
.box-list { display: grid; gap: 8px; }
.box-list li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-inline: 14px; border-radius: 12px; background: var(--muted-2); border: 1px solid var(--border); font-size: 15px; }
.box-list .i { color: var(--success); stroke-width: 2.2; }
.steps { counter-reset: s; display: grid; gap: 8px; }
.steps li { counter-increment: s; position: relative; padding: 12px 56px 12px 16px; background: var(--muted-2); border: 1px solid var(--border); border-radius: 12px; font-size: 15px; line-height: 1.9; }
.steps li::before {
  content: counter(s, persian); position: absolute; inset-inline-start: 14px; top: 12px;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 800; font-size: 15px; color: var(--warm-ink); background: var(--warm);
}

.prose h2 { margin: 24px 0 10px; font-size: 20px; font-weight: 700; line-height: 1.6; }
.prose h3 { margin: 20px 0 8px; font-size: 17px; font-weight: 700; line-height: 1.7; }
.prose ul, .prose ol { margin: 10px 0; padding-inline-start: 22px; list-style: revert; }
.prose li { font-size: 16px; line-height: 2.1; color: #334155; }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.prose img { max-width: 100%; height: auto; border-radius: 14px; }
.prose table { width: 100%; border-collapse: collapse; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--border); text-align: start; }