body,
html {
  margin: 0;
  padding: 0;
  background-color: #f2ede1;
  color: #2b2620;
  font-family: "Times New Roman", Times, serif;
}

:root {
  /* Abstand zwischen den Karten - unten (< 900px) enger, oben (>= 900px)
     großzügiger, siehe Media Query weiter unten. */
  --watch-grid-gap: clamp(16px, 4vw, 32px);

  /* Feste Kartengröße (nicht elastisch) - dadurch bleibt die Spaltenzahl
     vorhersehbar UND unvollständige Zeilen (1-2 Karten) zentrieren sich
     automatisch über justify-content: center auf .watch-grid, statt sich
     wie bei CSS Grid links anzulegen. */
  --watch-card-size: clamp(130px, 42vw, 320px);
}

.gallery-wrapper {
  padding-top: clamp(140px, 15vw, 180px);
  padding-bottom: clamp(60px, 10vw, 100px);
  padding-left: clamp(16px, 5vw, 40px);
  padding-right: clamp(16px, 5vw, 40px);
  max-width: 1500px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  box-sizing: border-box;
}

.collectHeading {
  width: 100%;
  margin: 0 0 clamp(30px, 5vw, 50px) 0;
  text-align: center;
}

.collectHeading h2 {
  font-size: clamp(24px, 6vw, 40px);
  font-weight: 300;
  letter-spacing: clamp(1px, 0.5vw, 4px);
  text-transform: uppercase;
  color: #2b2620;
  margin: 0;
}

.watch-grid {
  /* Flexbox statt CSS Grid: feste Kartenbreite + justify-content: center
     sorgt dafür, dass jede Zeile - egal ob voll (3 Karten) oder
     unvollständig (1-2 Karten) - immer mittig steht statt linksbündig
     mit einer leeren Spalte am Ende. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--watch-grid-gap);
  width: 100%;
}

@media screen and (min-width: 900px) {
  :root {
    --watch-grid-gap: clamp(28px, 4vw, 80px);
    /* Ab 900px: größere, aber weiterhin feste Kartenbreite. Bei 900px
       passen so exakt 3 Karten nebeneinander, auf sehr breiten Screens
       wächst die Karte bis maximal 415px, ohne dass eine 4. Karte in
       die Zeile rutscht. */
    --watch-card-size: clamp(230px, 26vw, 415px);
  }
}

.watch-card {
  /* Feste, nicht wachsende/schrumpfende Breite (flex-grow: 0,
     flex-shrink: 0) - dadurch bestimmt einzig --watch-card-size die
     Kartengröße, und der Browser fügt nie mehr Karten in eine Zeile ein,
     nur weil noch Platz da wäre. */
  flex: 0 0 var(--watch-card-size);
  width: var(--watch-card-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.watch-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto 20px auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
}

.watch-card a {
  color: #6b6459;
  text-decoration: none;
  font-size: clamp(14px, 2.5vw, 18px);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s ease;
  text-align: center;
  display: block;
}

.watch-card:hover img {
  transform: scale(1.05);
}

.watch-card:hover a {
  color: #b8912e;
}

/* Kleiner, gedämpfter Hinweis unter nicht mehr verfügbaren Uhren -
   bewusst leiser als der Uhrenname (kein Uppercase/Letterspacing wie bei
   den Links, kursiv, gedecktes Warmgrau statt Schwarzbraun) */
.watch-unavailable {
  display: block;
  margin-top: 6px;
  font-size: clamp(11px, 1.8vw, 13px);
  font-style: italic;
  letter-spacing: 0.5px;
  color: #a89f90;
  text-align: center;
}

.collectSpan {
  display: block;
  width: 80%;
  height: 1px;
  background: #d8cfbc;
  margin: clamp(40px, 6vw, 80px) auto;
}

@media screen and (max-width: 400px) {
  /* Nur der Abstand wird auf ganz schmalen Screens noch etwas enger,
     die Kartengröße bleibt über den clamp() oben responsiv. */
  :root {
    --watch-grid-gap: 14px;
  }
}