/* THE CART'S SHARED STYLES (row cart, 2026-10-29): the header cart link, the "Add to cart" button, the "Added to your
   cart" box. Loaded by base.njk on every page. Kept out of style.css on purpose (that file needs a visual baseline for
   every edit and is shared by every page); the cart page's own layout lives in src/cart.njk. Nothing here moves or
   animates (Kristian 2026-10-28: menus and boxes stay still). */

/* header: the cart link. Desktop = the last item of the menu; phone = beside the hamburger (both copies in base.njk). */
.nav-links li.nav-cart-li::after { display: none; }
.nav-links li:has(+ li.nav-cart-li)::after { display: none; }
.nav-links a.nav-cart, .nav-cart-m { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -10px -6px -10px 0; padding: 0; color: #fff; text-decoration: none; }
.nav-links a.nav-cart::before { display: none; }
.nav-links a.nav-cart:hover, .nav-cart-m:hover { color: #E8212A; }
.nav-cart svg, .nav-cart-m svg { display: block; }
/* badge red one step darker than the brand red: white 11px text on #E8212A is 4.49:1, on #D41F27 5.2:1 (AA) */
.nav-cart-n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #D41F27; color: #fff; font: 700 11px/18px var(--sans, 'DM Sans', sans-serif); letter-spacing: 0; text-align: center; }
.nav-cart-n[hidden] { display: none; }
.nav-cart-m { display: none; margin: -10px 0; }
@media (max-width: 1080px) {
  .nav-links li.nav-cart-li { display: none; }
  .nav-cart-m { display: inline-flex; }
}
/* 1081-1120 px: the desktop menu + the cart icon were 6 px too wide for the bar (design review 29 Oct) - the menu's
   gaps step from 28 to 22 px there only, the separators move with them. */
@media (min-width: 1081px) and (max-width: 1120px) {
  .nav-links { gap: 22px; }
  .nav-links li:not(:last-child)::after { right: -11px; }
}
/* Phones up to 420 px WHEN the language switch is shown: logo + EN + cart + menu were 45 px too wide at 360 px (the
   menu button half off the screen - design review 29 Oct). The language button keeps its globe (the language names
   still open on a tap), the gaps tighten. Without the language switch nothing changes. */
@media (max-width: 420px) {
  .nav-right-m:has(.lang-m) { gap: 8px; }
  .nav-right-m .lang-m .lang-code, .nav-right-m .lang-m .lang-chev { display: none; }
  .nav-right-m:has(.lang-m) .nav-cart-m { width: 34px; }
}

/* "Add to cart": the quiet second button next to Buy / Download / See more. */
.cart-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.32); border-radius: 0; cursor: pointer;
  font: 700 14px var(--sans, 'DM Sans', sans-serif); white-space: nowrap; }
.cart-add:hover { border-color: #fff; }
.cart-add:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cart-add svg { flex: 0 0 auto; }
.cart-add .ci-in { display: none; }
.cart-add.is-in { color: #3ecf6e; border-color: rgba(62,207,110,0.55); }
.cart-add.is-in .ci-add { display: none; }
.cart-add.is-in .ci-in { display: block; }
/* On a catalogue card the top row already holds name, price and SEE MORE: the card copy is compact, in the card's own
   button type (11px capitals like SEE MORE), and ONE fixed width for "ADD" and "IN CART" so nothing on the card moves
   when it is clicked. It never shrinks (a shrinking button slid under SEE MORE at 1440 px - caught by cart-e2e.mjs). */
/* On a catalogue card: the LAST SEGMENT of the card's bottom bar (the tags), not the top row - the top row has no room
   and widening it cropped the pictures (measured 29 Oct). Same type, separators and height as the tags; one fixed
   width for "Add" and "In cart" so nothing moves. The cards are clickable as a whole: SEE MORE stretches an invisible
   ::after over the card at z-index 4 (style.css), so the button sits above it at 5 (caught by cart-e2e.mjs). */
.cart-add--chip { position: relative; z-index: 5; flex: 0 0 94px; width: 94px; height: auto; align-self: stretch; padding: 10px 8px; gap: 6px;
  border: 0; background: rgba(255,255,255,0.12); color: #fff; font: 700 13px var(--sans, 'DM Sans', sans-serif); letter-spacing: 0.2px; }
.cart-add--chip:hover { background: rgba(255,255,255,0.20); border: 0; }
.cart-add--chip:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.cart-add--chip.is-in { color: #3ecf6e; background: rgba(62,207,110,0.10); border: 0; }
/* Phones: the tags already need every pixel (they wrap on /indicators/ too), so "Add" takes its own full-width row
   under them - the tags keep exactly the room they have without the cart, and the button is a 44 px tap target. */
@media (max-width: 560px) {
  .hcard-chips-bar:has(.cart-add--chip) { flex-wrap: wrap; }
  .hcard-chips-bar:has(.cart-add--chip) .hcard-chip:nth-last-child(2) { border-right: none; }
  .cart-add--chip { flex: 1 0 100%; width: 100%; min-height: 44px; border-top: 1px solid rgba(255,255,255,0.30); }
  .cart-add--chip:hover, .cart-add--chip.is-in { border-top: 1px solid rgba(255,255,255,0.30); }
}

/* "Added to your cart": a fixed box under the header, top right. Stays until the customer closes it. */
.cart-added { position: fixed; top: 66px; right: 16px; z-index: 1300; width: 340px; max-width: calc(100vw - 32px);
  background: #101010; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 18px 50px rgba(0,0,0,0.6); padding: 18px;
  color: #f0f0f0; font-family: var(--sans, 'DM Sans', sans-serif); }
.cart-added .ca-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; }
.cart-added .ca-ok { color: #fff; }
.cart-added .ca-x { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: rgba(240,240,240,0.66); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; margin: -10px -12px -10px 0; }
.cart-added .ca-x:hover { color: #fff; }
.cart-added .ca-one { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 14.5px; }
.cart-added .ca-one small { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(240,240,240,0.6); }
.cart-added .ca-alt { margin-top: 10px; font-size: 13px; color: rgba(240,240,240,0.66); }
.cart-added .ca-alt a { color: #fff; }
.cart-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cart-added .ca-tot { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.10); font-size: 14px; color: rgba(240,240,240,0.66); }
.cart-added .ca-tot b { color: #fff; }
.cart-added .ca-go { display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; margin-top: 14px; background: #fff; color: #000; font-weight: 700; font-size: 15px; text-decoration: none; }
.cart-added .ca-go:hover { background: #e9e9e9; }
.cart-added .ca-keep { display: block; width: 100%; height: 42px; margin-top: 8px; background: none; border: 1px solid rgba(255,255,255,0.22); color: #fff; font: 700 14.5px var(--sans, 'DM Sans', sans-serif); cursor: pointer; }
.cart-added .ca-keep:hover { border-color: #fff; }
@media (max-width: 1080px) { .cart-added { top: 62px; right: 12px; left: 12px; width: auto; max-width: none; } }