/*
GUÍA DE LECTURA DEL CÓDIGO | styles/appearance-logo.css
Responsabilidad: Estilos de presentación de logotipos en la tienda.

Recorrido sugerido: estilos base; componentes; estados; variantes responsivas.
ATENCIÓN: el orden de las reglas forma parte de la cascada CSS y se mantuvo intacto.
Condiciones responsivas detectadas: max-width: 900px; max-width:900px

Seguridad: no se movió, eliminó ni reescribió ningún bloque ejecutable.
Este mapa orienta la lectura; el archivo mantiene su orden de ejecución original.
*/
/* Solo reemplaza la marca cuando se selecciona imagen o texto personalizado. */
html body header.header-main[data-header-logo-mode="none"] .logo {
    visibility: hidden !important;
    pointer-events: none;
}
html body header.header-main[data-header-logo-mode] {
    height: auto;
    min-height: var(--design-header-height-desktop, 100px);
}
html body header.header-main[data-header-logo-mode] .logo {
    display: block;
    width: var(--appearance-logo-width);
    min-width: 0;
    max-width: min(100%, 52vw);
    white-space: normal;
    line-height: 1.15;
    text-decoration: none;
}
/* Corre solo el enlace/logo visual sin tocar el grid ni el reparto de acciones.
   Los límites de desplazamiento se normalizan por dispositivo en JS y PHP. */
html body header.header-main[data-header-logo-mode="image"] .logo {
    position: relative;
    left: var(--appearance-logo-position-x, 0px);
    top: var(--appearance-logo-position-y, 0px);
}
html body header.header-main[data-header-logo-mode="image"] .header-brand-logo {
    display: block;
    /* Prevalece frente al ancho genérico del estilo de Apariencia solamente
       cuando el usuario eligió usar un logo gráfico. */
    width: 100% !important;
    height: auto;
    max-width: 100% !important;
    max-height: var(--appearance-logo-image-height);
    object-fit: contain;
    filter: none;
}
/* La imagen puede estirarse en sus dos ejes pero respeta los límites originales
   de ancho (52vw/44vw) y altura (máximo 160px) del encabezado. */
html body header.header-main[data-header-logo-mode="image"][data-header-logo-stretch="true"] .header-brand-logo {
    width: 100% !important;
    height: var(--appearance-logo-image-height) !important;
    max-width: 100% !important;
    max-height: 160px !important;
    object-fit: fill !important;
    aspect-ratio: auto !important;
}
html body header.header-main[data-header-logo-mode="image"] .header-brand-text,
html body header.header-main[data-header-logo-mode="text"] .header-brand-logo {
    display: none;
}
html body header.header-main[data-header-logo-mode="text"] .logo .header-brand-text {
    display: block;
    font-family: var(--appearance-logo-font-family);
    font-size: var(--appearance-logo-font-size);
    font-weight: var(--appearance-logo-font-weight);
    font-style: var(--appearance-logo-font-style);
    color: var(--appearance-logo-color);
    letter-spacing: var(--appearance-logo-letter-spacing);
    text-transform: var(--appearance-logo-text-transform);
    text-align: var(--appearance-logo-text-align);
    text-shadow: var(--appearance-logo-text-shadow);
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 900px) {
    html body header.header-main[data-header-logo-mode] { min-height: var(--design-header-height-mobile, 82px); }
    html body header.header-main[data-header-logo-mode] .logo { max-width: min(100%, 44vw); }
}

html body header.header-main:not([data-header-logo-mode]) .header-brand-logo { display:none; }
html body header.header-main:not([data-header-logo-mode]) .header-brand-text { display:block; font-size:32px; font-weight:800; line-height:1.1; }
@media(max-width:900px) { html body header.header-main:not([data-header-logo-mode]) .header-brand-text { font-size:24px; } }