/* ============================================================
   TIFLISI — Shop  |  Storefront layer
   The catalog language shared by the homepage, section pages and
   the MLO listing: page shell, section heads, product cards,
   filter bar and the detail modal. Depends on theme.css.
   ============================================================ */

:root {
  --hgline: var(--hair);
  --hgline-2: var(--hair-2);
}

body { overflow-x: hidden; background: #0a0908; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* film grain overlay — a whisper of texture so flat dark panels don't read as plastic */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }

/* ============================================================
   PAGE HEAD (section + houses pages)
   ============================================================ */
.pagehead { padding: clamp(24px, 3.4vw, 46px) 0 clamp(18px, 2vw, 28px); }
.pagehead .back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--txt-3);
  font-family: var(--serif); font-size: 14px; margin-bottom: 16px; transition: var(--t);
}
.pagehead .back:hover { color: var(--gold); }
.pagehead .back .ic { transition: transform var(--t); }
.pagehead .back:hover .ic { transform: translateX(-3px); }

.ph-row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px, 3vw, 40px); flex-wrap: wrap; }
.ph-title { display: flex; align-items: center; gap: 16px; }
.ph-icon {
  width: clamp(48px, 4vw, 60px); height: clamp(48px, 4vw, 60px); flex: none;
  display: grid; place-items: center; font-size: clamp(26px, 2.2vw, 32px); color: var(--gold);
  border: 1px solid var(--hair-2); border-radius: 14px; background: rgba(244, 208, 137, .06);
}
.pagehead h1 { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1; letter-spacing: -.01em; }
.pagehead .sub { font-family: var(--serif); font-size: 14px; color: var(--txt-3); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }

.ph-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-stat {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 15px;
  border: 1px solid var(--hair-2); border-radius: var(--r-chip); background: rgba(255, 255, 255, .03);
}
.ph-stat b { font-family: var(--display); font-size: 18px; color: var(--gold); }
.ph-stat span { font-family: var(--serif); font-size: 13.5px; color: var(--txt-2); }
.ph-stat .dot { align-self: center; }
.ph-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filterbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--hair);
}
.filterbar .search-field { flex: 1; min-width: 220px; }
.filterbar select { width: auto; min-width: 160px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: clamp(20px, 2.4vw, 30px); }

/* result count line above the grid */
.resultline {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: var(--serif); font-size: 14px; color: var(--txt-3);
}
.resultline .sec-rule { flex: 1; }

/* ============================================================
   SECTION HEADS (homepage)
   ============================================================ */
section.cat { padding: clamp(46px, 7vw, 86px) 0 0; }
#sections > section.cat:first-child { padding-top: clamp(28px, 3.4vw, 44px); }
.sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.sec-icon {
  font-size: 26px; color: var(--gold); display: grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--hair-2); border-radius: 12px; background: rgba(244, 208, 137, .06);
}
.sec-head h2 { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: -.01em; line-height: 1; }
.sec-count {
  font-family: var(--serif); font-size: 14px; color: var(--gold);
  border: 1px solid var(--hair-2); border-radius: var(--r-tag); padding: 5px 13px; white-space: nowrap;
}
.sec-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--hair-2), transparent); }

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: clamp(16px, 2vw, 24px); }

a.card, .card.tile {
  position: relative; border-radius: 13px; overflow: hidden; background: #14100e;
  border: 1px solid var(--hair); cursor: pointer; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
a.card:hover, .card.tile:hover { transform: translateY(-5px); border-color: var(--hair-2); box-shadow: 0 22px 44px rgba(0, 0, 0, .5); }

/* a thin gold edge lights along the top on hover — one restrained affordance
   instead of a glow on every surface */
a.card::before, .card.tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity .3s;
}
a.card:hover::before, .card.tile:hover::before { opacity: 1; }

/* 3:2 matches the item artwork exactly (1536x1024), so those pictures are shown
   uncropped and their burnt-in titles stay whole. House photos are 16:9 and lose
   a little at the sides — harmless on landscape scenery. */
.card-img { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #0d0b0a; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease), filter .3s; }
a.card:hover .card-img img, .card.tile:hover .card-img img { transform: scale(1.06); }
.card-img.noimg { background: #0d0b0a; display: grid; place-items: center; }
.noimg-ic { color: rgba(244, 208, 137, .22); display: grid; }
.card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 9, 8, .92) 4%, rgba(12, 9, 8, .45) 30%, transparent 55%); }

/* Overlay strip along the bottom of the image. Item artwork carries its title
   burned into the top-left of the picture, so nothing may sit up there. */
.card-ovl {
  position: absolute; left: 11px; right: 11px; bottom: 11px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.c-tag {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  font-family: var(--serif); font-size: 12.5px; letter-spacing: .04em; color: var(--txt);
  background: rgba(10, 9, 8, .66); border: 1px solid var(--hair); border-radius: var(--r-tag);
  padding: 4px 11px; backdrop-filter: blur(4px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-status { flex: none; font-size: 11.5px; padding: 4px 9px; backdrop-filter: blur(4px); }
.c-status.avail { background: rgba(12, 30, 18, .78); }
.c-status.sold { background: rgba(40, 14, 14, .8); }
/* photo count — top-right, clear of the artwork titles; only shows for
   multi-photo listings, which in practice are the house galleries */
.c-shots {
  position: absolute; top: 11px; right: 11px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--serif); font-size: 12px; color: var(--txt-2);
  background: rgba(10, 9, 8, .6); border: 1px solid var(--hair);
  border-radius: var(--r-tag); padding: 3px 9px; backdrop-filter: blur(4px);
}

/* ---- the singled-out listing ----
   One card in the whole catalog wears this: a gold edge, the top hairline lit
   permanently instead of only on hover, and a tag. It sits in its normal place
   in its normal section — the emphasis is the card itself, not a separate row
   above the shop. Driven by the `featured` tick in the admin. */
.card.is-pick {
  border-color: var(--gold-d);
  box-shadow: 0 0 0 1px rgba(244, 208, 137, .2), 0 18px 40px rgba(0, 0, 0, .45);
}
.card.is-pick:hover {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(244, 208, 137, .38), 0 24px 50px rgba(0, 0, 0, .55);
}
a.card.is-pick::before { opacity: 1; }
/* the tag owns the top-right corner, so the photo count stands down */
.card.is-pick .c-shots { display: none; }
.pick-tag {
  position: absolute; top: 11px; right: 11px; z-index: 3;
  font-family: var(--serif); font-weight: 600; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: #1a1206; background: var(--gold);
  border-radius: var(--r-tag); padding: 4px 11px;
}

.card-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.card-body h4 { font-family: var(--display); font-size: 17px; letter-spacing: -.005em; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub { display: inline-flex; align-items: center; gap: 5px; font-family: var(--serif); font-size: 13.5px; color: var(--txt-3); }
.card-sub .ic { font-size: 13px; color: var(--gold-d); }
.card-foot {
  margin-top: auto; padding-top: 13px; border-top: 1px solid var(--hair);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.card-foot .card-go { padding-top: 4px; }
/* Price block: the figure large, and the recurring fee on its own line under it.
   Both used to sit inline with the monthly part at 12px in --txt-3, which on the
   houses rendered as "125 ₾ 75" — a number with no unit and no visible meaning. */
.card-money { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-price { font-family: var(--display); font-size: 22px; color: var(--green); line-height: 1.1; }
.card-price.as-label { color: var(--gold); font-size: 18px; }
.card-price-sub {
  font-family: var(--serif); font-size: 13px; line-height: 1.15; color: var(--gold-d);
  white-space: nowrap;
}
.card-go { font-family: var(--serif); font-size: 14px; color: var(--gold); display: inline-flex; align-items: center; gap: 5px; opacity: .72; transition: opacity .25s, gap .25s var(--ease); white-space: nowrap; }
a.card:hover .card-go, .card.tile:hover .card-go { opacity: 1; gap: 9px; }

/* sold listings stay visible but visibly spent */
a.card.is-sold .card-img img, .card.tile.is-sold .card-img img { filter: grayscale(.72) brightness(.72); }
a.card.is-sold .card-price, .card.tile.is-sold .card-price { color: var(--txt-3); }
a.card.is-sold:hover .card-img img, .card.tile.is-sold:hover .card-img img { filter: grayscale(.4) brightness(.85); }

/* ============================================================
   EMPTY + SKELETON STATES
   ============================================================ */
.empty {
  grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: var(--txt-3); font-size: 16px; padding: 60px 20px; font-family: var(--serif); text-align: center;
}
.empty .ic { color: rgba(244, 208, 137, .35); }
.empty .btn { margin-top: 6px; }

@keyframes shimmer { to { background-position: -200% 0; } }
.sk {
  background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .08) 37%, rgba(255, 255, 255, .04) 63%);
  background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: 8px;
}
.sk-icon { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.sk-title { width: 190px; height: 26px; }
.sk-card { aspect-ratio: 1/1.05; border-radius: 13px; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* ============================================================
   DETAIL MODAL
   ============================================================ */
.overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .74); display: grid; place-items: center; padding: clamp(0px, 3vw, 40px); }
.modal {
  width: min(940px, 100%); max-height: 90vh; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--hair); border-radius: var(--r-lg);
  box-shadow: var(--shadow), 0 0 60px rgba(244, 208, 137, .08);
}
.gallery { position: relative; aspect-ratio: 16/9; background: #0d0908; overflow: hidden; }
/* the picture whole, never cropped — this artwork is lettered, and a crop cuts
   through the lettering. The blurred copy behind it fills the frame so showing
   the whole picture doesn't mean black bars down the sides. */
.gallery img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.gbg {
  position: absolute; inset: 0; z-index: 0; background: center/cover no-repeat;
  filter: blur(26px) brightness(.4) saturate(.85); transform: scale(1.18);
}
.gallery .noimg { width: 100%; height: 100%; display: grid; place-items: center; background: #0d0908; color: rgba(244, 208, 137, .2); }
/* z-index 2: the picture sits at 1 so it paints over the blurred backdrop, which
   would otherwise bury the arrows and the dots underneath it */
.gnav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px;
  display: grid; place-items: center; background: rgba(0, 0, 0, .6);
  border: 1px solid var(--hair-2); border-radius: 50%; color: #fff; transition: var(--t);
}
.gnav:hover { border-color: var(--gold); background: rgba(244, 208, 137, .16); }
.gnav.prev { left: 14px; } .gnav.next { right: 14px; }
.gdots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; }
.gdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: var(--t); }
.gdots i.on { background: var(--gold); width: 18px; border-radius: var(--r-pill); }
.mclose {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .6);
  border: 1px solid var(--hair-2); color: #fff; transition: var(--t);
}
.mclose:hover { border-color: var(--red); background: rgba(255, 53, 53, .18); }

.mbody { padding: clamp(20px, 2vw, 30px); }
.mbody .dcat { display: inline-flex; align-items: center; gap: 7px; color: var(--gold); font-family: var(--serif); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.mbody h2 { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 8px 0 10px; }
.dprice-wrap { display: flex; flex-direction: column; gap: 4px; }
.mbody .dprice { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; }
.mbody .dprice-sub { font-family: var(--serif); font-size: 15px; color: var(--gold-d); }
.mbody .dmeta { display: flex; gap: 9px; margin: 16px 0; flex-wrap: wrap; }
.mbody .ddesc { color: var(--txt-2); font-family: var(--serif); font-size: 15.5px; line-height: 1.8; margin: 18px 0; white-space: pre-wrap; }
.mbody .dactions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.mbody .dactions .btn { flex: 1; min-width: 160px; }
.mbody .dactions .btn.icon-only { flex: 0 0 auto; min-width: 0; width: 46px; padding: 11px; }

/* ---- desktop: the picture beside the details, not on top of them ----
   The modal was one column: a 16:9 picture, then everything that matters
   underneath. At 940px wide that picture is 528px tall, so on a laptop the
   price, the description and the booking button all began below the fold — you
   had to scroll inside a dialog to reach the thing it exists to offer. Side by
   side, all of it is on screen at once, and only the description scrolls. */
@media (min-width: 900px) {
  .modal {
    display: grid; grid-template-columns: 1.15fr 1fr;
    width: min(1120px, 100%); height: min(620px, 86vh); max-height: 86vh;
    overflow: hidden;
  }
  .gallery { aspect-ratio: auto; height: 100%; min-height: 0; }
  .mbody { display: flex; flex-direction: column; min-height: 0; padding: clamp(24px, 2.2vw, 34px); }
  .mbody .dmeta { margin: 14px 0 0; }
  /* the description is the only part that scrolls; price and CTA never move */
  .mbody .ddesc {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    margin: 16px 0 0; padding-right: 8px;
    scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent;
  }
  .mbody .ddesc::-webkit-scrollbar { width: 6px; }
  .mbody .ddesc::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 3px; }
  .mbody .dactions {
    flex: none; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair);
  }
}

/* copyable in-game coordinates */
.coord-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--txt-2);
  border-radius: var(--r-chip); padding: 7px 14px; font-size: 14px; font-family: var(--serif); transition: var(--t);
}
.coord-btn:hover { border-color: var(--gold); color: #fff; }
.coord-btn .ic { color: var(--gold); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.wrap {
  margin-top: clamp(56px, 8vw, 110px); border-top: 1px solid var(--hair);
  padding: 34px 0 44px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
footer .fbrand { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 16px; }
footer .fmeta { font-family: var(--serif); font-size: 13.5px; color: var(--txt-3); letter-spacing: .04em; }
footer .fgh {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 13.5px; letter-spacing: .04em;
  /* --txt-2, not --txt-3: measured 4.49:1 on the footer ground, which misses
     AA by a hair. It is also a link, so it should read brighter than the static
     copyright line beside it. */
  color: var(--txt-2); text-decoration: none;
  border: 1px solid var(--hair); border-radius: var(--r-chip); padding: 7px 13px;
  transition: color var(--t), border-color var(--t), background var(--t);
}
footer .fgh:hover, footer .fgh:focus-visible { color: var(--txt); border-color: var(--gold); background: rgba(244, 208, 137, .08); }
footer .fgh .ic { flex: none; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 760px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-body { padding: 12px 13px 14px; gap: 6px; }
  .card-body h4 { font-size: 15px; }
  .card-price { font-size: 18px; }
  .card-price.as-label { font-size: 15px; }
  .card-price-sub { font-size: 11.5px; white-space: normal; }
  .card-go { display: none; }
  .card-foot { padding-top: 10px; }
  .c-shots { display: none; }
  /* half-width card: the full phrase would run the width of the picture */
  .pick-tag { top: 8px; right: 8px; font-size: 9.5px; letter-spacing: .06em; padding: 3px 7px; }

  .ph-row { align-items: flex-start; }
  .ph-actions { width: 100%; }
  .ph-actions .btn { flex: 1; }
  /* search on its own row, then selects two-up — three squeezed onto one row
     truncates their labels to "ყველა რ…" */
  .filterbar { gap: 10px; }
  .filterbar .search-field { flex: 1 1 100%; min-width: 0; }
  .filterbar select { flex: 1 1 calc(50% - 5px); min-width: 0; }

  /* the status label doesn't fit on a half-width card — the icon carries it */
  .c-status { font-size: 0; gap: 0; padding: 5px 7px; }
  .c-status .ic { font-size: 13px; }
  .card-ovl { left: 8px; right: 8px; bottom: 8px; gap: 6px; }
  .c-tag { font-size: 11.5px; padding: 3px 9px; }

  .modal { width: 100%; max-width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
  .gallery { aspect-ratio: 16/10; }
  .mbody .dactions { flex-direction: column; }
  .mbody .dactions .btn { min-width: 0; }
  .mbody .dactions .btn.icon-only { width: 100%; }

  footer.wrap { flex-direction: column; gap: 10px; text-align: center; }
  /* a comfortable thumb target, not just a WCAG-minimum one */
  footer .fgh { padding: 14px 18px; }
}