/* Palette taken from Pali's dye vats: indigo ink, turmeric tags, madder for "sold". */
:root {
  --paper: #F3F5F9;
  --card: #FFFFFF;
  --ink: #172340;
  --ink-soft: #4A5672;
  --indigo: #2A3F94;
  --indigo-deep: #1E2E70;
  --turmeric: #F4B728;
  --madder: #B03A2E;
  --wa: #157F45;
  --wa-deep: #0F6636;
  --line: #DCE1EA;
  --photo-bg: #E4E8EF;

  --font: "Mukta", system-ui, sans-serif;
  --hand: "Kalam", "Mukta", cursive;

  /* 1.25 scale on a 17px base */
  --s-1: 0.82rem;
  --s0: 1rem;
  --s1: 1.25rem;
  --s2: 1.56rem;
  --s3: 1.95rem;
  --s4: 2.44rem;

  --radius: 12px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--s0);
  line-height: 1.55;
}

html[data-lang="hi"] body { line-height: 1.7; }

/* Language switch: both versions are in the HTML, only one is shown. */
html[data-lang="en"] .hi,
html[data-lang="hi"] .en { display: none; }

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }

/* Top bar */
.top { padding-block: 12px; }
.top__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.top__place { color: var(--ink-soft); font-weight: 600; }
.top__back { font-weight: 600; text-decoration: none; padding: 8px 4px; }
.top__back:hover { color: var(--indigo); }

.lang { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang button {
  font: inherit; font-weight: 600; font-size: var(--s-1);
  border: 0; background: none; color: var(--ink-soft);
  padding: 6px 14px; border-radius: 999px; cursor: pointer; min-height: 36px;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Intro */
.intro { padding-block: 20px 36px; max-width: 46rem; }
.intro h1 {
  font-size: var(--s3);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
html[data-lang="hi"] .intro h1 { line-height: 1.3; letter-spacing: 0; }
.intro p { margin-top: 14px; color: var(--ink-soft); font-size: var(--s1); max-width: 38rem; line-height: 1.5; }
.contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600; font-size: var(--s0); line-height: 1.2;
  text-decoration: none; color: #fff;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn--call { background: var(--indigo); }
.btn--call:hover { background: var(--indigo-deep); }
.btn--wa { background: var(--wa); }
.btn--wa:hover { background: var(--wa-deep); }

/* The price tag: a punched shop tag on a string. The one loud thing on the page. */
.tag {
  position: absolute;
  top: 14px;
  left: 18px;
  transform: rotate(-5deg);
  transform-origin: 0 50%;
  filter: drop-shadow(0 2px 2px rgb(23 35 64 / 0.25));
  animation: swing 0.9s cubic-bezier(.3, 1.6, .5, 1) both;
}
.tag::before {
  /* the string, running off the top-left corner */
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 30px; height: 2px;
  background: rgb(255 255 255 / 0.85);
  transform: rotate(-35deg);
  transform-origin: 100% 50%;
  translate: 2px -1px;
  border-radius: 2px;
}
.tag__body {
  display: block;
  background: var(--turmeric);
  color: var(--ink);
  font-family: var(--hand);
  font-weight: 700;
  font-size: var(--s1);
  line-height: 1;
  padding: 0.5em 0.85em 0.38em 1.55em;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 13px 100%, 0 50%);
  -webkit-mask: radial-gradient(circle at 15px 50%, transparent 4px, #000 4.6px);
  mask: radial-gradient(circle at 15px 50%, transparent 4px, #000 4.6px);
  white-space: nowrap;
  /* Kalam swaps in Devanagari digits for lang="hi"; keep prices as 0-9 like the rest of the page */
  font-feature-settings: "locl" 0;
}
.tag__body small { display: block; font-size: 0.62em; margin-top: 2px; opacity: 0.85; }

@keyframes swing {
  from { transform: rotate(-16deg); }
  to { transform: rotate(-5deg); }
}

.tag--big { position: relative; top: auto; left: auto; display: inline-block; margin-left: 10px; }
.tag--big::before { background: var(--ink-soft); }
.tag--big .tag__body { font-size: var(--s3); padding-left: 1.2em; clip-path: polygon(18px 0, 100% 0, 100% 100%, 18px 100%, 0 50%); -webkit-mask: radial-gradient(circle at 20px 50%, transparent 5px, #000 5.6px); mask: radial-gradient(circle at 20px 50%, transparent 5px, #000 5.6px); }
.tag--big .tag__body small { font-size: 0.5em; }

.stamp {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  rotate: -12deg;
  padding: 6px 18px;
  border: 3px solid var(--madder);
  border-radius: 8px;
  color: var(--madder);
  background: rgb(255 255 255 / 0.88);
  font-weight: 800;
  font-size: var(--s3);
  line-height: 1.1;
}

/* Grid of items */
.grid { display: grid; grid-template-columns: 1fr; gap: 32px 20px; padding-bottom: 56px; }

.card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--photo-bg);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.4s ease; }
.card a:hover .card__media img { scale: 1.03; }
.card__title { margin-top: 12px; font-size: var(--s1); font-weight: 800; line-height: 1.25; }
.card a:hover .card__title { color: var(--indigo); }
.card__sub { color: var(--ink); }
.card__meta { color: var(--ink-soft); font-size: var(--s-1); margin-top: 2px; }
.card.is-sold .card__media img { filter: grayscale(1) opacity(0.7); }
.card.is-sold .tag { display: none; }

.card--featured .card__title { font-size: var(--s2); }
.card--featured .tag__body { font-size: var(--s2); }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card--featured { grid-column: 1 / -1; }
  .card--featured .card__media { aspect-ratio: 16 / 9; }
  .intro h1 { font-size: var(--s4); }
}

@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .card--featured { grid-column: span 2; grid-row: span 2; }
  .card--featured .card__media { aspect-ratio: auto; flex: 1; min-height: 320px; }
  .intro { padding-block: 28px 48px; }
}

/* Item page */
.item { display: grid; gap: 24px; padding-bottom: 40px; }

.gallery { position: relative; min-width: 0; }
.gallery__track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius);
  background: var(--photo-bg);
  aspect-ratio: 1 / 1;
  max-height: 78vh;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
/* absolute so tall photos fit inside the frame instead of stretching it */
.gallery__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.gallery__nav {
  position: absolute; top: calc(50% - 56px);
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgb(255 255 255 / 0.92); color: var(--ink);
  font-size: 28px; line-height: 1; cursor: pointer;
  display: none; place-items: center; padding-bottom: 4px;
  box-shadow: 0 1px 4px rgb(23 35 64 / 0.2);
}
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) { .gallery__nav { display: grid; } }

.gallery__count {
  position: absolute; top: 12px; right: 12px;
  background: rgb(23 35 64 / 0.75); color: #fff;
  font-size: var(--s-1); font-weight: 600;
  padding: 2px 10px; border-radius: 999px;
}

.gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 4px; scrollbar-width: thin; }
.gallery__thumbs button {
  flex: none; width: 64px; height: 64px; padding: 0;
  border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  background: var(--photo-bg); cursor: pointer; opacity: 0.7;
}
.gallery__thumbs button[aria-current="true"] { border-color: var(--indigo); opacity: 1; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.item__info h1 { font-size: var(--s3); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
html[data-lang="hi"] .item__info h1 { line-height: 1.3; letter-spacing: 0; }
.item__sub { color: var(--ink-soft); font-size: var(--s1); margin-top: 4px; }
.item__price { position: relative; margin: 22px 0 6px; min-height: 64px; }
.item__price .stamp { position: static; translate: none; display: inline-block; }
.item__desc { margin-top: 18px; font-size: var(--s1); line-height: 1.55; max-width: 36rem; }

.specs { margin-top: 24px; border-top: 1px solid var(--line); }
.specs div { display: grid; grid-template-columns: minmax(7.5rem, 38%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--ink-soft); }
.specs dd { font-weight: 600; }

.item__where { margin-top: 20px; color: var(--ink-soft); }

.actions { display: flex; gap: 10px; margin-top: 24px; }
.actions .btn { flex: 1; padding-inline: 10px; white-space: nowrap; font-size: clamp(0.85rem, 3.9vw, 1rem); }
.actions .btn--call { flex: 1.3; }

/* On phones the call/WhatsApp buttons stay on screen. */
@media (max-width: 899px) {
  .page-item .actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    margin: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgb(243 245 249 / 0.96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(6px);
  }
  .page-item { padding-bottom: 76px; }
}

@media (min-width: 900px) {
  .item { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
  .item__info { position: sticky; top: 16px; }
  .gallery__track { aspect-ratio: 4 / 3.4; }
}

/* More items */
.more { padding-block: 8px 48px; }
.more h2 { font-size: var(--s2); font-weight: 800; margin-bottom: 14px; }
.more ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.more a { display: block; text-decoration: none; }
.more img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--photo-bg); }
.more__name { display: block; margin-top: 6px; font-weight: 600; line-height: 1.3; }
.more__price { display: block; color: var(--ink-soft); font-size: var(--s-1); }
.more a:hover .more__name { color: var(--indigo); }
.more .is-sold img { filter: grayscale(1) opacity(0.7); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 24px 32px; color: var(--ink-soft); font-size: var(--s-1); }

@media (prefers-reduced-motion: reduce) {
  .tag { animation: none; }
  .gallery__track { scroll-behavior: auto; }
  .card__media img { transition: none; }
}