/*
 * raris-mobile.css — overlay responsive peste CSS-ul legacy (raris11, mfin1d).
 *
 * Strategia:
 *   - Pastram structura HTML legacy intacta (clase, ID-uri, ierarhie tabele).
 *   - Adaugam pe mobil overrides care:
 *     1. Anuleaza latimea fixa de 1081px pe body si containere.
 *     2. Wrap-uiesc continutul tabelelor in scroll orizontal (touch + mouse).
 *     3. Fac imaginile flexibile (max-width: 100%).
 *     4. Permit tab-bar-ul de sus sa se infasoare (wrap) pe ecrane inguste.
 *
 * Toate overrides-urile sunt sub @media (max-width: 1080px) — DESKTOP-UL
 * (>=1081px) ramane EXACT ca inainte: zero impact vizual.
 */

/* ---- Wrapper de scroll orizontal pentru orice tabel lat ---- */
/* Activ TOT timpul: pe desktop containerul e mai lat decat ecranul oricum,
   pe mobil ofera scroll touch/mouse cu momentum. Tabelul ramane intact —
   wrapperul are max-width: 100% si overflow-x:auto, deci tabelul natural
   poate depasi container-ul si user-ul scroll-uieste lateral DOAR pe el. */
.scroll-x {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    box-sizing: border-box;
}
.scroll-x > table {
    /* tabelul isi pastreaza latimea NATURALA — fara max-width care l-ar comprima */
    margin-left: 0;
    margin-right: 0;
    width: auto !important;
    max-width: none !important;
    table-layout: auto !important;
}

/* ---- MOBIL & TABLET (sub 1081px) ---- */
@media (max-width: 1080px) {

    /* 1. Body — anuleaza min-width 1081px din inline-style si raris11.css.
       max-width:100% (nu 100vw) ca sa NU includa latimea scrollbar-ului —
       altfel continutul depaseste zona vizibila si apare al doilea scrollbar
       mic langa cel al browserului cand fereastra e ingusta. */
    html, body {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
        display: block !important;
        overflow-x: hidden;
    }

    /* 2. Containere principale — fluid full width */
    .home,
    .product,
    .nav-top,
    .nav-side,
    .main_content,
    .main {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* CRITIC: tabelul "principal" din layout.phtml are width=1070px
       hardcoded + TD-uri cu width:900px. Pe mobil le facem block ca
       sa se stack-uiasca vertical. */
    #principal {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    #principal > table {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
    }
    #principal > table > tbody,
    #principal > table > tr {
        display: block;
        width: 100% !important;
    }
    #principal > table > tbody > tr > td,
    #principal > table > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Tabele inline-styled cu lațime fixă (ex. <table style="width:870px">,
       <table width="680">) — fluide pe mobil. Excepție: tabelele detalii
       produs (.dates, etc.) sunt în .scroll-x, deja gestionate separat. */
    .main_content table[width]:not(.dates):not(.dates_mobile):not(.dates_fatada):not(.smal-labels):not(.smal-col):not(.cart-table),
    .main_content table[style*="width:"]:not(.dates):not(.dates_mobile):not(.dates_fatada):not(.smal-labels):not(.smal-col):not(.cart-table),
    .main_content table[style*="width="]:not(.dates):not(.dates_mobile):not(.dates_fatada):not(.smal-labels):not(.smal-col):not(.cart-table) {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* CRITIC: tabelele de preturi (.dates) in .scroll-x trebuie sa-si
       PASTREZE latimea naturala (cu min-width ca sa fortam scroll cand
       continutul e prea ingust). Wrapperul .scroll-x are overflow-x:auto. */
    .main_content .scroll-x {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    .main_content .scroll-x > table.dates,
    .main_content .scroll-x > table.dates_mobile,
    .main_content .scroll-x > table.dates_fatada {
        display: table !important;
        width: auto !important;
        max-width: none !important;
        min-width: 100% !important;
        table-layout: auto !important;
        white-space: normal;
    }
    /* Celulele tabelului — pastreaza textul pe o linie (forteaza scroll) */
    .main_content .scroll-x > table.dates td,
    .main_content .scroll-x > table.dates_mobile td,
    .main_content .scroll-x > table.dates_fatada td,
    .main_content .scroll-x > table.dates th,
    .main_content .scroll-x > table.dates_mobile th,
    .main_content .scroll-x > table.dates_fatada th {
        white-space: nowrap;
        padding: 6px 10px;
    }
    /* Ultimul td (coloana "comanda") — padding-right marit ca sa se vada
       complet la scroll-max si sa nu fie taiat pe dreapta. */
    .main_content .scroll-x > table.dates td:last-child,
    .main_content .scroll-x > table.dates th:last-child {
        padding-right: 24px !important;
    }
    /* Buffer la sfarsitul tabelului (extra spatiu cand scroll-uim max-dreapta) */
    .main_content .scroll-x {
        scroll-padding-right: 24px;
    }
    .main_content .scroll-x::after {
        content: '';
        display: inline-block;
        width: 12px;
        height: 1px;
    }
    /* Hint vizual subtle: scrollbar mai vizibila pe mobil */
    .main_content .scroll-x::-webkit-scrollbar {
        height: 8px;
    }
    .main_content .scroll-x::-webkit-scrollbar-thumb {
        background: rgba(2, 114, 167, 0.6);
        border-radius: 4px;
    }
    .main_content .scroll-x::-webkit-scrollbar-track {
        background: #eee;
    }
    /* Cazul `<table style="width:870px">` din section.phtml/tablou-produse */
    .tabcontent table[style*="margin-left:20px"],
    [class^="tabcontent"] table[style*="margin-left:20px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* Cazuri schele-fatada: <table width='680' height='650'> */
    /* .cart-table (tabelul de produse din cos) e exclus: are cap de tabel
       propriu si 5 coloane; daca l-am sparge in blocuri, valorile ar ramane
       fara antet. El sta in .scroll-x si se trage lateral, ca tabelele de pret. */
    .main_content > div > table[width]:not(.cart-table),
    .main_content table[width="680"]:not(.cart-table),
    .main_content table[width="600"]:not(.cart-table),
    .main_content table[width="500"]:not(.cart-table) {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    .main_content table[width="680"]:not(.cart-table) tr,
    .main_content table[width="600"]:not(.cart-table) tr,
    .main_content table[width="500"]:not(.cart-table) tr {
        display: block;
        width: 100%;
    }
    .main_content table[width="680"]:not(.cart-table) td,
    .main_content table[width="600"]:not(.cart-table) td,
    .main_content table[width="500"]:not(.cart-table) td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* (Pagina de comanda nu mai foloseste tabel — vezi raris-cart.css. Excluderile
       `:not(.cart-table)` de mai sus raman ca plasa de siguranta daca se
       reintroduce vreun tabel acolo.) */

    /* Imagine schema produs (de obicei într-un <td rowspan> sau div izolat)
       — fluid pe mobil. */
    .main_content [class*="schema"] img,
    .main_content [class*="img_produs_tabel"] img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Imaginea SPL/PSA composite (gallery_produs cu .gim) — STRICT max-width 100%
       indiferent de width="" sau style inline. */
    .main_content img.gim,
    .main_content img[width],
    .main_content img[style*="width:"] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 3. Top tab bar (.hmtab) — wrap pe mai multe randuri pe mobil + scroll
       orizontal pentru cazuri extreme. Butoanele stau in linie. */
    .hmtab {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        display: flex;
        flex-wrap: nowrap;
    }
    .hmtab .hmtablinks {
        flex: 0 0 auto;
        font-size: 14px;
        padding: 8px 12px;
        min-height: 38px;
    }
    /* "Mentenanta" link-ul cu float:right si textul "magazinul online accesati"
       ies din tab-ul superior pe mobil. Le ascundem sau readjustam. */
    .hmtab > span,
    .hmtab > a[href*="mentenanta"] {
        display: none;
    }

    /* 4. Sectiuni homepage (hmtabcontent) — fluid + descriere bara fluid */
    .hmtabcontent {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    .hmtabcontent > div[style*="1067px"],
    .hmtabcontent > div[style*="width:1067"] {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        box-sizing: border-box;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    /* 5. Sub-tab buttons row */
    .hmtabcontent > div[style*="width:750px"] {
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding: 4px 0;
    }

    /* 6. Iframe slideshow — fluid */
    .tabcontent, .tabcontent1, .tabcontent2, .tabcontent3,
    .tabcontent4, .tabcontent5, .tabcontent6, .tabcontent8 {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tabcontent iframe, .tabcontent1 iframe, .tabcontent2 iframe,
    .tabcontent4 iframe, .tabcontent5 iframe, .tabcontent6 iframe,
    .tabcontent8 iframe {
        width: 100% !important;
        max-width: 100%;
    }

    /* 7. Tablou produse (grid 12 coloane × 75px) — scroll orizontal,
       tabelul ramane neschimbat structural. */
    .tabcontent > div > table,
    .tabcontent1 > div > table,
    .tabcontent2 > div > table,
    .tabcontent4 > div > table,
    .tabcontent5 > div > table,
    .tabcontent6 > div > table,
    .tabcontent8 > div > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }

    /* 8. Tabele detalii produs — toate sunt invelite in .scroll-x in
       partials (detail-table.phtml, componenta-fatada-*.phtml). NU mai
       aplicam display:block pe table direct — pastram layout-ul de
       tabel intact, iar wrapperul .scroll-x face overflow horizontal.
       Daca un tabel apare fara wrapper (caz neasteptat), il invelim
       cu display:block ca fallback. */
    table.dates:not(.scroll-x table),
    table.dates_mobile:not(.scroll-x table),
    table.dates_fatada:not(.scroll-x table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* 9. Imagini — fluid */
    img {
        max-width: 100%;
        height: auto;
    }
    /* Exceptie: thumb-urile din tablou produse trebuie sa-si pastreze
       inaltimea de 90px ca sa nu se sparga grid-ul. */
    .tabcontent img,
    .tabcontent1 img, .tabcontent2 img, .tabcontent4 img,
    .tabcontent5 img, .tabcontent6 img, .tabcontent8 img {
        max-width: none;
        height: 90px;
    }

    /* 10. Pagina produs — title + descriere + spec_produs */
    .title_produs {
        font-size: 18px;
    }
    .title_produs h2 {
        font-size: 16px !important;
    }

    /* Imaginea principala produs — anuleaza float + dimensiuni fixe legacy.
       Pe mobil apare ca block centrat, full-width.
       Exceptie: containerul header (blue1.jpg bar) care are propriile reguli mai jos.
       Folosim clear:both ca sa fortam stacking vertical (img sus, descriere jos). */
    .img_produs,
    [class^="img_produs_"]:not([class*="content"]),
    [class*=" img_produs_"] {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 10px 0 !important;
        text-align: center !important;
        display: block !important;
        border: none !important;
    }
    .img_produs img,
    [class^="img_produs_"] img,
    [class*=" img_produs_"] img {
        max-width: 90% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: inline-block !important;
        float: none !important;
    }
    .img_produs > a,
    [class^="img_produs_"] > a,
    [class*=" img_produs_"] > a {
        display: inline-block !important;
        float: none !important;
    }

    /* spec_produs (descriere + caracteristici): legacy float:left.
       Pe mobil block full-width + clear:both — apare SUB imagine, nu langa. */
    .spec_produs {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
        padding: 0 8px;
        display: block !important;
    }

    /* Container "Detalii produs" 750px — fluid pe mobil + anuleaza float. */
    div[style*="width:750px"],
    div[style*="width: 750px"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    /* Container "TABLOU PRODUSE button" 850px (tablinks8) — la fel */
    div[style*="width:850px"],
    div[style*="width: 850px"] {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }
    /* div.tab cu sub-tab buttons (mfin1d.css: float:left, width:180px) →
       fluid + flex pe mobil ca butoanele sa se aranjeze pe randuri. */
    div.tab {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px;
        border: 0 !important;
        background-color: #f8f8f8;
    }
    div.tab a {
        flex: 1 1 calc(50% - 6px);
    }
    div.tab button {
        width: 100% !important;
        height: auto !important;
        min-height: 50px;
        padding: 10px 12px !important;
        font-size: 13px !important;
        white-space: normal;
        line-height: 1.3;
    }
    /* TABLOU PRODUSE button (in width:750/850 container) — fluid */
    .tablinks, .tablinks1, .tablinks2, .tablinks4, .tablinks5,
    .tablinks6, .tablinks7, .tablinks8 {
        max-width: 100%;
    }

    /* gallery_produs (500x400 hardcoded in raris11.css, .gim 250px in inline
       style legacy) — fluid si centrat pe mobil. spec_produs caracteristici
       apare SUB ea (clear:both). */
    .gallery_produs {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 10px auto !important;
        border: none !important;
        text-align: center !important;
        display: block !important;
    }
    .gallery_produs img,
    .gallery_produs .gim {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        display: inline-block !important;
        float: none !important;
    }
    .gallery_produs > a {
        display: inline-block !important;
        float: none !important;
    }

    /* Killer general: orice element din pagina produs cu float legacy
       (img_produs, spec_produs, gallery_produs, caracteristici, etc.)
       devine block fluid pe mobil. Previne edge-cases. */
    .main_content [class*="img_produs"],
    .main_content [class*="spec_produs"],
    .main_content [class*="gallery_produs"],
    .main_content [class*="caracteristici"] {
        float: none !important;
    }

    /* Schema produs si img_produs_tabel — fluid */
    .img_produs_tabel_25,
    [class^="img_produs_tabel"] {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 11. Tipografie generala — corp text usor mai mare pe mobil */
    body {
        font-size: 14px;
        line-height: 1.55;
    }
    h1, .promo-nume { font-size: 1.4em !important; }
    h2 { font-size: 1.2em !important; }
    h3, .nav-title { font-size: 1.1em !important; }

    /* 12. Bara de sus pe mobil — regulile sunt la finalul fisierului
       (`.raris-topbar`). Blocul de aici tinta selectorii vechi
       `div[style*="blue1.jpg"] > .content1[...]`, care nu mai exista: antetul
       a fost rescris cu sigla + cos pe fundal alb, iar notificarea de cookie a
       trecut in footer. */

    /* --- Homepage: blocul de sus se stivuieste --- */
    /* Textul si videoul stateau in doua celule ale aceluiasi rand. Pe mobil,
       `display:block` pe tabel nu ajuta: randul si celulele raman celule, deci
       latimea se imparte in doua — textul ajungea pe doua treimi de ecran, iar
       videoul, fiind 100% dintr-o celula ingusta, iesea minuscul. */
    .raris-stack,
    .raris-stack > tbody,
    .raris-stack > tbody > tr,
    .raris-stack > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .raris-stack > tbody > tr > td + td {
        margin-top: 16px;
    }

    /* Indentarea de 40px a paragrafelor (mostenita de la <ol>) manaca 11% dintr-un
       ecran de 360px. */
    .text .raris-para {
        padding-left: 0 !important;
        margin: 0 0 14px !important;
        line-height: 1.6;
    }
    .text > .raris-para:first-of-type {
        font-size: 15px;
        line-height: 1.65;
    }

    /* Videoul: colturi rotunjite si un chenar discret. */
    iframe#ytplayer {
        border-radius: 6px;
        border: 1px solid #e2e6ea !important;
        margin: 4px 0 10px;
    }

    /* YouTube iframe in home content — fluid 16:9 */
    iframe#ytplayer,
    iframe[src*="youtube"] {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
        max-width: 100%;
    }

    /* Tabele home content (Firma Raris..., standarde) — block, full-width.
       Excluse: tabelele de date (.dates*, cosul, coloanele schele mobile) —
       ele au cap de tabel si trebuie sa ramana TABEL, cu scroll orizontal in
       .scroll-x. `display:block` pe ele ar lasa continutul taiat in dreapta,
       fara posibilitatea de a-l aduce in ecran. */
    .text > table:not(.cart-table):not(.dates):not(.dates_mobile):not(.dates_fatada):not(.smal-labels):not(.smal-col),
    .text table:not(.cart-table):not(.dates):not(.dates_mobile):not(.dates_fatada):not(.smal-labels):not(.smal-col) {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Imagini ISO 9001/14001 si rand 6 imagini la tema in home */
    .text img[width="300"] {
        max-width: 48% !important;
        height: auto !important;
    }
    .text img[width="152"],
    .text img[height="114"] {
        max-width: 30% !important;
        width: auto !important;
        height: auto !important;
    }

    /* Randul de miniaturi din homepage — grila, nu sir de inline-uri.
       Trebuie sa stea DUPA `.text img[height="114"]`, care pune
       `height:auto !important`: la specificitate egala castiga regula de jos. */
    .raris-galerie-mica {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 18px 0;
    }
    .raris-galerie-mica > a {
        display: block;
        line-height: 0;
    }
    .raris-galerie-mica > a > img {
        width: 100% !important;
        height: 120px !important;
        object-fit: cover;
        max-width: 100% !important;
        border-radius: 4px;
    }

    /* 13. Footer & nav-side — stacking */
    .nav-side {
        float: none !important;
        width: 100% !important;
    }
}

/* ---- Mic ecran (telefon portrait) — ajustari fine ---- */
@media (max-width: 480px) {
    body {
        font-size: 13.5px;
    }
    .hmtab .hmtablinks {
        font-size: 13px;
        padding: 8px 10px;
    }
    .title_produs h2 {
        font-size: 14px !important;
    }
}

/* ---- Lightbox legacy — full-screen pe mobil ---- */
@media (max-width: 1080px) {
    #lightbox, #imageContainer, .lb-outerContainer {
        max-width: 96vw !important;
        width: auto !important;
    }
    .lb-image {
        max-width: 96vw !important;
        height: auto !important;
    }
}

/* ---- Hamburger button + mobile drawer ---- */
/* Pe desktop ascunse complet. Apar doar sub 1080px. */
.raris-burger,
.raris-mobile-drawer,
.raris-mobile-overlay {
    display: none;
}

@media (max-width: 1080px) {

    /* Hamburger fix in dreapta-sus */
    .raris-burger {
        display: block;
        position: fixed;
        top: 8px;
        right: 8px;
        z-index: 10000;
        width: 44px;
        height: 44px;
        background: rgba(1, 68, 100, 0.92);
        border: 1px solid rgba(255,255,255,0.3);
        border-radius: 6px;
        cursor: pointer;
        padding: 10px 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    }
    .raris-burger span {
        display: block;
        width: 100%;
        height: 3px;
        margin: 3px 0;
        background: #fff;
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }
    /* Cand e deschis: animatie X */
    .raris-burger.open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .raris-burger.open span:nth-child(2) {
        opacity: 0;
    }
    .raris-burger.open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Drawer slide din dreapta */
    .raris-mobile-drawer {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 86vw;
        max-width: 360px;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        box-shadow: -4px 0 24px rgba(0,0,0,0.25);
        transform: translateX(100%);
        transition: transform .28s ease;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .raris-mobile-drawer.open { transform: translateX(0); }

    .raris-mobile-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid #e5e5e5;
        background: linear-gradient(180deg, #0272a7 0%, #013953 100%);
    }
    .raris-mobile-drawer-head img { height: 30px; }
    .raris-drawer-close {
        background: transparent;
        border: none;
        color: #fff;
        font-size: 28px;
        line-height: 1;
        padding: 0 6px;
        cursor: pointer;
    }

    .raris-mobile-nav {
        display: flex;
        flex-direction: column;
        padding: 6px 0 24px;
    }
    .raris-mobile-nav a {
        display: block;
        padding: 13px 18px;
        color: #013953;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 1px solid #f0f0f0;
        transition: background .15s ease;
    }
    .raris-mobile-nav a:hover,
    .raris-mobile-nav a:focus { background: #f4f8fb; }
    .raris-mobile-nav hr {
        border: none;
        border-top: 1px solid #ddd;
        margin: 8px 0;
    }

    /* ===== Accordion drawer mobile (hibrid: link + toggle ⌄) ===== */
    .raris-mobile-section {
        border-bottom: 1px solid #f0f0f0;
    }
    .raris-mobile-section-row {
        display: flex;
        align-items: stretch;
        width: 100%;
    }
    .raris-mobile-section-row > .raris-mobile-section-link {
        flex: 1 1 auto;
        border-bottom: 0;
        padding: 13px 18px;
        color: #013953;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
    }
    .raris-mobile-section-row > .raris-mobile-section-link:hover,
    .raris-mobile-section-row > .raris-mobile-section-link:focus {
        background: #f4f8fb;
    }
    .raris-mobile-toggle {
        flex: 0 0 48px;
        background: transparent;
        border: none;
        border-left: 1px solid #f0f0f0;
        color: #0272a7;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .raris-mobile-toggle:hover,
    .raris-mobile-toggle:focus {
        background: #f4f8fb;
        outline: none;
    }
    .raris-mobile-toggle .chev {
        display: inline-block;
        transition: transform .25s ease;
        line-height: 1;
    }
    .raris-mobile-section.open .raris-mobile-toggle .chev {
        transform: rotate(180deg);
    }
    .raris-mobile-sublist {
        list-style: none;
        margin: 0;
        padding: 0;
        background: #f4f8fb;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }
    .raris-mobile-section.open .raris-mobile-sublist {
        /* Max-height suficient pentru sectiunile mari (~150 produse) */
        max-height: 8000px;
    }
    .raris-mobile-sublist li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .raris-mobile-sublist a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px 8px 18px;
        color: #2c4a5e;
        font-size: 14px;
        font-weight: normal;
        text-decoration: none;
        border-bottom: 1px solid #e6edf3;
        line-height: 1.35;
    }
    .raris-mobile-sublist a:hover,
    .raris-mobile-sublist a:focus {
        background: #e8f0f7;
        color: #013953;
    }
    /* Header subcategorie (nume tab din DB) — NU e link, doar etichetă. */
    .raris-mobile-subgroup-head {
        display: block;
        list-style: none;
        padding: 8px 14px 6px;
        margin: 0;
        background: #dde8f0;
        color: #013953;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-top: 1px solid #b9cdda;
        border-bottom: 1px solid #b9cdda;
    }
    /* Primul header din lista (sub bara secțiunii) — fără border-top dublu. */
    .raris-mobile-sublist > li.raris-mobile-subgroup-head:first-child {
        border-top: none;
    }
    .raris-mobile-subgroup-item {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .raris-mobile-sublist-thumb {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        object-fit: contain;
        background: #fff;
        border: 1px solid #d8dde1;
        border-radius: 3px;
        /* Anuleaza regula generala 'img { max-width: 100% }' pentru .main_content
           — aici suntem in drawer (nu .main_content), dar tinem fix-width sigur. */
        max-width: 44px !important;
        min-width: 44px;
    }
    .raris-mobile-sublist-label {
        flex: 1 1 auto;
        min-width: 0;
        /* Permite wrap pe 2 randuri scurte fara sa rupa layout-ul. */
        overflow-wrap: anywhere;
    }
    /* Cand sectiunea nu are produse, padding identic cu link-urile simple. */
    .raris-mobile-section--no-toggle .raris-mobile-section-link {
        border-bottom: 1px solid #f0f0f0;
    }

    /* Overlay semi-transparent peste pagina */
    .raris-mobile-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease;
    }
    .raris-mobile-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    /* Cand drawer-ul e deschis blocheaza scroll-ul body-ului */
    body.raris-no-scroll { overflow: hidden; }

    /* Ascundem nav top legacy (.hmtab cu butoane) — folosim doar drawer-ul.
       Pastreaza prima .hmtab (Acasa+magazin link bar) ca informativ, sau
       o ascundem complet. Decizie: ascundem ambele, drawer-ul e single source. */
    /* Descendent, nu copil direct: barile de meniu sunt acum invelite intr-un
       <nav> (structura semantica), deci `.main > .hmtab` nu le mai prindea si
       reapareau pe telefon peste hamburger. */
    .main .hmtab {
        display: none !important;
    }
    /* Dropdown Despre noi (#div4) si div sectiuni — ascunse pe mobil
       (nav-ul mobil are toate link-urile in drawer; sectiunile cu tabouri
       nu au sens fara click pe nav-ul desktop). */
    #div4 {
        display: none !important;
    }
    /* Hide buttons (hmtab1 "Ascunde continutul...") sunt utile doar dupa
       click pe sectiune; pe mobil cu drawer-ul nu le folosim. */
    .hmtab1 {
        display: none !important;
    }

    /* Padding top pe body sa nu blocheze hamburger-ul header-ul */
    body {
        padding-top: 4px;
    }
}

@media (max-width: 480px) {
    .raris-burger {
        width: 40px;
        height: 40px;
        padding: 9px 7px;
    }
    .raris-mobile-drawer { width: 92vw; }
    .raris-mobile-nav a { font-size: 15px; padding: 12px 16px; }
}

/* ---- Galerie mobile (strip ORIZONTAL sub poza principala) ----
   Apare DOAR pe mobil. Pe desktop e ascunsa — galeria sidebar legacy
   in <td bgcolor=#eeeeee> ramane vizibila. */
.raris-gallery-h { display: none; }

@media (max-width: 1080px) {
    .raris-gallery-h {
        display: block;
        clear: both;
        margin: 12px 0;
        padding: 8px 0;
        background: #f5f5f5;
        border-top: 1px solid #d8dde1;
        border-bottom: 1px solid #d8dde1;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .raris-gallery-h .title_produs,
    .raris-gallery-h .sub_text {
        display: none !important;
    }
    .raris-gallery-h br { display: none !important; }
    .raris-gallery-h a {
        display: inline-block !important;
        margin: 0 4px !important;
        line-height: 0;
        vertical-align: top;
        float: none !important;
    }
    .raris-gallery-h img {
        width: 65px !important;
        height: auto !important;
        max-width: none !important;
        margin: 0 3px !important;
        border: 1px solid #aaa !important;
        border-radius: 3px;
        display: inline-block !important;
        float: none !important;
    }

    /* CRITIC: ascunde galeria sidebar legacy pe mobil cu specificitate
       suficient de mare ca sa bata regula `#principal td { display:block }`. */
    #principal td.desktop-gallery-cell,
    td.desktop-gallery-cell {
        display: none !important;
    }
}

/* ---- Smooth scroll & focus ring (accesibilitate) ---- */
html { scroll-behavior: smooth; }
a:focus-visible, button:focus-visible {
    outline: 2px solid #0272a7;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Varianta "schele mobile": tabelul 0 e columnar — fiecare varianta de produs
   e o COLOANA, iar in fiecare celula sta un tabel interior (175px etichetele,
   55px datele).

   Fara regulile de mai jos, regula generala de fluidizare le prindea si le
   punea `width:100%`; cum latimea celulei se calcula la randul ei din
   continut, coloana de etichete colapsa si textul se rupea caracter cu
   caracter pe verticala. Le fixam latimea si le lasam sa curga normal —
   scroll-ul orizontal ramane pe wrapperul .scroll-x.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    /* Exact ca pe desktop: latimile din atributele HTML (175 / 55), layout
       automat — coloana poate creste cat sa incapa cuvantul ("comanda" nu
       incape in 55px si cu `table-layout: fixed` se rupea pe 2 randuri, ceea
       ce decala toata coloana fata de etichete). */
    .main_content .scroll-x > table.dates_mobile table.smal-labels {
        width: 175px !important;
        min-width: 175px !important;
        max-width: none !important;
        table-layout: auto !important;
    }
    .main_content .scroll-x > table.dates_mobile table.smal-col {
        width: 55px !important;
        min-width: 55px !important;
        max-width: none !important;
        table-layout: auto !important;
    }
    /* Textul curge normal (regula generala din .scroll-x pune nowrap).
       ATENTIE: nu atinge padding, line-height sau height-urile din legacy —
       coloana de etichete si coloanele de date sunt tabele SEPARATE, aliniate
       intre ele doar prin inaltimile fixe (35/42/220px) ale randurilor. Orice
       schimbare de metrica doar pe mobil le-ar decala si etichetele nu ar mai
       corespunde cu valorile. La 175px/55px textul se rupe exact ca pe desktop. */
    .main_content .scroll-x > table.dates_mobile table.smal-labels td,
    .main_content .scroll-x > table.dates_mobile table.smal-col td {
        white-space: normal !important;
        /* `.main_content div` din overrides-urile inline seteaza
           `word-break: break-word`, care se MOSTENESTE pana in celule si taie
           cuvintele la mijloc. Il readucem la normal: la 175px/55px textul se
           rupe exact ca pe desktop. */
        word-break: normal !important;
        overflow-wrap: break-word !important;
        /* Metricile trebuie sa fie IDENTICE cu desktop: coloana de etichete si
           coloanele de date sunt tabele separate, aliniate doar prin inaltimile
           fixe din HTML (35/42/220px). Padding-ul mobil de 6px/10px aplicat de
           regula generala `.scroll-x td` le decala intre ele (etichetele ajung
           cu ~20px mai sus decat valorile). */
        padding: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
   Indicatia "trageti tabelul stanga-dreapta".

   Inserata de raris-mobile-nav.js DOAR inaintea tabelelor care chiar depasesc
   ecranul. Dupa prima tragere primeste .used si se estompeaza — nu ramane
   permanent in fata continutului.
   --------------------------------------------------------------------------- */
.raris-scroll-hint { display: none; }

@media (max-width: 1080px) {
    .raris-scroll-hint {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 10px 0 4px;
        padding: 9px 12px;
        background: #001853;
        color: #ffffff;
        border-radius: 4px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.3;
        text-align: left;
        transition: opacity .35s ease;
    }
    .raris-scroll-hint-arrow {
        font-size: 20px;
        line-height: 1;
        animation: raris-hint-swipe 1.4s ease-in-out infinite;
    }
    .raris-scroll-hint.used {
        opacity: .35;
    }
    .raris-scroll-hint.used .raris-scroll-hint-arrow {
        animation: none;
    }
    /* Umbra pe marginea din dreapta a tabelului — semnal ca mai e continut. */
    .main_content .scroll-x {
        background:
            linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)) left center,
            linear-gradient(to left, #ffffff 30%, rgba(255,255,255,0)) right center,
            radial-gradient(farthest-side at 0 50%, rgba(0,24,83,.25), rgba(0,0,0,0)) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(0,24,83,.25), rgba(0,0,0,0)) right center;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

@keyframes raris-hint-swipe {
    0%, 100% { transform: translateX(-3px); }
    50%      { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .raris-scroll-hint-arrow { animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Paginile de sectiune pe telefon: lista de randuri late, cu miniatura si
   sageata — nu grila. Ținta de atingere = tot randul.
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .raris-section-crumbs { padding: 10px 0 0; }
    .raris-section-head { padding: 8px 0 14px; margin-bottom: 16px; }
    .raris-section-head h1 { font-size: 26px; }
    .raris-section-lead { font-size: 14px; }

    /* Chip-urile de subcategorii: o singura linie care se trage lateral,
       ca sa nu impinga produsele sub doua ecrane de navigare. */
    .raris-section-jump {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px 20px;
        padding: 0 12px 6px;
        scrollbar-width: none;
    }
    .raris-section-jump::-webkit-scrollbar { display: none; }
    .raris-section-jump a { flex: 0 0 auto; font-size: 12px; padding: 9px 13px; }

    .raris-section-group { margin-bottom: 26px; }
    .raris-section-group-title {
        position: sticky; top: 0; z-index: 5;
        font-size: 13px; padding: 10px 12px; margin: 0 -12px 12px;
    }
    .raris-section-cat-title { font-size: 12.5px; margin: 14px 0 8px; }

    .raris-product-list { display: block; margin: 0; }
    .raris-product-item { border-bottom: 1px solid #e4ebf1; }
    .raris-product-item:last-child { border-bottom: 0; }
    .raris-product-item a {
        border: 0; background: transparent; padding: 12px 2px; gap: 14px;
        min-height: 64px;
    }
    .raris-product-item a:active { background: #eef3f8; }
    .raris-product-thumb { width: 64px; height: 64px; }
    .raris-product-thumb img { max-width: 64px; max-height: 64px; }
    .raris-product-body { flex: 1 1 auto; }
    .raris-product-name { font-size: 13px; }
    .raris-product-chev {
        display: block; flex: 0 0 auto;
        font-size: 26px; line-height: 1; color: #b0bec5; padding-left: 4px;
    }
    .raris-section-back a { display: block; text-align: center; padding: 14px 18px; }

    /* Listele de manuale (pagina Mentenanta): legacy pune titlul si marimea
       fisierului in doua celule pe acelasi rand, cu latimi fixe (425/85px).
       Pe telefon coloana din dreapta se strange la 3 randuri ("(305 kb, *.pdf)").
       Le stivuim: titlul sus, marimea dedesubt, discret. */
    .main_content table.table_single_all { width: 100% !important; float: none !important; }
    .main_content table.table_single_all td {
        display: block;
        width: auto !important;
        height: auto !important;
        text-align: left !important;
        padding: 10px 12px 2px !important;
    }
    .main_content table.table_single_all td + td {
        padding: 0 12px 10px !important;
        font-size: 11px;
        color: #6b7a89;
    }

    /* Galerii: doua miniaturi pe rand pe telefon. */
    .raris-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .raris-gallery-links { grid-template-columns: 1fr; }
    .raris-gallery-links a { padding: 10px 8px; }

    .raris-section-intro { font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
    /* Videoclipurile: doua pe rand pe telefon, cu imaginea fluida. */
    .raris-video-row { gap: 10px; }
    .raris-video-card { flex: 1 1 calc(50% - 5px); max-width: calc(50% - 5px); }
    .raris-video-card img { width: 100%; }
}


/* ---------------------------------------------------------------------------
   Bara de sus pe telefon: sigla + cos, cu loc liber la dreapta pentru butonul
   hamburger (fixed, 44px + 8px margine).
   --------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .raris-topbar {
        padding: 6px 62px 6px 8px;
        min-height: 52px;
        gap: 10px;
    }
    .raris-topbar-logo img { height: 34px; }
    .raris-topbar-cart img { height: 30px; }
    .raris-topbar-cart { font-size: 11px; gap: 6px; }
    .raris-footer { margin: 20px auto; padding: 14px 12px 0; }
    .raris-footer-cookie { font-size: 11px; }
}