/* Cartly main navbar — styles for partials/navbar.blade.php.
   Self-contained on purpose: this loads on both layout pages (cartly.css, --purple/--lime) and on
   the standalone homepage (home.css, --pd/--p/--lime), which define different variable names, so
   every value here is literal. All visual classes are namespaced cnav-* so the older .header/.nav
   rules still sitting in cart.css and home.css cannot reach into it. */

.cnav { position:sticky; top:0; z-index:60; background:#2d006f; color:#fff; box-shadow:0 4px 20px rgba(35,0,90,.13); }
.cnav *, .cnav *::before, .cnav *::after { box-sizing:border-box; }
/* max-width:none and min-width defeat the sitewide `img,svg,video{max-width:100%}` rule, which
   otherwise lets these icons be squeezed by their flex/grid parents (the search magnifier was
   collapsing to 7px wide on layout pages). flex:none does not help inside a grid parent. */
.cnav svg { width:17px; height:17px; min-width:17px; max-width:none; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* One flex row. It is allowed to wrap: nothing in the bar may be clipped at any width. */
.cnav-inner { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; max-width:1280px; margin:0 auto; padding:11px 22px; min-height:74px; }

/* ---- 1. logo ---- */
.cnav-logo { display:inline-flex; align-items:center; gap:12px; flex:none; color:#fff; text-decoration:none; font-family:Poppins,Inter,sans-serif; }
/* Original brand mark: a ring in currentColor with a single lime quadrant. The "C" stays in the
   markup for copy/paste and screen readers but is not drawn (font-size:0), exactly as before. */
.cnav-mark { width:38px; height:38px; flex:none; border:5px solid currentColor; border-right-color:#d9f45a; border-radius:50%; display:inline-block; font-size:0; }
.cnav-word { display:inline-block; font-size:30px; font-weight:950; line-height:1; letter-spacing:-1.5px; }
.cnav-word small { display:block; color:#d9f45a; font-size:9px; font-weight:700; letter-spacing:.5px; }

/* ---- 2. search ---- */
.cnav-search { position:relative; flex:1 1 210px; min-width:150px; max-width:420px; }
.cnav-search input { width:100%; height:44px; padding:0 54px 0 16px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:#fff; color:#241436; font-size:15px; font-family:inherit; }
.cnav-search input::placeholder { color:#8a83a0; }
.cnav-search input:focus { outline:2px solid #d9f45a; outline-offset:1px; }
.cnav-search button { position:absolute; top:0; right:0; width:50px; height:100%; display:grid; place-items:center; padding:0; border:0; border-radius:0 10px 10px 0; background:#fff; color:#321078; cursor:pointer; }
.cnav-search button svg { width:23px; height:23px; min-width:23px; stroke-width:2; }

/* ---- 3. text+icon links: no pills ---- */
.cnav-links { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-left:auto; }
.cnav-link { display:inline-flex; align-items:center; gap:5px; padding:9px 2px; border:0; background:none; color:#fff; font:inherit; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; text-decoration:none; opacity:.92; cursor:pointer; transition:opacity .15s,color .15s; }
.cnav-link:hover, .cnav-pop.is-expanded > .cnav-link { color:#d9f45a; opacity:1; }
.cnav-link:focus-visible, .cnav-account-btn:focus-visible, .cnav-prime:focus-visible, .cnav-cart:focus-visible { outline:2px solid #d9f45a; outline-offset:2px; }
.cnav-chev { width:13px; height:13px; min-width:13px; opacity:.8; transition:transform .18s; }
.cnav-pop.is-expanded .cnav-chev { transform:rotate(180deg); }

/* ---- 4. notifications bell + unread badge on the icon's top-right ---- */
.cnav-bell { position:relative; padding:9px; }
.cnav-bell svg { width:19px; height:19px; min-width:19px; }
/* The bell is icon-only in the bar (it has an aria-label); the drawer shows the word. */
.cnav-bell-label { display:none; }
.cnav-bell-badge { position:absolute; top:0; right:-4px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border:2px solid #2d006f; border-radius:99px; background:#ff4d6d; color:#fff; font-size:10px; font-weight:800; line-height:1; }
.cnav-menu-head { margin:0; padding:9px 11px 7px; color:#6d6877; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }

/* ---- 5. divider ---- */
.cnav-divider { width:1px; height:24px; margin:0 4px; background:rgba(255,255,255,.24); flex:none; }

/* ---- dropdowns (click-driven; mobile-navbar.js toggles .is-expanded) ---- */
.cnav-pop { position:relative; }
.cnav-menu { display:none; position:absolute; top:calc(100% + 9px); left:0; z-index:70; min-width:196px; padding:7px; border-radius:13px; background:#fff; box-shadow:0 18px 44px rgba(30,0,80,.24); }
.cnav-menu-right { left:auto; right:0; }
.cnav-menu-wide { min-width:288px; }
.cnav-pop.is-expanded .cnav-menu { display:block; }
.cnav-menu a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 11px; border-radius:8px; color:#241436; font-size:13.5px; font-weight:600; text-decoration:none; }
.cnav-menu a:hover { background:#f3eeff; color:#5b2eff; }
.cnav-menu a b { font-weight:800; color:#5b2eff; }
.cnav-menu-rule { display:block; height:1px; margin:6px 8px; background:#e9e5ef; }
.cnav-menu-empty { margin:0; padding:12px; color:#6d6877; font-size:13px; }
.cnav-notif { flex-direction:column; align-items:flex-start; gap:3px; }
.cnav-notif small { color:#6d6877; font-size:11px; font-weight:600; }
.cnav-notif.is-unread { background:#f7f3ff; }
.cnav-menu-all { justify-content:center; color:#5b2eff; border-top:1px solid #e9e5ef; border-radius:0 0 8px 8px; margin-top:4px; }

/* ---- 6. account ---- */
.cnav-account-btn { display:inline-flex; align-items:center; gap:9px; padding:5px 9px 5px 5px; border:0; border-radius:99px; background:none; color:#fff; font:inherit; cursor:pointer; }
.cnav-account-btn:hover { background:rgba(255,255,255,.09); }
.cnav-avatar { position:relative; display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:#5b2eff; color:#fff; font-size:14px; font-weight:800; }
/* points live on the avatar, so there is no separate points pill in the bar */
.cnav-pts { position:absolute; right:-5px; bottom:-4px; min-width:19px; height:16px; padding:0 4px; display:grid; place-items:center; border:2px solid #2d006f; border-radius:99px; background:#d9f45a; color:#2d006f; font-size:9px; font-weight:900; line-height:1; }
.cnav-username { font-size:13.5px; font-weight:700; white-space:nowrap; max-width:104px; overflow:hidden; text-overflow:ellipsis; }
.cnav-signin { padding:9px 10px; }

/* ---- Prime: outlined only, same height as Cart, visually secondary ---- */
.cnav-prime { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border:1px solid rgba(215,243,95,.75); border-radius:99px; background:none; color:#d9f45a; font-size:13.5px; font-weight:700; white-space:nowrap; text-decoration:none; transition:background .18s,border-color .18s; }
.cnav-prime:hover { background:rgba(215,243,95,.12); border-color:#d9f45a; }
.cnav-prime.is-member { border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.05); }
.cnav-prime svg { width:17px; height:17px; min-width:17px; }

/* ---- 7. cart: the only filled, high-contrast element in the bar ---- */
.cnav-cart { display:inline-flex; align-items:center; gap:7px; min-height:46px; padding:10px 16px; flex:none; border-radius:10px; background:#d9f45a; color:#111; font-size:14px; font-weight:700; white-space:nowrap; text-decoration:none; transition:background .15s; }
.cnav-cart:hover { background:#cbe94d; }
.cnav-cart svg { width:18px; height:18px; min-width:18px; stroke-width:2; }
.cnav-cart-count { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#5b2eff; color:#fff; font-size:11px; font-weight:800; }
.cnav-cart-count.is-empty { display:none; }

/* ---- mobile drawer ---- */
.mobile-menu-toggle, .mobile-menu-close, .mobile-menu-backdrop { display:none; }
/* Mid range: shrink the flexible parts before anything is forced onto a second row. */
/* Mid range: shed the flexible parts in order of least value before anything wraps —
   the strapline, then the search width, then Prime's label, then the username. */
@media (max-width:1180px) {
  .cnav-inner { gap:8px; padding:11px 16px; }
  .cnav-word { font-size:21px; }
  .cnav-word small { display:none; }
  .cnav-search { flex:1 1 160px; max-width:250px; }
  .cnav-link { padding:9px 7px; font-size:13px; }
  .cnav-prime { padding:0 12px; }
  .cnav-username { max-width:84px; }
}
@media (max-width:1040px) {
  /* Prime keeps its outline and icon; the word is the first label to go. */
  .cnav-prime span { display:none; }
  .cnav-prime { padding:0 12px; }
  .cnav-search { flex:1 1 140px; max-width:200px; }
  .cnav-divider { margin:0 1px; }
}
@media (max-width:940px) {
  .cnav-username, .cnav-chev { display:none; }
  .cnav-account-btn { padding:5px; }
  .cnav-link span:not(.cnav-bell-badge) { display:none; }
  .cnav-link { padding:9px; }
}
@media (max-width:760px) {
  .cnav-inner { flex-wrap:nowrap; gap:9px; padding:10px 14px; min-height:64px; }
  .cnav-word { font-size:20px; }
  .cnav-word small { display:none; }
  /* search drops to its own row so nothing in the top row is ever squeezed out */
  .cnav-inner { flex-wrap:wrap; }
  .cnav-search { order:5; flex:1 0 100%; max-width:none; }
  .mobile-menu-toggle { display:grid; gap:4px; width:38px; height:38px; padding:9px; flex:none; border:0; border-radius:9px; background:rgba(255,255,255,.1); cursor:pointer; }
  .mobile-menu-toggle span { display:block; height:2px; border-radius:2px; background:#fff; }
  .cnav-logo { margin-right:auto; }
  .cnav-links { position:fixed; top:0; right:0; z-index:80; width:min(310px,86vw); height:100dvh; margin:0; padding:66px 18px 26px; flex-direction:column; align-items:stretch; gap:2px; overflow-y:auto; background:#2d006f; transform:translateX(100%); visibility:hidden; transition:transform .26s ease, visibility .26s; }
  body.mobile-menu-open { overflow:hidden; }
  body.mobile-menu-open .cnav-links { transform:translateX(0); visibility:visible; }
  .mobile-menu-close { display:block; position:absolute; top:16px; right:16px; width:36px; height:36px; border:0; border-radius:9px; background:rgba(255,255,255,.12); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
  .mobile-menu-backdrop { display:block; position:fixed; inset:0; z-index:70; border:0; background:rgba(18,0,48,.55); opacity:0; pointer-events:none; transition:opacity .26s; }
  body.mobile-menu-open .mobile-menu-backdrop { opacity:1; pointer-events:auto; }
  .cnav-link, .cnav-account-btn { width:100%; justify-content:flex-start; padding:12px 10px; font-size:15px; }
  /* The mid-range rules above strip labels down to icons to save horizontal room. Inside the
     drawer there is a full column to work with, so every label comes back. */
  .cnav-link span:not(.cnav-bell-badge), .cnav-prime span, .cnav-username, .cnav-chev { display:inline-block; }
  .cnav-bell { padding:12px 10px; }
  .cnav-bell-label { display:inline-block; }
  .cnav-bell-badge { position:static; margin-left:6px; }
  .cnav-chev { margin-left:auto; }
  .cnav-prime { width:100%; justify-content:center; margin-top:8px; }
  .cnav-divider { width:100%; height:1px; margin:9px 0; }
  .cnav-username { max-width:none; }
  /* in the drawer the dropdowns expand inline rather than floating */
  .cnav-menu { position:static; min-width:0; margin:2px 0 6px; box-shadow:none; background:rgba(255,255,255,.07); }
  .cnav-menu a { color:#fff; }
  .cnav-menu a:hover { background:rgba(255,255,255,.12); color:#d9f45a; }
  .cnav-menu a b { color:#d9f45a; }
  .cnav-menu-empty { color:#d8cff0; }
  .cnav-menu-head { color:#c8bce6; }
  .cnav-menu-all { color:#d9f45a; border-top-color:rgba(255,255,255,.15); }
  .cnav-notif.is-unread { background:rgba(255,255,255,.1); }
  .cnav-menu-rule { background:rgba(255,255,255,.16); }
}
@media (max-width:420px) {
  .cnav-cart-label { display:none; }
  .cnav-cart { padding:0 13px; }
}