:root {
      --bg1: #f6f7ff;
      --bg2: #eef2ff;
      --card: #ffffffcc;
      --border: #e6e8ff;
      --primary: #6c7cff;
      --accent: #3de0c3;
      --pink: #ff8bd4;
      --text: #1f2937;
      --muted: #6b7280;
      --radius: 26px;
    }

    * { box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(600px 300px at top left, #ffd6fa, transparent),
        radial-gradient(600px 300px at bottom right, #c7f9ee, transparent),
        linear-gradient(180deg, var(--bg1), var(--bg2));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px;
      color: var(--text);
    }

    .app { width: 100%; max-width: 100%; margin: 0 auto; }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      backdrop-filter: blur(20px);
      box-shadow: 0 30px 60px rgba(108,124,255,.18), inset 0 1px 0 #fff;
    }

    h1 { font-size: 32px; margin: 0 0 10px; }
    h3 { font-size: 24px; margin: 0 0 12px; }
    p  { margin: 0 0 28px; color: var(--muted); }

    .tiles {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 32px;
    }

    .tile {
      padding: 26px;
      border-radius: 22px;
      background: linear-gradient(135deg, #ffffff, #f3f5ff);
      border: 1px solid var(--border);
      cursor: pointer;
      transition: all .35s cubic-bezier(.4,0,.2,1);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .tile::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent, rgba(108,124,255,.18));
      opacity: 0;
      transition: opacity .3s;
    }

    .tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 20px 40px rgba(108,124,255,.28); }
    .tile:hover::after { opacity: 1; }
    .tile.active {
      background: linear-gradient(135deg, #f0f3ff, #e0e7ff);
      border-color: var(--primary);
      box-shadow: 0 20px 50px rgba(108,124,255,.45) !important;
      transform: translateY(-4px) scale(1.015);
    }

    .tile strong { display: block; font-size: 18px; margin-bottom: 6px; }
    .tile span { font-size: 14px; color: var(--muted); }

    .content-section { display: none; opacity: 0; transform: translateY(12px); transition: all 0.4s ease-out; }
    .content-section.active { display: block; opacity: 1; transform: translateY(0); }

    form { display: grid; gap: 20px; }
    label { font-size: 13px; color: var(--muted); }
    input, select, textarea {
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: #fff;
      font-size: 15px;
      outline: none;
      transition: .25s;
    }
    input:focus, select:focus, textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(108,124,255,.15);
    }
    textarea { resize: none; min-height: 110px; }

    .product-image {
      display: block;
       /* maksymalna szerokość obrazka */
      width: 100%;        /* zajmuje całą szerokość kontenera, jeśli jest mniejszy niż max-width */
      height: auto;       /* wysokość dopasowuje się proporcjonalnie */
      margin: 15px auto 0;
      border-radius: 20px; /* ładne, zaokrąglone rogi */
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      transition: transform 0.3s;
      object-fit: cover;  /* obrazek wypełnia box proporcjonalnie, przycinając jeśli trzeba */
    }
    .product-image:hover {
      transform: scale(1.02);
    }

    button {
      margin-top: 10px;
      padding: 18px;
      border-radius: 18px;
      border: none;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      background: linear-gradient(135deg, var(--primary), var(--pink), var(--accent));
      color: white;
      box-shadow: 0 20px 40px rgba(108,124,255,.35);
      transition: .3s;
    }
    button:hover { transform: translateY(-3px); box-shadow: 0 30px 60px rgba(108,124,255,.45); }

    @media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } }
    .summary-column {
      display: flex;
      flex-direction: column;
      gap: 30px;
      margin-bottom: 30px;
    }

    .summary-card {
      background: linear-gradient(135deg, #ffffff, #f3f5ff);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      text-align: center;
      box-shadow: 0 10px 20px rgba(108,124,255,.15);
      transition: all .3s ease;
    }

    .summary-card span {
      display: block;
      font-size: 13px;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .summary-card strong {
      font-size: 18px;
      color: var(--text);
    }

    .summary-card.total-card {
      background: linear-gradient(135deg, #e0e7ff, #f0f3ff);
      font-weight: 600;
    }

    .summary-card.pay-card {
      background: linear-gradient(135deg, var(--primary), var(--pink), var(--accent));
      color: white;
      font-size: 18px;
      box-shadow: 0 15px 35px rgba(108,124,255,.35);
    }

    .hidden-row {
      display: none !important;
    }
    .heart {
      background: linear-gradient(90deg, #ff8bd4, #3de0c3, #6c7cff, #ff8bd4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-size: 300% 300%;
      animation: gradient 4s ease infinite, pulse 2s ease-in-out infinite;
      font-size: 1.2em;
      margin: 0 4px;
      display: inline-block;
    }

    @keyframes gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.25); }
    }
    h1.heart {
    font-size: 22px;          /* ≈ 51 px na większości urządzeń */
    /* albo konkretnie: font-size: 52px; */


  }
  .tile strong {
  color: #7c8299;

  /* ewentualnie: color: var(--muted);   ← jeśli w :root masz już zdefiniowane --muted: #6b7280; to możesz użyć tej zmiennej */
  }
  .summary-title {
    color: #7c8299;
  }
  .tile-title {
    color: #7c8299;
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
  }

  .tile-desc {
    color: #7c8299;
    margin: 0 0 12px;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  .tile-keyword {
    margin: 0;
    font-size: 0.95rem;
    color: #ef4444;           /* lub var(--primary) */
  }

  .tile-keyword strong {
    font-weight: 700;
    font-size: 0.7rem;
    background: linear-gradient(90deg, #fef2f2, #fee2e2);
    padding: 2px 6px;
    border-radius: 6px;
  }
  .product-select {
    color: var(--muted);
    padding: 16px 18px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 15px;
    outline: none;
    transition: .25s;
    height: 56px;                /* lub 54px / 56px – bardzo popularne */
    line-height: 1.4;            /* pomaga wycentrować tekst pionowo */  /* usuwa domyślną strzałkę (opcjonalne) */
  }

  /* Opcjonalnie – powiększa też opcje w menu rozwijanym (Chrome/Firefox) */
  .product-select option {
    color: var(--muted);
    font-size:    17px;
    padding:      8px 12px;       /* odstępy między opcjami */
  }
  .logo {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 54px;
    height: auto;
    opacity: 0.9;
  }
  footer {
margin-top: auto;
padding: 40px 20px 30px;
text-align: center;
font-size: 14px;
color: #7c8299;
width: 100%;
}
.hidden-row {
display: none; /* całkowicie ukrywa wizualnie, ale zostaje w DOM */
}
  .cart { border: 1px solid #ccc; padding: 15px; border-radius: 8px; margin-top:20px; }
  .cart-items { list-style:none; padding:0; }
  .cart-item { padding: 8px; border-bottom:1px solid #eee; margin-bottom:5px; }
  .cart-remove { background:none; border:none; cursor:pointer; color:red; margin-left:10px; }
  .cart-total { margin-top:10px; font-weight:bold; }

  .brand-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    background: linear-gradient(90deg, var(--primary), var(--pink), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    background-position: 0% 50%;
    transition: all 0.4s ease;
    padding: 2px 6px;
    border-radius: 8px;
    position: relative;
  }