.front-body{
    background:#f6f7f9;
    min-height:100vh;
}

.front-canvas{
    max-width:900px;
    margin:auto;
    padding:40px 20px;
}

/* GRID kafelków */
.tile-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
    gap:24px;
    margin-bottom:40px;
}

/* Usunięcie podkreśleń i ustawienie koloru dla linków */
.tile-card {
    display: flex;       /* Używamy flex, aby łatwiej kontrolować zawartość */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    text-decoration: none; /* Usuwa podkreślenie w 1. rzędzie */
    color: #333;           /* Ustaw własny kolor tekstu (zamiast domyślnego niebieskiego linku) */
    
    background: white;
    border-radius: 12px;
    padding: 50px 20px;
    
    /* Gwarancja równej wysokości */
    min-height: 220px;     /* Możesz dostosować tę wartość */
    width: 100%;
    
    font-size: 26px;
    font-weight: 600;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transition: all .2s ease;
    cursor: pointer;
}

/* Naprawa kolorów w hover */
.tile-card:hover {
    transform: translateY(-4px);
    color: #007bff;        /* Opcjonalnie: kolor tekstu po najechaniu */
    text-decoration: none;
}

/* Naprawa obrazka (flagi) i emoji */
.tile-icon {
    display: block;
    margin-bottom: 15px;
    width: 64px;           /* Stała szerokość dla flag */
    height: 48px;          /* Stała wysokość dla flag 4x3 */
    object-fit: cover;     /* Wypełnienie obszaru bez zniekształceń */
    font-size: 48px;       /* Rozmiar dla emoji 🛒 📚 */
    line-height: 1;
}

.tile-icon-img {
    /* width: 100%; */
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

/* Reset stylów buttona w 2. rzędzie */
button.tile-card {
    border: none;
    font-family: inherit;  /* Buttony czasem zmieniają font */
}


/* -------------------------------
   Kafelek produktowy McD-style poprawiony
--------------------------------- */
.product-tile {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #333;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    overflow: hidden;           /* żeby obrazek nie wychodził poza kafelek */
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: auto;           /* elastyczna wysokość */
}

.product-tile:hover {
    transform: translateY(-4px);
    color: #007bff;
}

/* -------------------------
   Obrazek główny
------------------------- */
.product-img {
    width: 100%;
    height: 180px;            /* wysokość zdjęcia */
    object-fit: cover;        /* zachowuje proporcje i wypełnia całą szerokość */
    display: block;
}

/* -------------------------
   Tekst pod zdjęciem
------------------------- */
.product-name {
    font-weight: bold;
    font-size: 20px;
    margin: 12px 16px 4px 16px;
    text-align: center;
}

.product-info {
    margin: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.product-field {
    font-size: 16px;
}

.product-extra-img {
    width: 100%;       /* To wymusza zajęcie całej szerokości kafelka */
    height: auto;      /* To pozwala zdjęciu "urosnąć" w pionie tyle, ile potrzebuje */
    display: block;    /* Usuwa dziwne przerwy pod obrazkiem */
    margin: 0;         /* Wywalamy marginesy auto, bo i tak zajmuje 100% */
}


/* ================================
   DETAIL PRODUKTU (McD style)
================================= */

/* ================================
   DETAIL – styl Allegro
================================= */

.product-detail {
    cursor: default;        /* 🔥 zamiast pointer */
    transition: none;       /* 🔥 wyłącza animacje */
}

.product-detail:hover {
    transform: none;        /* 🔥 brak podnoszenia */
    color: inherit;         /* 🔥 brak zmiany koloru */
}

/* NAZWA produktu (duża, ale nie przesadzona) */
.product-detail-name {
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    margin: 20px;
    color: #222;
}

/* SEKCJA INFO */
.product-detail-info {
    padding: 0 20px 20px 20px;
}

/* KAŻDE POLE */
.product-detail-field {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* LABEL */
.product-detail-label {
    font-size: 13px;
    color: #6c757d;
    text-align: left;
    margin-bottom: 2px;
}

/* VALUE */
.product-detail-value {
    font-size: 15px;
    color: #222;
    text-align: left;
    font-weight: 400;
}

/* ================================
   RICH TEXT (opis)
================================= */

.product-detail-value p {
    font-size: 16px;
    line-height: 1.5;
    margin: 8px 0;
}

.product-detail-value strong,
.product-detail-value b {
    font-weight: 600;
}

.product-detail-value ul {
    padding-left: 18px;
}

.product-detail-value li {
    margin-bottom: 6px;
}

/* ================================
   OBRAZY
================================= */

.product-detail-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.product-detail-extra-img {
    width: 100%;
    height: auto;
}

.product-detail-value img,
.product-detail-extra-img {
    display: block;
    margin: 10px auto;
    max-width: 100%;
    height: auto;
}

/* ================================
   INFO: nowa odsłona
================================= */
.coming-soon {
    font-size: 28px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
}

.coming-soon p {
    margin: 5px 0;
}