/* ===========================================================================
   لورین — Homepage (LUSION-style clone), Persian RTL
   Minimal, monochrome, editorial. Custom layer on top of Tailwind (Play CDN).
   =========================================================================== */

/* --- Self-hosted fonts -----------------------------------------------------
   Vazirmatn and Playfair Display are self-hosted (variable-weight woff2,
   Arabic + Latin subsets only) so the site never depends on Google Fonts.
   Google Fonts CDN can be slow or blocked from inside Iran, which silently
   swaps the whole page to the Tahoma system fallback — this removes that
   failure mode entirely.

   Kalameh is a COMMERCIAL font (fontiran.com) with no free web CDN. The stack
   below uses a locally-installed Kalameh if the viewer has it (common in
   Iran), otherwise falls back to the self-hosted Vazirmatn. To ship real
   Kalameh, buy a license, drop the woff2 files into assets/fonts/, and
   uncomment the block below.

@font-face {
  font-family: "Kalameh";
  src: url("assets/fonts/KalamehWeb-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Kalameh";
  src: url("assets/fonts/KalamehWeb-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
--------------------------------------------------------------------------- */

/* Peyda — primary Persian typeface (self-hosted, licensed by the owner). */
@font-face {
  font-family: "Peyda";
  src: url("assets/fonts/peyda-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("assets/fonts/peyda-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("assets/fonts/peyda-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("assets/fonts/peyda-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Peyda";
  src: url("assets/fonts/peyda-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn-arabic.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("assets/fonts/vazirmatn-latin.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-latin.woff2") format("woff2-variations");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

:root {
  --ink: #111111;
  --sub: #6b6b6b;
  --line: #e7e6e3;
  --hero: #efeeec;   /* hero light grey */
  --tile: #f4f3f1;   /* product image background */
  --radius: 2px;     /* near-sharp, editorial */
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  line-height: 1.7;
}

.brand { font-family: "Playfair Display", Georgia, serif; }
.tnum  { font-feature-settings: "tnum"; }

a, button { cursor: pointer; }

/* --- Header nav links ---------------------------------------------------- */
.nav-link { position: relative; transition: color .2s ease; }
.nav-link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -6px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

.icon-btn { transition: opacity .2s ease; }
.icon-btn:hover { opacity: .55; }

/* --- Buttons ------------------------------------------------------------- */
.btn-outline {
  border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  transition: background .25s ease, color .25s ease;
}
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-solid {
  background: var(--ink); color: #fff;
  transition: opacity .2s ease;
}
.btn-solid:hover { opacity: .85; }

/* --- Hero ---------------------------------------------------------------- */
.hero { background: var(--hero); }
.hero-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #c9c7c3; transition: all .25s ease;
}
.hero-dot.is-active { background: var(--ink); width: 22px; }

/* --- Category tiles ------------------------------------------------------ */
.tile { position: relative; overflow: hidden; background: var(--tile); }
.tile img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.tile:hover img { transform: scale(1.04); }
.tile-frame { position: absolute; inset: 16px; border: 1px solid rgba(255,255,255,.7); pointer-events: none; }
.tile-label {
  position: absolute; bottom: 22px; inset-inline-start: 22px;
  background: #fff; color: var(--ink);
  padding: 10px 22px; border-radius: var(--radius); /* sharp rectangle, like LUSION */
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: gap .2s ease;
}
.tile:hover .tile-label { gap: 14px; }
/* centered variant — the small collection tiles in the reference */
.tile-label--center { inset-inline: 0; margin-inline: auto; width: max-content; }

/* --- Product cards ------------------------------------------------------- */
.pcard-media { position: relative; overflow: hidden; background: var(--tile); }
.pcard-media img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pcard-media img { transform: scale(1.05); }

.pcard-actions {
  position: absolute; inset-inline: 0; bottom: 12px;
  padding-inline: 12px;
  display: flex; justify-content: flex-start; gap: 6px; /* start-aligned strip, like LUSION */
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}
.pcard:hover .pcard-actions { opacity: 1; transform: translateY(0); }
.pcard-actions button {
  width: 40px; height: 40px; border-radius: var(--radius); /* square, like LUSION */
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: background .2s ease, color .2s ease;
}
.pcard-actions button:hover { background: var(--ink); color: #fff; }
.pcard-actions button.is-active { background: var(--ink); color: #fff; }

/* --- Discount badge on product cards --------------------------------------- */
.off-badge {
  position: absolute; top: 10px; inset-inline-start: 10px;
  background: #fff; color: var(--ink);
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

/* --- Subcategory filter chips --------------------------------------------- */
.chip {
  border: 1px solid var(--line);
  background: #fff; color: var(--sub);
  padding: 8px 20px; border-radius: 999px;
  font-size: 13px;
  flex-shrink: 0; white-space: nowrap;   /* stay on one line inside the scroll strip */
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* --- Pagination ------------------------------------------------------------ */
.page-btn {
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 999px; font-size: 14px;
  display: inline-grid; place-items: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.page-btn:hover:not(:disabled) { border-color: var(--ink); }
.page-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* --- Touch devices (phones/tablets) ---------------------------------------
   Hover never fires on touch screens, so card actions must be always visible,
   and tap targets must meet the 44px minimum. */
@media (pointer: coarse) {
  /* :not(.hidden) is essential — this rule is more specific than the .hidden
     utility, so without it the mobile-hidden header icons reappear on touch
     devices, widening the header and pushing the whole page sideways. */
  header .icon-btn:not(.hidden), footer .icon-btn:not(.hidden) {
    min-width: 44px; min-height: 44px;
    display: inline-grid; place-items: center;
  }
  .chip { min-height: 44px; padding-block: 10px; }

  .pcard-actions { opacity: 1; transform: none; }
  /* keep only bag + wishlist on touch — compare/quick-view are hover niceties */
  .pcard-actions button:nth-child(n + 3) { display: none; }
  .pcard-actions button { width: 44px; height: 44px; }
}

/* Anchored sections shouldn't hide behind the sticky header */
#shopSection { scroll-margin-top: 96px; }

/* --- Utilities ----------------------------------------------------------- */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}