/**
 * Farsisaz mobile-friendliness fixes (2026-08).
 * Loaded AFTER output.css. No Tailwind build exists, so every fix that needs
 * a class not present in the compiled CSS lives here as plain CSS, keyed off
 * small fs-* hook classes added in the templates.
 * Desktop (>=1024px) is intentionally left pixel-identical except where a fix
 * is explicitly cross-viewport (fonts, search input padding, notice bar clamp).
 */

/* ------------------------------------------------------------------ *
 * 1. Fonts: re-declare yekanbakh/croissant with font-display:swap so
 *    Persian text is never invisible while fonts download (FOIT fix),
 *    and give the body a real fallback stack.
 * ------------------------------------------------------------------ */
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 100; font-display: swap;
  src: url("../fonts/YekanBakhFaNum01Hairline.woff") format("woff"), url("../fonts/YekanBakhFaNum01Hairline.ttf") format("truetype"); }
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 200; font-display: swap;
  src: url("../fonts/YekanBakhFaNum02Thin.woff") format("woff"), url("../fonts/YekanBakhFaNum02Thin.ttf") format("truetype"); }
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/YekanBakhFaNum03Light.woff") format("woff"), url("../fonts/YekanBakhFaNum03Light.ttf") format("truetype"); }
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/YekanBakhFaNum04Regular.woff") format("woff"), url("../fonts/YekanBakhFaNum04Regular.ttf") format("truetype"); }
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/YekanBakhFaNum05Medium.woff") format("woff"), url("../fonts/YekanBakhFaNum05Medium.ttf") format("truetype"); }
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/YekanBakhFaNum06Bold.woff") format("woff"), url("../fonts/YekanBakhFaNum06Bold.ttf") format("truetype"); }
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/YekanBakhFaNum07Heavy.woff") format("woff"), url("../fonts/YekanBakhFaNum07Heavy.ttf") format("truetype"); }
@font-face { font-family: yekanbakh; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/YekanBakhFaNum08Fat.woff") format("woff"), url("../fonts/YekanBakhFaNum08Fat.ttf") format("truetype"); }
@font-face { font-family: croissant; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Croissant-Bold.woff") format("woff"); }
@font-face { font-family: croissant; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/Croissant-Black.woff") format("woff"); }

body { font-family: "yekanbakh", Tahoma, "Segoe UI", Arial, sans-serif !important; }

/* ------------------------------------------------------------------ *
 * 2. Mobile header: sticky, tiered sizing so it never overflows,
 *    cart badge.
 * ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .header-mobile {
    position: sticky;
    top: 0;
    z-index: 70;
    background: #ffffff;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  html.dark .header-mobile { background: #000000; }
  body.woocommerce-account .header-mobile { background: #f9f9f9; }
  html.dark body.woocommerce-account .header-mobile { background: #000000; }

  /* Logo SVGs have fixed width attributes; shrink them below lg */
  .header-mobile a[href] > div > svg[width="114"] { width: 96px; height: auto; }
  .header-mobile a[href] > div > svg[width="44"]  { width: 38px; height: auto; }
}
@media (max-width: 409.98px) {
  .header-mobile .fs-hbtn { padding: 0.65rem; }
  .header-mobile .mini-menu-popup-trigger { padding: 0.8rem; }
}
@media (max-width: 359.98px) {
  .header-mobile a[href] > div > svg[width="114"] { width: 82px; }
  .header-mobile a[href] > div > svg[width="44"]  { display: none; }
  .header-mobile .fs-hbtn { padding: 0.5rem; }
  .header-mobile .mini-menu-popup-trigger { padding: 0.65rem; }
}

/* Cart count badge (markup replaced by WC fragments — style the class only) */
.fs-cart-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #E1FF00;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fs-cart-badge.fs-cart-badge-empty { display: none; }

/* ------------------------------------------------------------------ *
 * 3. Mini-menu overlay: clamp to viewport, close button, theme row.
 * ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  #mini-menu-overlay { max-width: calc(100vw - 30px); }
}
.fs-menu-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
.fs-menu-close {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.06);
  color: #000;
  font-size: 15px;
  line-height: 1;
}
html.dark .fs-menu-close { background: rgba(255, 255, 255, 0.1); color: #fff; }
.fs-menu-theme {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
}
.fs-menu-theme button {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  color: #000;
  font-size: 12px;
  font-weight: 700;
}
html.dark .fs-menu-theme button { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ------------------------------------------------------------------ *
 * 4. Bottom notice bar: never wider than the screen + close button.
 * ------------------------------------------------------------------ */
.blobal-fix-notice { max-width: 100vw; }
#fs-notice-close {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  z-index: 5;
}
html.dark #fs-notice-close { background: rgba(0, 0, 0, 0.15); color: #000; }
/* On mobile product pages the sticky buy bar owns the bottom edge */
@media (max-width: 1023.98px) {
  body.single-product #fs-notice-bar { display: none; }
}

/* ------------------------------------------------------------------ *
 * 5. Product page: sticky bottom buy bar (below lg only).
 * ------------------------------------------------------------------ */
#fs-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #ececec;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.07);
}
html.dark #fs-buybar { background: #121212; border-top-color: #2a2a2a; }
#fs-buybar .fs-buybar-price { display: flex; align-items: baseline; gap: 5px; color: #000; }
html.dark #fs-buybar .fs-buybar-price { color: #fff; }
#fs-buybar .fs-buybar-price b { font-size: 22px; font-weight: 800; }
#fs-buybar .fs-buybar-price span { font-size: 12px; font-weight: 600; opacity: 0.75; }
#fs-buybar .fs-buybar-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
html.dark #fs-buybar .fs-buybar-btn { background: #E1FF00; color: #000; }
#fs-buybar .fs-buybar-btn.fs-presale { background: #37016E; color: #fff; }
html.dark #fs-buybar .fs-buybar-btn.fs-presale { background: #E1FF00; color: #37016E; }
@media (min-width: 1024px) {
  #fs-buybar { display: none; }
}
@media (max-width: 1023.98px) {
  body.single-product { padding-bottom: 78px; }
}

/* ------------------------------------------------------------------ *
 * 6. Product page: poster, icon rail, meta grid, prereq card,
 *    related header, gallery slides.
 * ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  /* Poster: fluid instead of fixed 320px (was clipped at <=400px) */
  .fs-poster { flex: 1 1 0%; min-width: 0; width: auto; }
  .fs-poster img.w-80 { width: 100%; }

  /* Icon rail: 21px icons get >=39px tap boxes */
  .fs-rail { width: auto; }
  .fs-rail button, .fs-rail a { padding: 9px; }
}
@media (max-width: 639.98px) {
  .fs-meta { gap: 1.25rem; }
  .fs-rel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 419.98px) {
  .fs-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  /* Prerequisites card: let the tab row and headings wrap, add start pad */
  #prerequisites .pr-8 { padding-left: 1.25rem; }
  #prerequisites .text-nowrap { white-space: normal; }
  #prerequisites .req-tab-btn { min-height: 40px; }

  /* Gallery slides never wider than the screen */
  .mySwiper2222 .swiper-slide img { max-width: 88vw; height: auto; }
}

/* ------------------------------------------------------------------ *
 * 7. Homepage hero: pagination dots, image on mobile, platform row.
 * ------------------------------------------------------------------ */
.fs-hero-dots { position: static; margin-top: 14px; text-align: center; }
.fs-hero-dots .swiper-pagination-bullet { background: #9ca3af; opacity: 0.55; }
.fs-hero-dots .swiper-pagination-bullet-active { background: #E1FF00; opacity: 1; }
html:not(.dark) .fs-hero-dots .swiper-pagination-bullet-active { background: #000; }
@media (max-width: 1023.98px) {
  .fs-hero-slide { flex-direction: column; align-items: stretch; }
  .fs-hero-img { display: block !important; order: 2; width: min(65%, 300px); margin: 0 auto 24px; border-radius: 24px; }
  .fs-hero-plat { flex-wrap: wrap; gap: 1rem; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ *
 * 8. Homepage sections: farsisaz panel header, category pills,
 *    updates changelog scrollbar, thumbs, edge-blur panels.
 * ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .fs-saz-row { flex-wrap: wrap; row-gap: 16px; margin-bottom: 32px; }
  .fs-saz-title { display: flex !important; }

  .tab-btn { padding-top: 0.6rem; padding-bottom: 0.6rem; }

  .fs-blur-edge { display: none; }

  .gallery-fullscreen-btn { padding: 0.55rem; }
}

/* Native (real) scrollbar for the updates changelog list */
[id^="scrollable-"] { scrollbar-width: thin; scrollbar-color: #E1FF00 rgba(255, 255, 255, 0.3); }
[id^="scrollable-"]::-webkit-scrollbar { width: 4px; }
[id^="scrollable-"]::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.3); border-radius: 8px; }
[id^="scrollable-"]::-webkit-scrollbar-thumb { background: #E1FF00; border-radius: 8px; }

/* Pre-init skeleton for the gallery filmstrip (was unstyled before JS ran) */
.endSlider:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 20px; overflow: hidden; }

/* ------------------------------------------------------------------ *
 * 9. Search popup: typed text must not run under the submit button.
 * ------------------------------------------------------------------ */
#search-popup-input { padding-left: 118px !important; }

/* ------------------------------------------------------------------ *
 * 10. Modals: block background scroll bleed on touch devices.
 * ------------------------------------------------------------------ */
#search-popup-modal, #search-popup-overlay, #product-gallery-lightbox { overscroll-behavior: contain; }

/* Card price row: step the 25px price down on small phones so the
 * price + two 50px action buttons fit inside a ~212px slide. */
@media (max-width: 374.98px) {
  .fs-card-price { font-size: 19px; }
}

/* ------------------------------------------------------------------ *
 * 11. Footer rows with fixed-width content: allow wrapping on phones.
 * ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .fs-wrap { flex-wrap: wrap; row-gap: 14px; }
}