/*
 * axaporcelaine.ro — corecturi 2026-11 (SEO / accesibilitate / PageSpeed: fara „salturi” ale paginii, aceeasi aranjare inainte si
 * dupa pornirea JS-ului). Se incarca dupa CSS-ul temei (common/gv-css.php); in productie e inclus in CSS-ul unic (ftp/build_assets.py).
 * Preluate de la lumeafiltrelor.ro / prietenulgradinii.ro (aceeasi familie de teme), potrivite temei axa.
 */

/* 2. Linkul din bara de cookie-uri se deosebea de text doar prin culoare (Lighthouse „link-in-text-block”) */
.mscookie-consent-banner a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 3. Poza principala a produsului / slider-ul: <picture> (o singura poza, 2026-11) se poarta ca <img>-ul de dinainte */
.slider-img picture,
.gallery_link picture,
.cat-item-link picture {
    display: contents;
}

/* 4a. Pozele care au primit width / height (2026-11, data-wh din gv_img_wh = marimea reala a fisierului): latimea ramane cea a
       pozei (limitata de max-width:100% al temei, ca inainte), inaltimea din proportie — locul e rezervat si pentru pozele inca
       neincarcate (fara „salturi”). :where() = prioritate zero: orice regula a temei care da o inaltime castiga. Unde tema da
       doar inaltimea (logo-ul), latimea vine din proportie, ca inainte. */
:where(img[data-wh]) {
    height: auto;
}
.logo img {
    width: auto;
}
/* sliderul: cu srcset, latimea „naturala” a pozei devine cea din sizes; inainte poza umplea coloana (max-width:100%) */
.slider-img img {
    width: 100%;
}

/* 4c. Filtrul de pret inainte de JS: campul brut (din el face JS-ul sliderul, apoi il ascunde) ocupa locul sliderului (20 px),
       invizibil — preturile de sub el stau unde vor sta si dupa pornirea sliderului */
.filter-list-price > input[data-slider-min] {
    display: block;
    visibility: hidden;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* 5. Video-urile de pe produs: poza + butonul de redare in locul playerului YouTube (se incarca la clic, content/products.php) */
.gv-yt {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}
.gv-yt picture {
    display: contents;
}
.gv-yt img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s;
}
.gv-yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    margin: -24px 0 0 -34px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M27 14v20l18-10z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 68px 48px;
    transition: background-color .2s;
}
.gv-yt:hover img,
.gv-yt:focus-visible img {
    opacity: .85;
}
.gv-yt:hover .gv-yt-play,
.gv-yt:focus-visible .gv-yt-play {
    background-color: #c00;
}
.gv-yt:focus-visible {
    outline: 3px solid #1f1f1f;
    outline-offset: 2px;
}

/* 9. Antetul de pe telefon (2026-11, accesibilitate): butonul meniului (hamburgerul, era <div>) si lupa care deschide cautarea (era
      <a href="#">) sunt acum <button> — se folosesc din tastatura si au nume pentru cititoarele de ecran (common/header.php).
      Fara chenarul / fondul / spatiul implicit al butonului: arata exact ca inainte. Liniile hamburgerului sunt <span>-uri: block,
      ca <div>-urile de dinainte (pozitia lor de pornire ramane marginea din stanga). */
button.hamburger,
.top-links button.top-link {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
}
button.hamburger {
    padding-right: 0;
    padding-bottom: 0;
    color: inherit;
    font: inherit;
}
button.hamburger > span {
    display: block;
}

/* 10. Pagina de contact (2026-11, accesibilitate): programul era un link spre „#” (fara destinatie) — acum e text (<span>,
       content/contact.php), cu aceeasi culoare si aceeasi asezare ca linkurile de alaturi (telefon, e-mail) */
.contact-page ul li .gv-program {
    display: inline-block;
    color: #229495;
}

/* 11. Galeria de pe pagina produsului (2026-11, content/products/product-gallery.php si product-classes.php)
   11a. Inainte de JS (in productie porneste la prima interactiune, gv_amana): doar primul slide, ca dupa pornirea sliderului
        (slick) — fara slide-urile urmatoare puse unul sub altul si fara „saltul” de la pornire. */
.slider-product:not(.slick-initialized) > :not(:first-child) {
    display: none;
}
/* 11b. Pozele cu width / height (data-wh) si inaltimea maxima a temei (720 / 520 / 420 px, miniaturile 80 px): o poza mai inalta
        decat lata ar fi turtita (latimea din atribut ramane, inaltimea se taie) — asa e desenata intreaga, la mijloc, exact ca
        inainte. La pozele patrate (aproape toate) nu schimba nimic. */
.prod-gallery figure img[data-wh] {
    object-fit: contain;
}
/* 11c. Tableta (768–991 px): poza principala vine din miniatura (450 px, aceeasi ca in preload, gv_lcp_preload) — locul ei ramane
        cel de dinainte, 520 px (latimea maxima a galeriei pe tableta), nu latimea miniaturii. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .slider-product .gallery_link picture img[data-wh] {
        width: 520px;
    }
}
/* 11d. Miniaturile „Alege varianta” (product-classes.php, cu width / height): latimea din proportie, ca inainte (tema le da doar
        inaltimea maxima, in cercul de 70 / 50 px) — o poza care nu e patrata nu se turteste. */
.prod-option img {
    width: auto;
}

/* 20. Tastatura (accesibilitate, 2026-11): submeniurile din meniul principal se deschideau doar cu mouse-ul (hover) — acum si cand
       focusul de tastatura e in meniu; iconitele din antet aveau conturul de focus scos de tema (outline:none!important) — doar la
       navigarea cu tastatura (:focus-visible), la mouse nu se vede nimic in plus */
.navbar li:focus-within .dropdown-menu {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
}
.top-links .top-link:focus-visible {
    outline: 2px solid #229495 !important;
    outline-offset: 2px;
}

/* 12. Prima pagina si cautarea rapida (2026-11)
   12a. Sliderul de pe prima pagina (slick, content/homepage/slider.php) inainte de JS — in productie JS-ul porneste la prima
        interactiune (gv_amana): doar primul slide, ca dupa pornirea sliderului (fade, cate un slide); textul slide-ului ramane jos
        pe poza (.text-absolute se aseaza fata de .slider). Fara slide-urile urmatoare puse unul sub altul si fara „saltul” de la
        pornire (masurat la 412 / 1350 / 1920 px: aceeasi aranjare cu si fara JS, la 1 px). Poza: block, ca dupa pornire (slick:
        .slick-slide img) — altfel umbrirea temei de pe telefon (.slider-img:after) ramane o dunga ingusta peste mijlocul pozei. */
.slider:not(.slick-initialized) > :not(:first-child) {
    display: none;
}
.slider:not(.slick-initialized) .slider-img img {
    display: block;
}
/* 12b. Pozele din cautarea rapida (products/search-item.php, cu width / height 460): tema le da doar inaltimea maxima (100 px) —
        latimea din proportie, ca inainte; altfel poza patrata se latea (240 x 100 px pe telefoanele sub 380 px, 115 x 100 la
        992–1199 px). */
.search-popup .search-list .prod-item figure img,
.search-popupx .search-listx .prod-item figure img {
    width: auto;
}

/* 21. Pagina produsului pe telefon (2026-11, si in tema originala): randul pozei (.row cu margini -12 px) sta intr-o coloana cu
       padding de 8 px (px-2) -> iese cu 4 px de fiecare parte, pagina devine mai lata decat ecranul (416 px la 412: telefonul o
       arata micsorata). Cei 4 px de pe margine sunt goi (sunt in padding-ul coloanelor din rand) — se taie, aranjarea ramane la fel. */
@media (max-width: 991.98px) {
    .col-12.px-2:has(> .row.h-100) {
        overflow-x: clip;
    }
}

/* 22. Bara de cookie-uri: butonul „Accepta” (text alb pe turcoazul temei #229495, din setarea theme_color) avea contrast 3,66:1
       (minimul cerut 4,5:1) — aceeasi nuanta, putin mai inchisa, cu textul alb pastrat (4,9:1); la cererea clientului, 11 nov 2026 */
#msbtn-accept-all {
    background-color: #1c7d7e !important;
}

/* 23. Logoul (2026-11, PageSpeed pe calculator: „imagine fara dimensiuni”, CLS 0,12): tema ii da doar inaltimea maxima (75 / 60 / 50 /
       70 / 100 px, dupa ecran); pana venea poza, locul lui era textul alt (24 px), iar antetul crestea cu 36 px si muta toata pagina.
       O inaltime ceruta mare + inaltimea maxima a temei = exact inaltimea afisata si pana acum, rezervata de la inceput; latimea vine
       din proportie (width / height din pagina, 170 x 100) — logoul arata la fel. */
.logo img {
    height: 1000px;
}