/** * Header mini-cart icon + dropdown (Stage 7 — global chrome, every page). * * Sits in .nav-actions next to the existing .nav-mail / .nav-cta, so it * reuses that row's spacing (gap set on .nav-actions in styles1.css) and * matches .nav-social's circular-icon-button look (33px, translucent * white border, same hover treatment) since .topbar is always the dark * navy background regardless of scroll state. * * Stage 7 fix: .nav-cart-panel is `position:fixed` and, at runtime, * nav-cart.js re-parents the panel element to the first time it * runs. This is required because .topbar has `backdrop-filter` (for the * frosted sticky-nav effect), and per spec `backdrop-filter` — like * `transform`/`filter` — establishes a new containing block for any * `position:fixed` descendant. Left nested inside .topbar, the panel's * `fixed` coordinates resolved against the ~70px-tall header box instead * of the real viewport, pinning it almost entirely off-screen above the * page on first open. Once the panel lives directly under , `fixed` * resolves against the true viewport again; nav-cart.js computes and sets * its `top`/`right` (desktop dropdown) or leaves them to this file's * mobile bottom-sheet media query. * * @package Maritime_World */ .nav-cart{position:relative} .nav-cart-btn{ display:inline-flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:50%; background:transparent;border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.9);cursor:pointer;position:relative; transition:background .2s ease,border-color .2s ease,color .2s ease; } .nav-cart-btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.45);color:#fff} .nav-cart-btn svg{width:19px;height:19px} .nav-cart-count{ position:absolute;top:-4px;right:-4px; min-width:17px;height:17px;padding:0 4px; border-radius:999px;background:var(--gold-500,#C9A24B);color:#001226; font-family:var(--font-display);font-weight:800;font-size:10px;line-height:17px; text-align:center;box-shadow:0 0 0 2px #0A2F6E; } /* position:fixed on purpose (see file docblock) — nav-cart.js sets the actual top/right inline once the panel is re-parented to , so these are just sane pre-JS defaults and are never relied on visually. */ .nav-cart-panel{ position:fixed;top:70px;right:16px;z-index:80; width:320px;max-width:calc(100vw - 32px); background:#fff;color:var(--ink-900,#0A1A3D); border:1px solid var(--ink-100,#E2E6EC);border-radius:var(--radius-card,16px); box-shadow:var(--shadow-card,0 8px 28px -12px rgba(10,26,61,.28)); padding:18px; } .nav-cart-panel-head{ font-family:var(--font-display);font-weight:800;font-size:13px; letter-spacing:.04em;text-transform:uppercase;color:var(--ink-700,#2A3855); margin-bottom:12px; } .nav-cart-items{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto} .nav-cart-item{ display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:baseline; font-size:13.5px;color:var(--ink-900,#0A1A3D); } .nav-cart-item-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-cart-item-qty{color:var(--ink-500,#5A6679);font-size:12.5px} .nav-cart-item-price{font-weight:700;color:#114f99;white-space:nowrap} .nav-cart-empty{margin:6px 0 0;font-size:13.5px;color:var(--ink-500,#5A6679)} .nav-cart-foot{margin-top:14px;padding-top:14px;border-top:1px solid var(--ink-100,#E2E6EC)} .nav-cart-total{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink-900,#0A1A3D);margin-bottom:12px} .nav-cart-view{display:flex;align-items:center;justify-content:center;width:100%;text-align:center} /* Mobile bottom-sheet. nav-cart.js clears any inline top/right it set for the desktop dropdown whenever this breakpoint is active, so this rule's top/left/right/bottom always win here. */ @media(max-width:560px){ .nav-cart-panel{top:auto;bottom:0;left:0;right:0;width:auto;max-width:none;border-radius:20px 20px 0 0} }