/************************************************************/
/* emx_nav_right.css — AudioStereo 2026 (OPTIMIZED RESYS)  */
/************************************************************/

/* --- 1. HTML TAG STYLES (ORIGINAL DESKTOP) --- */
body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.166;
    margin: 0;
    padding: 0;
    background: #ccc url(../bg_grad.webp) fixed;
    font-weight: normal;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* OPTIMIZARE RENDERING: Textul apare instantaneu folosind un font de sistem până se încarcă cel principal */
    font-display: swap; 
}

a:link,
a:visited {
    color: #005FA9;
    text-decoration: none;
}

h1 {
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    color: #555;
    text-align: left;
    text-shadow: 0.5px 0.5px #888;
    margin: 0;
    padding: 0;
}

h2 {
    font-weight: bold;
    font-size: 114%;
    font-family: Arial, sans-serif;
    color: #006699;
    margin: 0;
    padding: 0;
}

h3 {
    font-weight: bold;
    font-size: 100%;
    font-family: Arial, sans-serif;
    color: #334d55;
    margin: 0;
    padding: 0;
}

h3.model-link {
    font-size: 1.1em;
    font-weight: normal;
    margin: 0.4em 0 0.6em;
    color: #333;
}

h4,
h5 {
    font-size: 100%;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

h4 { color: #333; }
h5 { color: #334d55; }

ul { list-style-type: square; }
ul ul { list-style-type: disc; }
ul ul ul { list-style-type: none; }

form { margin: 0; padding: 0; }

label {
    font-weight: bold;
    font-size: 1em;
    font-family: Arial, sans-serif;
    color: #334d55;
}

input { font-family: Arial, sans-serif; }

/* --- 2. LAYOUT & CONTAINERS --- */
#pagecell1 {
    position: absolute;
    top: 85px;
    left: 2%;
    right: 2%;
    width: 96%;
    background-color: #fff;
}

#tl {
    position: absolute;
    top: -1px;
    left: -1px;
    margin: 0;
    padding: 0;
    z-index: 100;
}

#tr {
    position: absolute;
    top: -1px;
    right: -1px;
    margin: 0;
    padding: 0;
    z-index: 100;
    height: 6px;
    width: 6px;
}

#masthead {
    position: absolute;
    top: 0;
    left: 2%;
    right: 2%;
    width: 96%;
}

#pageNav {
    float: right;
    width: 178px;
    padding: 0;
    background-color: #F5f7f7;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: small;
    font-family: Verdana, sans-serif;
}

#content {
    padding: 0 10px 0 0;
    margin: 0 178px 0 0;
    border-right: 1px solid #ccd2d2;
}

#siteName {
    margin: 0;
    padding: 16px 0 8px 0;
    color: #fff;
    font-weight: normal;
}

#utility {
    font-size: 75%;
    font-family: Verdana, sans-serif;
    position: absolute;
    top: 16px;
    right: 0;
    color: #919999;
}

#utility a { color: #fff; }
#utility a:hover { text-decoration: underline; }

.typewriter {
    font-family: Consolas, monospace;
    font-size: 0.9em;
    white-space: normal;
}

#pageName {
    padding: 0 0 14px 10px;
    margin: 0;
    border-bottom: 1px solid #ccd2d2;
}

#pageName h2 {
    font-weight: 900 !important;
    font-size: 1.1rem !important;
    color: #000 !important;
    -webkit-text-stroke: 0.2px #000;
    text-shadow: 0.5px 0.5px 0px #888 !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

#pageName img {
    position: absolute;
    top: 0;
    right: 3px;
    padding: 0;
    margin: 0;
}

#AudioStereo_logo {
    display: block;
    width: 95%;
    max-width: 169px;
    height: auto;
    object-fit: contain;
    float: right;
    transform: translate(-7px, 2px);
}

/* --- 3. GLOBAL NAVIGATION (DESKTOP) --- */
#globalNav {
    position: relative;
    width: 100%;
    height: 32px;
    color: #ccc;
    padding: 0;
    margin: 0;
    background-image: url(../glbnav_background.gif);
}

#globalNav img { margin-bottom: -4px; }
#gnl { position: absolute; top: 0; left: 0; }
#gnr { position: absolute; top: 0; right: 0; }

#globalLink {
    position: absolute;
    top: 7px;
    height: 22px;
    padding: 0;
    margin: 0;
    left: 5px;
    z-index: 100;
    width: 872px;
}

a.glink,
a.glink:visited {
    font-size: small;
    color: #000;
    font-weight: bold;
    margin: 0;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
}

a.glink:hover {
    background-image: url(../glblnav_selected.gif);
    text-decoration: none;
}

.skipLinks { display: none; }

/* --- 4. COMPONENTS & SIDEBAR ITEMS --- */
#search {
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 101;
}

#search input {
    font-size: 70%;
    margin: 0 0 0 10px;
}

#search a:link,
#search a:visited {
    font-size: 80%;
    font-weight: bold;
}

#search a:hover { margin: 0; }

#breadCrumb {
    padding: 5px 0 5px 10px;
    font-size: small;
    font-family: Verdana, sans-serif;
    color: #666666; 
    line-height: 1.2;
    display: block;
}

#breadCrumb a,
#breadCrumb a:hover {
    color: #666666; 
    display: inline-block;
}

#breadCrumb a:hover {
    color: #005FA9;
    text-decoration: underline;
}

.feature {
    padding: 0 0 10px 10px;
    font-size: 80%;
    min-height: 200px;
}

.feature h3 {
    font-weight: bold;
    font-size: 175%;
    font-family: Arial, sans-serif;
    color: #000;
    padding: 30px 0 5px 0;
}

.feature img {
    float: none;
    padding: 0;
}

.story {
    padding: 10px 0 0 10px;
    font-size: small;
    color: #666;
}

.story h3 {
    font-weight: bold;
    font-size: 125%;
    font-family: Arial, sans-serif;
    color: #000;
}

.story p { padding: 0 0 10px 0; }

.story a.capsule {
    font-weight: bold;
    font-size: 1em;
    font-family: Arial, sans-serif;
    color: #005FA9;
    display: block;
    padding-bottom: 5px;
}

.story a.capsule:hover { text-decoration: underline; }
td.storyLeft { padding-right: 12px; }

#siteInfo {
    clear: both;
    border-top: 1px solid #ccc;
    font-size: small;
    color: #595959; 
    padding: 10px;
    margin-top: 0;
}

#siteInfo img {
    padding: 4px 4px 4px 0;
    vertical-align: middle;
}

#sectionLinks {
    margin: 0;
    padding: 0;
    text-align: left;
}

#sectionLinks h3 {
    padding: 10px 0 2px 10px;
    border-bottom: 1px solid #ccc;
}

#sectionLinks a:link,
#sectionLinks a:visited {
    display: block;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
    background-image: url(../bg_nav.jpg);
    font-weight: bold;
    padding: 3px 0 3px 10px;
    color: #21536A;
}

#sectionLinks a:hover {
    border-top: 1px solid #ccc;
    background-color: #DDEEFF;
    background-image: url(../glblnav_selected.gif);
    text-decoration: none;
    background-position: center;
}

.relatedLinks {
    margin: 0;
    padding: 0 0 10px 10px;
    border-bottom: 1px solid #ccc;
}

.relatedLinks h3 {
    padding: 10px 0 2px 0;
    text-align: left;
}

.relatedLinks a {
    display: block;
    text-align: left;
}

#advert { padding: 19px; }
#advert img { display: block; }

#product_price_red {
    color: #F00;
    font-weight: bold;
    font-size: large;
    font-family: Georgia, "Times New Roman", Times, serif;
}

/* ========================================================================= */
/* --- 5. RESPONSIVE LAYER — STRICT SMARTPHONE ONLY (OPTIMIZED 2026)      --- */
/* ========================================================================= */
@media(max-width:768px){

/* 5.1 RESET STRUCTURĂ ȘI CONTAINERE GENERALE */
body, #pagecell1, #content, .feature, .story {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    /* OPTIMIZARE CACHE: Forțează procesorul grafic (GPU) să randeze pagina, lăsând scroll-ul ultra-fluid */
    will-change: transform;
}

#pagecell1 {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

#content {
    margin: 0 !important;
    border-right: none !important;
}

#masthead {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* 5.2 GLOBAL NAVIGATION & UTILITIES */
#globalNav {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#globalLink {
    position: static !important;
    width: 100% !important; 
    /* Am redus padding-ul stâng de la 8px la 5px ca să tragem tot blocul de butoane mai la stânga, fix în linie cu "AudioStereo" din breadcrumb */
    padding: 0 0 0 3px !important;    
    text-align: left !important;
    float: none !important;
    display: flex !important;          
    align-items: center !important;     
    flex-wrap: wrap !important;         
    box-sizing: border-box !important;
    min-height: 32px !important;        
}

#globalLink a.glink {
    font-size: .80rem !important;
    line-height: 1.4rem !important;
    display: inline-block !important;
    padding: 2px 8px !important;
    margin-bottom: 0 !important;        
    /* FENȚA CORRIGATĂ: Folosim transform Y pentru a coborî textul la pixel, fără să afectăm structura sau linia de jos a bazei */
    transform: translateY(2px) !important; 
    border-right: 1px solid #ccc !important;
}

#globalLink a.glink:last-child {
    border-right: none !important;
}

/* Ascundere elemente decorative sau imagini de colț Dreamweaver */
#gnl, #gnr, #tl, #tr {
    display: none !important;
}

/* 5.3 BRAND LOGO & PAGINATION NAV */
#AudioStereo_logo {
    width: 114px !important;
    height: auto !important;
    float: none !important;
    display: block !important;
    margin: 32px auto 10px auto !important;
    transform: none !important;
    padding-right: 5px !important;
}

#pageNav {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 10px 0 !important;
    border-left: none !important;
    border-bottom: 1px solid #ccc !important;
    padding-right: 5px !important;
}

#pageNav img {
    display: block !important;
    margin: 10px auto !important;
}

#pageNav h3, 
#pageNav a {
    display: block !important;
    text-align: center !important;
    margin: 6px auto !important;
    font-size: .85rem !important;
}

/* 5.4 ELEMENTS & TYPOGRAPHY */
#breadCrumb {
    font-size: .72rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    direction: rtl !important;
    unicode-bidi: plaintext !important;
    text-align: left !important;
    float: none !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 10px !important;
    height: auto !important;
}

#breadCrumb a, 
#breadCrumb a:hover {
    display: inline-block !important;
}

#pageName h1 {
    font-size: .97rem !important;
    line-height: 1.22 !important;
    margin: 6px 0 4px 0 !important;
    
    /* TRUCUL 1: Forțăm o îngroșare extrem de agresivă pe ecranele mobile reale */
    font-weight: 900 !important; 
    -webkit-text-stroke: 0.3px #000; /* Desenează o micro-linie neagră de contur pentru contrast */
    
    /* TRUCUL 2: Umbra de desktop adusă forțat pe mobil (valori dense care nu pot fi ignorate de procesor) */
    text-shadow: 0.5px 0.5px 0px #888 !important; 
    
    /* RETAIN LIZIBILITATE: Împiedică browserul mobil să aplice estompare (blur) pe font */
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: subpixel-antialiased !important;
}

.feature h2,
#content h2 {
    font-size: .8rem !important;
    text-align: center !important;
    margin: 10px auto !important;
}

#content p, #content li, #content td p, #content td li,
.feature p, .feature li, .feature td p, .feature td li,
.story p, .story li {
    text-align: inherit !important;
}

#product_price_red {
    text-align: center !important;
    display: block !important;
    margin: 10px auto !important;
}

/* 5.5 STANDARDIZARE INTELIGENTĂ TABELE ȘI SUB-TABELE DE PRODUSE */

/* Regula A: Tabelele de conținut din pagină devin fluide și native */
table {
    width: 100% !important;
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.feature table {
    width: 100% !important;
    max-width: 590px !important; /* Limitează extinderea artificială pe ecrane intermediare */
}

/* Regula B: Sub-tabelele cu mini-iconițe (curățate anterior de PHP) */
.subtabel-produse {
    display: table !important;
    width: 100% !important;
    table-layout: auto !important; /* Forțează browserul să aloce spațiu flexibil în funcție de mărimea pozei */
    margin: 12px auto !important;
}

/* Regula C: Celulele de produse devin perfect proporționale și aliniate la sol */
.subtabel-produse td {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: bottom !important; /* Garantează linia de sol comună pentru iconițe */
    padding: 6px !important;
    white-space: normal !important;
}

/* Regula D: Imaginile produselor își păstrează rezoluția fără a se deforma */
.feature table img {
    display: inline-block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
    content-visibility: auto;
    /* OPTIMIZARE VITEZĂ: Imaginile se decodează în fundal, eliminând micro-înghețurile paginii */
    decoding: async;
}

/* Centrare automată logouri branduri, reclame și bannere speciale */
img[src*="brand"],
img[src*="brands"],
img[src*="special"],
img[src*="cinemagia"] {
    display: block !important;
    margin: 15px auto !important;
}

/* Excepție lizibilitate recenzii: textul listelor din tabele rămâne ordonat la stânga */
.feature table td ul {
    text-align: left !important;
}

} /* ÎNCHIDERE RESPONSIVE LAYER */