/* ============================================================
   3R KNOWLEDGE SERVICES — GLOBAL CART
   Navigation icon + mini-cart panel, shared by every page that
   uses the main navigation. V2: empty state only — no products,
   no checkout, no payments.

   Colour follows the navigation's existing state (.nav / .nav.on-light,
   set by each page's own navigation script) and mirrors the
   "Engage with us" dropdown:
     nav over dark  → ivory panel, blue text
     nav over light → blue panel, ivory text
   ============================================================ */
.nav-cart{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  margin-left:-4px;
  margin-right:-11px; /* optical: aligns the glyph with the nav's right edge */
}
.cart-toggle{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  padding:0;margin:0;
  border:0;border-radius:50%;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.cart-toggle::before{
  content:"";
  position:absolute;inset:2px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:0;
  transform:scale(.86);
  transition:opacity .35s var(--ease),transform .35s var(--ease);
  pointer-events:none;
}
.cart-toggle:hover::before{opacity:.32;transform:none}
.cart-toggle[aria-expanded="true"]::before{opacity:.5;transform:none}
.cart-toggle:focus{outline:none}
.cart-toggle:focus-visible::before{opacity:1;transform:none}
.cart-icon{
  width:22px;height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* quantity indicator — prepared for later, never shown while the cart is empty */
.cart-count{
  position:absolute;
  top:8px;right:7px;
  min-width:14px;height:14px;
  padding:0 4px;
  border-radius:999px;
  font-size:9px;
  font-weight:500;
  line-height:14px;
  letter-spacing:0;
  text-align:center;
  background:var(--ivory,#FCFDF0);
  color:var(--blue,#194071);
  pointer-events:none;
}
.nav.on-light .cart-count{background:var(--blue,#194071);color:var(--ivory,#FCFDF0)}
.cart-count[hidden]{display:none}

/* ---------- panel: same family as .dropdown-content ---------- */
.cart-panel{
  position:absolute;
  top:calc(100% + 14px); /* lines up with the Engage menu's top edge */
  right:2px; /* flush with the ring, as the Engage menu is flush with its pill */
  display:flex;
  align-items:center;
  gap:20px;
  min-width:260px;
  max-width:calc(100vw - 24px);
  padding:15px 14px 15px 24px;
  background:var(--ivory,#FCFDF0);
  color:var(--blue,#194071);
  border:1px solid var(--ivory-15,rgba(252,253,240,.15));
  border-radius:12px;
  box-shadow:0 4px 24px rgba(13,33,58,.15);
  text-align:left;
  cursor:default;
  z-index:2;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,
             background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.cart-panel.is-open{
  opacity:1;visibility:visible;transform:translateY(0);
  /* visible at once on open so focus can move into the panel */
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s,
             background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.nav.on-light .cart-panel{
  background:var(--blue,#194071);
  color:var(--ivory,#FCFDF0);
  border-color:var(--blue-15,rgba(25,64,113,.15));
}
.cart-panel:focus{outline:none}
.cart-body{flex:1;min-width:0}
.cart-empty{
  margin:0;
  font-family:var(--serif,'Instrument Serif',Georgia,serif);
  font-weight:400;
  font-size:20px;
  line-height:1.3;
  letter-spacing:0;
  color:inherit;
  white-space:nowrap;
}
.cart-close{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  padding:0;margin:0;
  border:0;border-radius:50%;
  background:none;
  color:inherit;
  cursor:pointer;
  transition:background .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.cart-close svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}
.cart-close:hover{background:rgba(25,64,113,.06)}
.nav.on-light .cart-close:hover{background:rgba(252,253,240,.1)}
.cart-close:focus{outline:none}
.cart-close:focus-visible{box-shadow:inset 0 0 0 1px currentColor}

/* ---------- cart with products ---------- */
.cart-panel.has-items{width:260px;flex-wrap:wrap;align-items:flex-start;row-gap:16px;padding-top:18px;padding-bottom:20px}
.cart-panel.has-items .cart-close{margin-top:-6px}
.cart-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cart-item{display:flex;align-items:center;gap:14px}
.cart-thumb{
  width:36px;height:47px;
  flex-shrink:0;
  object-fit:cover;
  border-radius:2px;
  box-shadow:0 2px 8px rgba(13,33,58,.18);
}
.cart-item-info{min-width:0}
.cart-item-title{
  margin:0;
  font-family:var(--serif,'Instrument Serif',Georgia,serif);
  font-weight:400;
  font-size:20px;
  line-height:1.2;
  text-wrap:balance;
}
.cart-item-meta{
  margin:4px 0 0;
  display:flex;
  align-items:baseline;
  gap:14px;
  font-family:var(--sans,'Inter',sans-serif);
  font-size:13px;
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.4;
}
.cart-remove{
  position:relative;
  padding:2px 0;margin:0;
  border:0;background:none;
  color:inherit;
  font-family:var(--sans,'Inter',sans-serif);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  opacity:.72;
  cursor:pointer;
  transition:opacity .3s var(--ease);
}
.cart-remove::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:0;height:1px;
  background:currentColor;
  transition:width .35s var(--ease);
}
.cart-remove:hover{opacity:1}
.cart-remove:hover::after{width:100%}
.cart-remove:focus{outline:none}
.cart-remove:focus-visible{opacity:1}
.cart-remove:focus-visible::after{width:100%}
.cart-total{
  margin:14px 0 0;padding-top:12px;
  display:flex;justify-content:space-between;
  border-top:1px solid var(--blue-15,rgba(25,64,113,.15));
  font-family:var(--sans,'Inter',sans-serif);
  font-size:13px;font-weight:400;letter-spacing:.04em;
}
.nav.on-light .cart-total{border-color:var(--ivory-15,rgba(252,253,240,.15))}
.cart-foot{flex-basis:100%;margin-right:10px} /* optical: matches the 24px left inset */
.cart-checkout{
  display:block;
  width:100%;
  padding:13px 20px;
  border:1px solid var(--blue,#194071);
  border-radius:999px;
  background:var(--blue,#194071);
  color:var(--ivory,#FCFDF0);
  font-family:var(--sans,'Inter',sans-serif);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:.2em;
  line-height:1.5;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.cart-checkout:hover{background:transparent;color:var(--blue,#194071)}
.nav.on-light .cart-checkout{background:var(--ivory,#FCFDF0);color:var(--blue,#194071);border-color:var(--ivory,#FCFDF0)}
.nav.on-light .cart-checkout:hover{background:transparent;color:var(--ivory,#FCFDF0)}
.cart-checkout[aria-busy="true"]{cursor:progress;opacity:.72}
.cart-error{
  margin:10px 0 0;
  font-family:var(--sans,'Inter',sans-serif);
  font-size:12px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:.02em;
  text-align:center;
}
.cart-error[hidden]{display:none}
.cart-checkout:focus{outline:none}
.cart-checkout:focus-visible{outline:1px solid var(--blue,#194071);outline-offset:3px}
.nav.on-light .cart-checkout:focus-visible{outline-color:var(--ivory,#FCFDF0)}

@media(max-width:820px){
  .cart-icon{width:20px;height:20px}
  .nav-cart{margin-left:-6px;margin-right:-7.5px}
  .cart-toggle{width:34px;height:34px}
  .cart-toggle::before{inset:0}
  .cart-toggle::after{content:"";position:absolute;inset:-5px} /* 44px touch target */
}
/* the cart takes ~35px of the row here: let the existing links close up
   by the same amount only when the row is full (space-between keeps the
   original spacing whenever there is room), so nothing is pushed off-screen */
@media(min-width:521px) and (max-width:820px){
  .nav-links{gap:7px}
}
/* tablet & mobile: anchor the panel to the nav bar itself, 12px from the
   screen edge (where the icon sits), so it always stays on-screen */
@media(max-width:820px){
  .nav-cart{position:static}
  .cart-panel{top:calc(100% - 6px);right:12px}
}
@media(max-width:380px){
  .cart-panel{min-width:0;left:12px;padding-left:20px}
  .cart-empty{white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .cart-panel,.cart-panel.is-open{transform:none;transition:opacity .01ms,visibility 0s}
  .cart-toggle::before{transition:none}
}