/* ========================================================================
   Astalias Visual Builder — Frontend Header
   ======================================================================== */

.vb-header { width: 100%; }
.vb-row {
    width: 100%;
}
.vb-row--boxed .vb-row__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}
.vb-row--full .vb-row__inner {
    padding: 0 16px;
}
.vb-row__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
}

/* Alignment via flex auto-margin */
.vb-comp { display: flex; align-items: center; }
.vb-align-center { margin-left: auto; margin-right: auto; }
.vb-align-right { margin-left: auto; }
.vb-align-left { /* default */ }

/* Components */
.vb-logo img { display: block; max-height: 50px; width: auto; }
.vb-search { display: flex; align-items: center; gap: 4px; flex: 1; max-width: 480px; }
.vb-search__input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 14px;
}
.vb-search__button {
    padding: 8px 14px;
    background: #1d4ed8;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
.vb-cart { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: inherit; position: relative; }
.vb-cart__icon { font-size: 20px; }
.vb-cart__counter {
    background: #b91c1c;
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    min-width: 18px;
    text-align: center;
}
.vb-account { list-style: none; display: flex; gap: 12px; margin: 0; padding: 0; font-size: 13px; }
.vb-account a { color: inherit; text-decoration: none; }
.vb-account a:hover { text-decoration: underline; }
.vb-wishlist { color: inherit; text-decoration: none; font-size: 14px; }
.vb-wishlist__counter { font-size: 11px; opacity: .7; }
.vb-compare { color: inherit; text-decoration: none; font-size: 13px; }
.vb-currency, .vb-lang { font-size: 13px; padding: 2px 6px; }
.vb-welcome { font-size: 13px; }
.vb-social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.vb-social a { display: inline-block; width: 28px; height: 28px; line-height: 28px; text-align: center; border-radius: 50%; background: #f3f4f6; color: inherit; text-decoration: none; }
.vb-spacer { display: inline-block; }

.vb-comp--fallback {
    padding: 4px 10px;
    background: #fef3c7;
    border: 1px dashed #b45309;
    border-radius: 4px;
    color: #78350f;
    font-size: 12px;
}

/* Responsive visibility */
@media (max-width: 767px) { .vb-hide-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1199px) { .vb-hide-tablet { display: none !important; } }
@media (min-width: 1200px) { .vb-hide-desktop { display: none !important; } }

/* Preview mode: subtle hover highlights on components */
.vb-header--preview .vb-comp { outline: 1px dashed transparent; transition: outline-color .15s; }
.vb-header--preview .vb-comp:hover { outline-color: rgba(29, 78, 216, .35); }
.vb-header--preview .vb-row { outline: 1px dashed transparent; transition: outline-color .15s; }
.vb-header--preview .vb-row:hover { outline-color: rgba(29, 78, 216, .25); }