<!doctype html>
<html lang="uk">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Каталог — Modna Я</title>

  <!-- Базові стилі сайту -->
  <link rel="stylesheet" href="styles.css" />

  <!-- Локальні (сторінкові) стилі та “страховка” від конфліктів -->
  <style>
    :root {
      --page-max: 1200px;
      --gap: 16px;
      --card-radius: 18px;
      --card-shadow: 0 6px 24px rgba(0,0,0,.08);
    }

    html, body { overflow-x: hidden; background: #fff; }

    .page-wrap {
      max-width: var(--page-max);
      margin: 0 auto;
      padding: 20px 14px 48px;
      background: linear-gradient(180deg,#ffeaf3 0%, #fff 380px);
    }

    header.site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 0 18px;
    }
    .brand {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      font-weight: 800;
      letter-spacing: .5px;
    }
    .brand__main { font-size: 22px; }
    .brand__sub { font-size: 22px; }

    .headline {
      text-align: center;
      font-size: clamp(26px, 4vw, 40px);
      font-weight: 800;
      letter-spacing: 2px;
      margin: 8px 0 18px;
    }

    /* СІТКА КАТАЛОГУ — адаптивна, без “жорстких” 2 колонок */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--gap);
      align-items: stretch;
    }

    /* КАРТКА ТОВАРУ */
    .product-card {
      display: flex;
      flex-direction: column;
      border-radius: var(--card-radius);
      background: #fff;
      box-shadow: var(--card-shadow);
      width: auto !important;
      min-width: 0 !important;
      overflow: hidden;
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .product-card:focus-within,
    .product-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0,0,0,.12);
    }

    /* Превʼю: стабільна вітрина 4:5, без “розтягів” */
    .product-card .thumb {
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      background: linear-gradient(180deg, #f6f7fb, #eef0f6);
    }
    .product-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .product-card img[loading="lazy"] { filter: saturate(.96); }

    .product-card .info {
      padding: 14px 16px 16px;
      display: grid;
      gap: 8px;
    }
    .product-title {
      font-size: 18px;
      line-height: 1.25;
      font-weight: 700;
    }
    .product-price {
      font-size: 20px;
      font-weight: 800;
    }

    /* На вузьких — одна колонка і центральне вирівнювання */
    @media (max-width: 600px) {
      .product-grid { grid-template-columns: 1fr !important; }
      .product-card { margin-inline: auto; }
      .page-wrap { padding-bottom: 64px; }
    }

    /* Посилання-картка (клік по всій плитці) */
    .card-link {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    /* Запасний плейсхолдер, якщо зображення не знайдено */
    .thumb[data-fallback]::after {
      content: attr(data-alt);
      position: absolute;
      inset: auto 10px 10px 10px;
      font-size: 14px;
      color: #666;
    }
  </style>

  <meta name="description" content="Новинки Modna Я: бомбери, брюки-кльош та інші моделі. Доставка по Україні." />
  <meta property="og:title" content="Каталог — Modna Я" />
  <meta property="og:description" content="NEW IN — актуальні моделі у наявності." />
  <meta property="og:type" content="website" />
</head>

<body>
  <div class="page-wrap">
    <header class="site-header" aria-label="Header">
      <a href="index.html" class="brand" aria-label="На головну">
        <span class="brand__main">MODNA</span>
        <span class="brand__sub">Я</span>
      </a>
      <!-- за потреби: <a href="https://maps.app.goo.gl/kgBRg1MgbRpT7jZ39" target="_blank" rel="noopener">Ми на мапі</a> -->
    </header>
h1 class="headline">NEW IN</h1>

    <section class="product-grid" aria-label="Каталог товарів">
      <!-- КАРТКА №1 -->
      <article class="product-card">
        <div class="thumb" data-alt="Бомбер Паж слонова кістка">
          <img
            src="images/products/bomber-pazh-ivory.jpg"
            alt="Бомбер Паж слонова кістка"
            loading="lazy"
            onerror="this.onerror=null; this.src='images/placeholder.webp'; this.closest('.thumb').setAttribute('data-fallback','');"
          />
          <a class="card-link" href="product-bomber-pazh-ivory.html" aria-label="Дивитися Бомбер Паж слонова кістка"></a>
        </div>
        <div class="info">
          <h3 class="product-title">Бомбер Паж слонова кістка</h3>
          <div class="product-price" data-price="2700">2700 ₴</div>
        </div>
      </article>

      <!-- КАРТКА №2 -->
      <article class="product-card">
        <div class="thumb" data-alt="Бомбер Паж шоколадний">
          <img
            src="images/products/bomber-pazh-choco.jpg"
            alt="Бомбер Паж шоколадний"
            loading="lazy"
            onerror="this.onerror=null; this.src='images/placeholder.webp'; this.closest('.thumb').setAttribute('data-fallback','');"
          />
          <a class="card-link" href="product-bomber-pazh-choco.html" aria-label="Дивитися Бомбер Паж шоколадний"></a>
        </div>
        <div class="info">
          <h3 class="product-title">Бомбер Паж шоколадний</h3>
          <div class="product-price" data-price="2700">2700 ₴</div>
        </div>
      </article>

      <!-- КАРТКА №3 -->
      <article class="product-card">
        <div class="thumb" data-alt="Брюки-кльош">
          <img
            src="images/products/pants-klesh.jpg"
            alt="Брюки-кльош"
            loading="lazy"
            onerror="this.onerror=null; this.src='images/placeholder.webp'; this.closest('.thumb').setAttribute('data-fallback','');"
          />
          <a class="card-link" href="product-pants-klesh.html" aria-label="Дивитися Брюки-кльош"></a>
        </div>
        <div class="info">
          <h3 class="product-title">Брюки-кльош</h3>
          <div class="product-price" data-price="1690">1690 ₴</div>
        </div>
      </article>

      <!-- ===== Як додавати ще товари =====
      Скопіюй блок <article class="product-card">...</article> і зміни:
      - src/alt для зображення
      - href карточки
      - назву в <h3>
      - ціну в .product-price
      ==================================== -->
    </section>
  </div>

  <!-- Невеличкий JS: якщо потрібно проставити “₴” автоматично з data-price -->
  <script>
    document.querySelectorAll('.product-price[data-price]').forEach(el => {
      const n = Number(el.dataset.price);
      if (!isNaN(n)) el.textContent = n.toLocaleString('uk-UA') + ' ₴';
    });
  </script>
</body>
</html>
