/*
 * Category cards, after the 1.7 shop: a white panel on the right, the image, a big vertical
 * English word on its left, and the Persian title with an arrow.
 * Hover: the panel shrinks to sit behind the title; the word and the arrow become fully visible.
 * Grid and spacing come from the theme (.k2-catcards).
 * @author mahdi kazemzadeh
 */
.k2-catcards .mkcc {
  --mkcc-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative; display: block; box-sizing: border-box; padding: 15px 10px 0 0; color: #1f1f1f; text-decoration: none;
}
.mkcc__panel {
  position: absolute; right: 0; bottom: 20px; width: 100px; height: 300px; max-height: calc(100% - 20px);
  border-radius: 10px; background: #fff; transition: height .45s var(--mkcc-ease), max-height .45s var(--mkcc-ease);
}
.mkcc__media { position: relative; z-index: 1; display: block; width: calc(100% - 74px); max-width: 201px; }
.mkcc__img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
/* Vertical word left of the image, reading bottom to top; a long title wraps into a second line beside it */
.mkcc__en {
  position: absolute; z-index: 0; top: 0; bottom: 0; right: 100%; width: max-content;
  writing-mode: vertical-rl; transform: rotate(180deg); direction: ltr;
  font-size: 34px; font-weight: 700; line-height: 36px; color: #000; opacity: .1; transition: opacity .35s ease;
}
.mkcc__fa { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 110px; padding-block: 10px; box-sizing: border-box; font-size: 25px; font-weight: 700; line-height: 1.5; color: #1f1f1f; transition: color .25s ease; }
.mkcc__fa-text { min-width: 0; }
/* The arrow follows the last word, also when the title wraps */
.mkcc__fa-text .mkcc__arrow { display: inline-block; vertical-align: middle; margin-right: 8px; }
.mkcc__arrow { flex: 0 0 auto; width: 30px; height: 30px; opacity: .1; transition: opacity .35s ease; }

.mkcc:hover .mkcc__panel, .mkcc:focus-visible .mkcc__panel { height: 75px; max-height: 75px; }
.mkcc:hover .mkcc__en, .mkcc:focus-visible .mkcc__en,
.mkcc:hover .mkcc__arrow, .mkcc:focus-visible .mkcc__arrow { opacity: 1; }
.mkcc:hover .mkcc__fa, .mkcc:focus-visible .mkcc__fa { color: #000; }

@media (max-width: 1199.98px) {
  .mkcc__fa { font-size: 20px; min-height: 90px; }
  .mkcc__en { font-size: 28px; line-height: 30px; }
}

/* Mobile and tablet (like the 1.7 shop): no panel and no English word; title in a white box */
@media (max-width: 991.98px) {
  .k2-catcards .mkcc { padding: 0; }
  .mkcc__panel, .mkcc__en { display: none; }
  .mkcc__media { width: 100%; max-width: none; }
  .mkcc__fa { justify-content: center; min-height: 48px; margin: 10px 0 15px; padding: 6px 10px 6px 6px; border-radius: 8px; background: #fff; font-size: 12px; text-align: center; }
  .mkcc__arrow { width: 18px; height: 18px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mkcc__panel, .mkcc__en, .mkcc__arrow, .mkcc__fa { transition: none; }
}