/* ============================================================
   PAGINA DE CATEGORIE /peleti (owner, 18.10.2026). Marcajul: Views/Website/Peleti.cshtml; textele și cifrele: Services/CategoriePeleti.cs;
   calculatorul: wwwroot/js/peleti-calculator.js.

   Telefonul întâi (90% din vânzări): primul „Adaugă în coș” (paletul de 1.005 kg) trebuie să fie în primul ecran și pe înălțimea VIZIBILĂ
   (iPhone cu Safari ≈ 390×664, iPhone SE ≈ 375×553, Android ≈ 360×640). De aceea titlul de sus e scurt, cardurile au poza mică în stânga
   (72 px) și butonul pe toată lățimea cardului. Fără scroll lateral, texte de cel puțin 12 px, butoane de cel puțin 44 px, câmpul de
   16 px (iPhone nu mai mărește pagina la atingere).
   Măsurat pe 18.10.2026 (pe test, cu fâșia „SITE DE TEST” de 24 px deasupra antetului), primul „Adaugă în coș”: 390×664 → 381–425 px,
   375×553 → 374–418 px, 360×640 → 399–443 px; la 360×800 se văd toate cele trei butoane. Dacă se adaugă ceva deasupra cardurilor,
   se verifică din nou la 375×553.
   Culorile și fontul ca pe /carbuni-gratar: fond #0a0a0a, carduri #141414, roșul #c10206, Inter.
   Pe calculator (de la 769 px): pe toată lățimea, cu marginile site-ului (--pl-gutter, ca --dk-gutter), cele trei carduri pe un rând.
   ============================================================ */

.pl-pagina {
    --pl-fond: #0a0a0a;
    --pl-card: #141414;
    --pl-bordura: #2f2f2f;
    --pl-rosu: #c10206;
    --pl-rosu-text: #ff4444;
    --pl-verde: #4ade80;
    --pl-text: #e5e5e5;
    --pl-text-slab: #b3b3b3;
    --pl-gutter: 16px;
    --pl-max: 1100px;
    background: var(--pl-fond);
    color: var(--pl-text);
    font-family: 'Inter', sans-serif;
    overflow-x: clip;
}

/* Înălțimile scrise (44 / 48 px) sunt cele reale: padding-ul și bordura intră în ele (câmpul de text ar avea altfel 70 px). */
.pl-pagina *,
.pl-pagina *::before,
.pl-pagina *::after {
    box-sizing: border-box;
}

.pl-inner {
    max-width: var(--pl-max);
    margin: 0 auto;
}

/* Titlul de secțiune doar pentru cititoarele de ecran și zona de anunț „… a fost adăugat în coș”. */
.pl-ascuns {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== sus: titlul, propoziția și nota firmei ===== */
.pl-sus {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a0502 100%);
    padding: 14px var(--pl-gutter) 10px;
    text-align: center;
}

.pl-titlu {
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 6px;
}

.pl-intro {
    color: #ccc;
    font-size: 15px;
    line-height: 1.45;
    max-width: 640px;
    margin: 0 auto;
}

.pl-sus .nota-firma-cta--titlu {
    margin-top: 6px;
}

/* ===== cele trei produse ===== */
.pl-produse {
    padding: 8px var(--pl-gutter) 20px;
}

.pl-grila {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.pl-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    background: var(--pl-card);
    border: 1px solid var(--pl-bordura);
    border-radius: 14px;
}

.pl-card--ieftin {
    border-color: rgba(74, 222, 128, .55);
}

.pl-card__poza img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 10px;
    background: #0a0a0a;
}

.pl-card__corp {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pl-card__eticheta {
    display: inline-block;
    margin: 0 0 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(74, 222, 128, .14);
    color: var(--pl-verde);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

.pl-card__nume {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 2px;
}

    /* Zona de atingere a numelui: 44 px înălțime fără să crească rândul (::after întinde linkul cu 12 px în sus și în jos). */
    .pl-card__nume a {
        position: relative;
        color: #fff;
        text-decoration: none;
    }

        .pl-card__nume a::after {
            content: "";
            position: absolute;
            inset: -12px 0;
        }

        .pl-card__nume a:hover {
            text-decoration: underline;
        }

/* Stelele (BandaRecenzii.RandCardScurt, aceleași ca în /magazin): „★★★★★ 4.8/5 (12)” pe un rând. */
.pl-card .mag-stele {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    font-size: 13px;
    line-height: 1.3;
    color: #fff;
    white-space: nowrap;
}

    .pl-card .mag-stele .rio-stele {
        font-size: 13px;
    }

    .pl-card .mag-stele b {
        font-weight: 700;
    }

.pl-card .mag-stele-nr {
    color: var(--pl-text-slab);
}

.pl-card__pret {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    margin: 2px 0 2px;
}

.pl-card__suma {
    color: var(--pl-rosu-text);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.pl-card__kg {
    color: var(--pl-text-slab);
    font-size: 13px;
    white-space: nowrap;
}

/* „În Argeș: 2.300 lei” (owner, 18.10.2026; PretJudet): doar pe paletul de 1.005 kg, în rândul prețului; trece singur pe rândul următor
   când nu încape (un rând de ~18 px; primul „Adaugă în coș” rămâne în primul ecran și la 375×553). */
.pl-card__judet {
    color: var(--pl-verde);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.pl-card__saci,
.pl-card__transport {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pl-text);
}

.pl-card__transport {
    color: var(--pl-text-slab);
}

.pl-card__transport--gratuit {
    color: var(--pl-verde);
    font-weight: 600;
}

.pl-card__adauga {
    align-self: stretch;
    margin-top: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--pl-rosu);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}

    .pl-card__adauga:hover {
        background: #a00205;
    }

    .pl-card__adauga.este-adaugat {
        background: #15803d;
    }

    .pl-card__adauga[aria-disabled="true"],
    .pl-card__adauga[disabled] {
        cursor: default;
    }

.pl-card__adauga:focus-visible,
.pl-card__nume a:focus-visible,
.pl-calc__buton:focus-visible,
.pl-calc__adauga:focus-visible,
.pl-link:focus-visible,
.pl-livrare__linkuri a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.pl-gol {
    color: var(--pl-text-slab);
    margin: 0;
}

    .pl-gol a {
        color: #fff;
    }

/* ===== secțiunile de jos ===== */
.pl-sectiune {
    padding: 24px var(--pl-gutter);
    border-top: 1px solid rgba(255, 255, 255, .06);
}

    .pl-sectiune h2 {
        font-size: clamp(1.25rem, 3vw, 1.6rem);
        font-weight: 800;
        line-height: 1.25;
        color: #fff;
        margin: 0 0 10px;
    }

.pl-sectiune__intro {
    color: var(--pl-text-slab);
    font-size: 15px;
    line-height: 1.5;
    margin: 0 0 14px;
}

/* ===== câți saci are un palet ===== */
.pl-saci__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

    .pl-saci__lista li {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px 14px;
        background: var(--pl-card);
        border: 1px solid var(--pl-bordura);
        border-radius: 12px;
        font-size: 15px;
        line-height: 1.4;
    }

.pl-saci__cat strong {
    color: #fff;
}

.pl-saci__pret {
    color: var(--pl-text-slab);
    font-size: 14px;
}

/* ===== calculatorul ===== */
/* Linkul „#calculator” nu ascunde titlul sub antetul fix al site-ului. */
.pl-calc {
    scroll-margin-top: 100px;
}

.pl-calc__form {
    background: var(--pl-card);
    border: 1px solid var(--pl-bordura);
    border-radius: 14px;
    padding: 14px;
}

.pl-calc__unitate {
    border: 0;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

    .pl-calc__unitate legend {
        padding: 0;
        margin: 0 0 6px;
        font-size: 14px;
        color: var(--pl-text-slab);
    }

.pl-calc__optiune {
    position: relative;
    display: block;
    cursor: pointer;
}

    .pl-calc__optiune input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

    .pl-calc__optiune span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 6px 8px;
        border: 1px solid #444;
        border-radius: 10px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        line-height: 1.25;
    }

    .pl-calc__optiune input:checked + span {
        border-color: var(--pl-rosu);
        background: rgba(193, 2, 6, .18);
    }

    .pl-calc__optiune input:focus-visible + span {
        outline: 2px solid #fff;
        outline-offset: 2px;
    }

.pl-calc__eticheta {
    display: block;
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.pl-calc__rand {
    display: flex;
    gap: 8px;
}

.pl-calc__camp {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #555;
    border-radius: 10px;
    background: #0a0a0a;
    color: #fff;
    font-family: inherit;
    font-size: 16px;   /* 16 px: iPhone nu mai mărește pagina când atingi câmpul */
}

    .pl-calc__camp:focus {
        outline: 2px solid #fff;
        outline-offset: 1px;
        border-color: #fff;
    }

.pl-calc__buton {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #555;
    border-radius: 10px;
    background: #262626;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.pl-calc__mesaj {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pl-text-slab);
}

    .pl-calc__mesaj.este-eroare {
        color: #fca5a5;
    }

.pl-calc__rezultat {
    margin-top: 12px;
    display: grid;
    gap: 12px;
}

    .pl-calc__rezultat[hidden] {
        display: none;
    }

.pl-calc__cifre {
    margin: 0;
    display: grid;
    gap: 6px;
}

    .pl-calc__cifre > div {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        padding: 10px 12px;
        background: var(--pl-card);
        border: 1px solid var(--pl-bordura);
        border-radius: 10px;
    }

    .pl-calc__cifre dt {
        color: var(--pl-text-slab);
        font-size: 14px;
    }

    .pl-calc__cifre dd {
        margin: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        text-align: right;
    }

.pl-calc__recomandare {
    padding: 14px;
    background: rgba(74, 222, 128, .07);
    border: 1px solid rgba(74, 222, 128, .45);
    border-radius: 14px;
}

    .pl-calc__recomandare[hidden] {
        display: none;
    }

.pl-calc__rec-titlu {
    margin: 0 0 6px;
    color: var(--pl-verde);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pl-calc__linii {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

    .pl-calc__linii li + li::before {
        content: "+ ";
        color: var(--pl-verde);
    }

.pl-calc__total {
    margin: 0;
    color: var(--pl-rosu-text);
    font-size: 20px;
    font-weight: 800;
}

.pl-calc__nota {
    margin: 4px 0 0;
    color: var(--pl-text-slab);
    font-size: 13px;
    line-height: 1.45;
}

.pl-calc__adauga {
    display: block;
    width: 100%;
    margin-top: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--pl-rosu);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

    .pl-calc__adauga:hover {
        background: #a00205;
    }

    .pl-calc__adauga.este-adaugat {
        background: #15803d;
    }

/* ===== livrare și plată ===== */
.pl-livrare__grila {
    display: grid;
    gap: 8px;
}

.pl-livrare__item {
    padding: 12px 14px;
    background: var(--pl-card);
    border: 1px solid var(--pl-bordura);
    border-radius: 12px;
}

    .pl-livrare__item h3 {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
    }

    .pl-livrare__item p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--pl-text);
    }

.pl-livrare__linkuri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
}

    .pl-livrare__linkuri a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 14px;
        border: 1px solid #444;
        border-radius: 10px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

        .pl-livrare__linkuri a:hover {
            border-color: var(--pl-rosu);
        }

/* ===== întrebări frecvente (la vedere) ===== */
.pl-faq__lista {
    display: grid;
    gap: 0;
}

.pl-faq__item {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

    .pl-faq__item:first-child {
        padding-top: 4px;
    }

    .pl-faq__item h3 {
        margin: 0 0 6px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
        color: #fff;
    }

    .pl-faq__item p {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
        color: var(--pl-text-slab);
    }

/* ===== linkurile de la final ===== */
.pl-linkuri .pl-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pl-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 18px;
    box-sizing: border-box;
    background: var(--pl-card);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

    .pl-link::after {
        content: "→";
        margin-left: auto;
        padding-left: 12px;
        color: var(--pl-rosu-text);
    }

    .pl-link:hover {
        border-color: var(--pl-rosu);
    }

/* ===== telefoane mici (iPhone SE, 360 px): același primul ecran, puțin mai strâns ===== */
@media (max-width: 380px) {
    .pl-titlu {
        font-size: 1.45rem;
    }

    .pl-intro {
        font-size: 14px;
    }

    .pl-card {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .pl-card__poza img {
        width: 64px;
        height: 64px;
    }

    .pl-calc__buton {
        padding: 0 12px;
    }
}

/* ===== calculator (de la 769 px): pe toată lățimea, ca restul site-ului ===== */
@media (min-width: 769px) {
    .pl-pagina {
        --pl-gutter: clamp(24px, 2.6vw, 48px);
        --pl-max: 1760px;
    }

    .pl-sus {
        padding-top: 36px;
        padding-bottom: 16px;
    }

    .pl-titlu {
        font-size: clamp(2.2rem, 2.4vw, 2.8rem);
    }

    .pl-intro {
        font-size: clamp(16px, 0.35vw + 12px, 19px);
        max-width: 760px;
    }

    .pl-sus .nota-firma-cta--titlu {
        font-size: 15px;
    }

    .pl-produse {
        padding-top: 16px;
        padding-bottom: 32px;
    }

    .pl-grila {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(12px, 1.4vw, 24px);
    }

    .pl-card {
        grid-template-columns: clamp(88px, 7vw, 140px) minmax(0, 1fr);
        gap: clamp(12px, 1.2vw, 22px);
        padding: clamp(14px, 1vw, 20px);
    }

    .pl-card__poza img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .pl-card__nume {
        font-size: clamp(17px, 0.5vw + 12px, 22px);
    }

    .pl-card__suma {
        font-size: clamp(20px, 0.6vw + 13px, 26px);
    }

    .pl-card__kg,
    .pl-card__judet,
    .pl-card__saci,
    .pl-card__transport {
        font-size: clamp(13px, 0.2vw + 10px, 15px);
    }

    .pl-card__adauga {
        margin-top: auto;
        font-size: 16px;
    }

    .pl-card__corp > .pl-card__transport {
        margin-bottom: 10px;
    }

    .pl-sectiune {
        padding-top: 36px;
        padding-bottom: 36px;
    }

    .pl-saci__lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(10px, 1.2vw, 20px);
    }

    .pl-calc .pl-inner {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        column-gap: clamp(20px, 2.4vw, 48px);
        align-items: start;
    }

        .pl-calc .pl-inner > h2,
        .pl-calc .pl-inner > .pl-sectiune__intro,
        .pl-calc .pl-inner > noscript {
            grid-column: 1 / -1;
        }

    .pl-calc__rezultat {
        margin-top: 0;
    }

    .pl-livrare__grila {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(10px, 1.2vw, 20px);
    }

    .pl-faq__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(32px, 4vw, 80px);
    }

        .pl-faq__item:first-child,
        .pl-faq__item:nth-child(2) {
            padding-top: 4px;
        }

    .pl-linkuri .pl-inner {
        flex-direction: row;
    }

    .pl-link {
        flex: 1 1 0;
    }
}