/*
 * Computer header layout styles.
 * Extracted from module/computer/layout/header.phtml during audit Step 6a.
 *
 * PHP-interpolated brand colours migrated to tokens:
 *   toggleLeftSidenavColor → var(--lb-toggle-icon)
 *   adjustBrightness(toggleLeftSidenavColor, -30) → var(--lb-toggle-icon-hover)
 *   firstColor → var(--lb-brand)
 *   secondColor → var(--lb-brand-alt)
 *
 * Background image (sidenav-top-bg-min.png) referenced with relative URL
 * from this CSS file location.
 */

/*
 * Hamburger sidenav toggle (top-left of the chrome). Production renders
 * this at 26px (because BS3.4.1 CDN sets `html { font-size: 10px }` so
 * the template's inline `2.6rem` resolves to 26px). Dev no longer loads
 * BS3 so we hardcode the px target instead of relying on the implicit
 * 10x base. Colour comes from `--lb-toggle-icon` token (head.tokens.phtml).
 */
.toggleLeftSidenav{
    font-size: 26px;
    color: var(--lb-toggle-icon);
    cursor: pointer;
}

.toggleLeftSidenav:hover{
    color: var(--lb-toggle-icon-hover);
}

.panelLinks{
    text-align: right;
}

/*
 * Production: `.panelLinks a` at 1.3rem → 13px, `.panelLinks .fa` at
 * 3rem → 30px. Hardcoded here in dev because we no longer get the BS3
 * `html { font-size: 10px }` rule for free.
 */
.panelLinks a{
    font-size: 13px;
    font-weight: 500;
    color: var(--lb-toggle-icon);
    text-decoration: none;
}

.panelLinks .fa{
    font-size: 30px;
    padding: 3px;
}

.panelLinks a:hover{
    text-decoration: underline;
    color: var(--lb-toggle-icon-hover);
    cursor: pointer;
}

.sticky{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
}

/*
 * Header wrapper sits ABOVE the secondary sticky (#headerProductInfo-
 * Container, also `.sticky` → z-index 200). Without this override the
 * cart hover popup (`.cart-preview`, z-index 1000) lives inside
 * #headerWrapper's stacking context — its 1000 only competes WITHIN
 * the wrapper's 200. With both stickies tied at 200, DOM order wins
 * and the add-to-cart bar (which comes later in the source) renders
 * on top of the cart popup. Caught 2026-05-21.
 */
#headerWrapper.sticky{
    z-index: 1100;
}

.submenu-items{
    line-height: 23px;
    padding-left: 14px;
}

#leftSidenavWrapper{
    max-height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

#registerResellerAlert{
    line-height: 34px;
    background: var(--lb-brand);
    z-index: 200;
    color: #FFF;
}

#registerResellerAlert:hover{
    background: var(--lb-brand-alt);
}

#registerResellerAlert a{
    color: #FFF;
}

#registerResellerAlert a:hover{
    color: #f3f3f3;
    text-decoration: underline;
}

#header{
    height: 130px;
    margin: 0 !important;
}

/*
 * Social network icon strip (blog/facebook/instagram).
 * Production: 2rem → 20px (BS3 html=10px). Hardcoded for dev.
 */
.snItem{
    font-size: 20px;
    padding: 4px 3px;
    line-height: 46px;
}

.snItem .fab,
.snItem .fas{
    color: var(--lb-toggle-icon);
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
}

.snItem .fab:hover,
.snItem .fas:hover{
    color: var(--lb-toggle-icon-hover);
    cursor: pointer;
}

#leftSidenavWrapper{
    background: url('../../../img/sidenav-top-bg-min.png') #4D4D4D !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
}

/* ============================================================ */
/* MINI-CART PREVIEW (hover popup on the cart icon)              */
/* ============================================================ */
/*
 * Anchored to #cartPreviewWrapper (which holds the cart <a>).
 * Hidden by default; shown on hover via opacity + visibility on
 * the wrapper :hover state — pointer-events stays off so the
 * empty popup doesn't catch mouse events when hidden.
 *
 * @media (hover: hover) limits the auto-show to devices that
 * support real hover (desktop + mouse laptops). On touch the
 * popup stays hidden and the icon click goes straight to /cart/
 * — same behaviour as before this feature.
 */
#cartPreviewWrapper {
    position: relative;
}

.cart-preview {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 360px;
    background: var(--lb-bg);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius);
    box-shadow: var(--lb-shadow-lg);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s linear;
    pointer-events: none;
    color: var(--lb-text);
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
}

/*
 * Invisible hover bridge — covers the gap between the cart icon and the
 * popup so the cursor doesn't "fall through" mid-travel and hide the
 * popup. Sits inside .cart-preview so it counts toward .cart-preview:hover.
 */
.cart-preview::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    height: 12px;
}

/*
 * Visual arrow — diamond rotated 45° that reads as a tooltip-style
 * pointer toward the cart icon. Aligned under the icon (right offset
 * tuned to the icon's position in #cartPreviewWrapper).
 */
.cart-preview::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 28px;
    width: 11px;
    height: 11px;
    background: var(--lb-bg);
    border-top: 1px solid var(--lb-border);
    border-left: 1px solid var(--lb-border);
    transform: rotate(45deg);
}

@media (hover: hover) {
    #cartPreviewWrapper:hover .cart-preview,
    .cart-preview:hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Empty state */
.cart-preview-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--lb-text-muted);
}
.cart-preview-empty-icon {
    font-size: 28px;
    color: var(--lb-text-muted);
    opacity: 0.5;
    margin-bottom: 10px;
    display: block;
}
.cart-preview-empty-text {
    margin: 0;
    font-size: 14px;
}

/* Header band */
.cart-preview-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--lb-border);
    font-weight: 600;
    font-size: 14px;
    color: var(--lb-text);
}
.cart-preview-header i {
    color: var(--lb-brand);
}

/* Items list — scrollable when >5 items */
.cart-preview-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
.cart-preview-item + .cart-preview-item {
    border-top: 1px solid var(--lb-border);
}
.cart-preview-item-link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    color: var(--lb-text);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
/*
 * Whole-item hover: only the description shifts to the accent (orange
 * on LojaBrother). SKU keeps its brand colour — it's an identifier, not
 * a click affordance. `!important` on text-decoration because BS4
 * reboot's `a:hover` has equal specificity (0,0,1,1) and would
 * re-introduce the underline.
 */
.cart-preview-item-link:hover,
.cart-preview-item-link:hover .cart-preview-item-desc,
.cart-preview-item-link:focus,
.cart-preview-item-link:focus .cart-preview-item-desc {
    color: var(--lb-accent);
    text-decoration: none !important;
}
.cart-preview-item-link:hover,
.cart-preview-item-link:focus {
    background: var(--lb-surface);
}
.cart-preview-item-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--lb-bg);
    border: 1px solid var(--lb-border);
    border-radius: 4px;
    flex-shrink: 0;
}
.cart-preview-item-info {
    flex: 1;
    min-width: 0;
}
.cart-preview-item-sku {
    font-weight: 700;
    font-size: 12px;
    color: var(--lb-brand);
    letter-spacing: 0.2px;
    margin-bottom: 2px;
}
.cart-preview-item-desc {
    font-size: 12px;
    line-height: 1.35;
    color: var(--lb-text);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cart-preview-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.cart-preview-item-qty {
    color: var(--lb-text-muted);
}
.cart-preview-item-subtotal {
    font-weight: 700;
    color: var(--lb-price-promo);
}

/* Footer — subtotal + CTAs */
.cart-preview-footer {
    border-top: 1px solid var(--lb-border);
    padding: 14px 16px;
    background: var(--lb-surface);
    border-bottom-left-radius: var(--lb-radius);
    border-bottom-right-radius: var(--lb-radius);
}
.cart-preview-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
    font-size: 14px;
}
.cart-preview-total-label {
    color: var(--lb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}
.cart-preview-total-value {
    font-weight: 700;
    color: var(--lb-brand);
    font-size: 16px;
}
.cart-preview-actions {
    display: flex;
    gap: 8px;
}
.cart-preview-action {
    flex: 1;
    text-align: center;
}

/*
 * Mini-cart action buttons — never underline (override the BS4 `a:hover`
 * reboot). Otherwise both buttons keep their default tenant behaviour
 * from bootstrap-custom.css (btn-lojabrother / btn-outline-lojabrother
 * etc.).
 */
.cart-preview-action,
.cart-preview-action:hover,
.cart-preview-action:focus {
    text-decoration: none !important;
}