/**
 * Marirea zonelor apasabile pe telefon.
 *
 * Masurat pe un ecran de 390px: iconitele din antet aveau 36-40px,
 * comutatorul de limba din subsol 32px, butonul Google de pe pagina de
 * conectare 34px, sagetile si punctele galeriei de produs 40px si 16px.
 * Recomandarea uzuala (Apple HIG, Material) este 44px - sub atat, o
 * apasare cu degetul rateaza des tinta.
 *
 * Peste tot unde iconita insasi trebuie sa ramana la fel de mare,
 * zona creste printr-un ::after asezat peste element, nu prin padding:
 * asa nu se misca nimic in aranjamentul paginii, iar desktopul ramane
 * neatins. Cand elementul era deja intr-un rand cu spatiu liber in
 * jur, e mai simplu si mai sigur cu min-height.
 *
 * Plain CSS, nu utilitare Tailwind - tema copil nu are inca build
 * propriu de Tailwind, deci o clasa noua care nu exista deja in tema
 * parinte nu s-ar compila (vezi CLAUDE.md).
 */

/* Zona de 44px centrata peste o iconita mai mica, fara efect in layout. */
.peren-tap-44 {
    position: relative;
}

.peren-tap-44::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

@media (max-width: 1023px) {
    /*
     * Antet: butonul de meniu are deja p-2 (44px). Cautarea, contul si
     * cosul au ramas pe p-1. Spatiul dintre ele este de 8px, deci cele
     * patru zone de 44px ajung una langa alta fara sa se suprapuna.
     */
    #menu-search-icon,
    #customer-menu,
    #menu-cart-icon {
        position: relative;
    }

    #menu-search-icon::after,
    #customer-menu::after,
    #menu-cart-icon::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* Comutatorul de limba din subsol: 32px inaltime. */
    .pf-bottom .form-select,
    footer .form-select {
        min-height: 44px;
    }

    /*
     * Butonul de conectare cu Google: 34px, desi este una dintre cele
     * doua actiuni principale ale paginii de conectare.
     */
    .btn-social {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Butonul de favorite de pe pagina de produs: 40px. */
    #add-to-wishlist {
        width: 44px;
        height: 44px;
    }

    /*
     * Sagetile galeriei: 40px, asezate una langa alta cu 8px intre ele,
     * deci zonele de 44px nu se suprapun. Cercul ramane de 40px - marit,
     * ar acoperi prea mult din fotografie.
     */
    .btn-secondary.rounded-full.pointer-events-auto {
        position: relative;
    }

    .btn-secondary.rounded-full.pointer-events-auto::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /*
     * Punctele de sub galerie raman de 16px la vedere - un rand de
     * puncte de 44px ar arata ca un rand de butoane. Zona creste doar
     * pe verticala, ca sa nu fure fiecare punct apasarea vecinului:
     * pe orizontala stau prea aproape unul de altul pentru asta.
     */
    .snap-marker {
        position: relative;
    }

    .snap-marker::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: 44px;
        transform: translateY(-50%);
    }

    /*
     * Rezumatul de stele de pe pagina de produs, care duce la formularul
     * de recenzie: 20px inaltime.
     */
    a[href$="#review-form"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Filele de pe pagina de produs (Descriere, Specificatii...): 40px. */
    .peren-product-tab-btn {
        min-height: 44px;
    }

    /*
     * Firul Ariadnei: 20px inaltime. Randul devine mai inalt, dar sunt
     * legaturi reale de navigare - pe telefon, unde tocmai ele sunt
     * drumul inapoi catre categorie, merita masura degetului.
     */
    ol.items li a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /*
     * Randurile mai inalte impingeau titlul produsului mai jos decat
     * merita firul Ariadnei. Marginile de sus si de jos ale benzii se
     * strang, ca inaltimea totala sa ramana aproape de cea dinainte.
     */
    ol.items {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    /*
     * Paginile de cont: legaturile "Editeaza" / "Schimba parola" /
     * "Gestioneaza adresele" de pe panou (20px) si "Inapoi" din
     * lista de comenzi (19px).
     */
    .pa-link-arrow,
    a.action.back {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /*
     * Listele derulante din formulare (tara, judetul) se opresc la
     * 42px - doi pixeli sub masura degetului.
     */
    .form-select,
    select.form-select {
        min-height: 44px;
    }

    /* Legatura catre politica de cookie din banner: 15px. */
    .peren-cc-banner__link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Sigla din subsol: 30px inaltime, desi este o legatura reala. */
    .pf-logo {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/*
 * Ramas neatins, deliberat: punctele de sub galeria de produs
 * (.snap-marker). Au overflow:hidden pe ele insele, care decupeaza
 * propriul ::after, deci zona nu poate fi marita fara padding - iar
 * padding-ul ar mari si inelul colorat de pe punctul activ, adica ar
 * schimba aspectul galeriei. Galeria se poate parcurge prin glisare si
 * apasand fotografia mare, deci punctele nu sunt singurul drum.
 */

/* Cos (2026-09-30): pretul o singura data - vezi
   Magento_Checkout/templates/php-cart/item/default.phtml. Coloana de detalii
   primeste min-width 0, altfel pe telefon randul iesea din ecran (pretul si
   "1 Nano-SIM + eSIM" erau taiate la dreapta). */
.peren-cart-details { min-width: 0; }
.peren-cart-details .item-options dd { overflow-wrap: anywhere; }
.peren-cart-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 4px 0 0;
    white-space: nowrap;
}
.peren-cart-price__total { font-size: 1.125rem; }
.peren-cart-price__unit { font-size: 0.875rem; }
@media (min-width: 640px) {
    .peren-cart-price { align-items: flex-end; margin-top: 0; }
}