/* ==========================================================================
   cart.css - varukorgens flik och panel.

   Ingen ikon i topmenyn, enligt beslutet 2026-09-23. I stället en kort flik
   som bara finns när något ligger i korgen: i högerkanten på desktop,
   centrerad under topmenyn på mobil. Hela korgen flyttas med transform, och
   fliken sitter fäst utanför panelens kant, så att den alltid hamnar vid
   kanten oavsett hur hög panelen är.

   Formgiven i design/korg-skiss-flik.html.
   ========================================================================== */

.cart {
  position: fixed;
  z-index: 90;                      /* under menyn, som ligger på 100 */
  top: 50%;
  right: 0;
  width: 21rem;
  max-width: calc(100vw - var(--space-6));
  transform: translate(100%, -50%);
  transition: transform var(--dur) var(--ease);
}
.cart[data-open="true"] { transform: translate(0, -50%); }

.cart__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  box-shadow: -4px 0 20px rgb(38 35 32 / 22%);
}

.cart__tab {
  position: absolute;
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 6rem;                     /* kort flik, växer inte med innehållet */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  cursor: pointer;
  box-shadow: -2px 0 10px rgb(38 35 32 / 18%);
}
.cart__tab b { font-weight: var(--weight-semi); color: var(--bg-fill); }

.cart__head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-2);
}
.cart__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.cart__close {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bg-fill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Panelen växer en rad per vara tills maxhöjden tar emot, först då scrollar
   listan i stället för att fylla hela kanten. */
.cart__lines {
  margin: 0;
  padding: 0 var(--space-5);
  list-style: none;
  overflow-y: auto;
  min-height: 0;
  max-height: 17rem;
}

.cart-line {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: var(--border-w) solid rgb(230 227 221 / 16%);
}
.cart-line--blocked { opacity: 0.6; }

.cart-line__thumb {
  flex: none;
  width: 3rem;
  height: 2rem;
  object-fit: cover;
  background: var(--bg-fill);
}

.cart-line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-line__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--fg-inverse);
  text-decoration: none;
}
.cart-line__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cart-line__meta,
.cart-line__problem {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  color: var(--bg-fill);
}
.cart-line__problem { color: #E0C4A8; }   /* varm ton, syns mot den mörka ytan */

.cart-line__right { text-align: right; font-family: var(--font-display); font-size: var(--text-sm); }
.cart-line__price { white-space: nowrap; }
.cart-line__remove {
  display: block;
  margin-top: 2px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bg-fill);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cart__foot {
  flex: none;
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: var(--border-w) solid rgb(230 227 221 / 24%);
}
.cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
}
.cart__total-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bg-fill);
}
.cart__total-value { font-size: var(--text-1); font-weight: var(--weight-medium); }
/* Frakten (2026-10-10): raden ligger tätt under delsumman, och leveranssättets namn står dämpat efter ordet Frakt. */
.cart__total--shipping { margin-top: calc(var(--space-2) * -1); }
.cart__ship-name { text-transform: none; letter-spacing: 0; opacity: .8; }

.cart__note {
  margin: calc(var(--space-3) * -1) 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  color: var(--bg-fill);
}
/* Noten under Checkout ska stå UNDER knappen, inte dras upp bakom den.
   .cart__note har negativ toppmarginal för att "Shipping calculated at
   checkout" ska ligga tätt mot summan, och den gäller alla noter.
   Regeln stod tidigare på ".btn + .cart__note", men knappen ligger i ett
   formulär, så noten är syskon till formuläret och inte till knappen. Den
   matchade alltså aldrig, och texten hamnade bakom knappen. 2026-09-26. */
.cart__foot form + .cart__note,
.cart__foot .btn + .cart__note { margin: var(--space-3) 0 0; }

/* Länkar i noterna och i intygen (Villkor, Frakt & retur) ärvde sidans mörka länkfärg och
   försvann mot den mörka panelen. Samma ljusa färg och understrykning som "Ta bort". 2026-10-06. */
.cart__note a,
.cart__age a {
  color: var(--fg-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Intyget om minst 18 år före Checkout, bara när korgen har en kniv. */
.cart__age {
  margin: 0 0 var(--space-3);
  color: var(--bg-fill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
}
.cart__age input { accent-color: var(--bg-main); }
.cart__age-note { margin: calc(var(--space-2) * -1) 0 var(--space-3); }

.btn--light { background: var(--bg-main); color: var(--ink); }

/* --- Mobil: fliken under topmenyn, panelen fälls ned som en låda ---------- */
@media (max-width: 700px) {
  .cart {
    top: var(--header-h);
    left: 50%;
    right: auto;
    width: min(26rem, 92vw);
    transform: translate(-50%, -100%);
  }
  .cart[data-open="true"] { transform: translate(-50%, 0); }

  .cart__panel { box-shadow: 0 8px 24px rgb(38 35 32 / 26%); }

  .cart__tab {
    left: 50%;
    top: auto;
    bottom: -1.875rem;
    width: auto;
    height: 1.875rem;
    padding: 0 var(--space-4);
    transform: translateX(-50%);
    writing-mode: horizontal-tb;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 2px 10px rgb(38 35 32 / 18%);
  }
  .cart__tab::after { content: "\25BE"; font-size: 0.7rem; color: var(--bg-fill); }
  .cart[data-open="true"] .cart__tab::after { content: "\25B4"; }

  .cart__lines { max-height: 14rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cart { transition: none; }
}

/* --- Landsvalet ------------------------------------------------------------
   Landet avgör både fraktpriset och om ordern går till kassan eller till
   förfrågan, så det väljs i panelen innan kassan. Ljus yta på den mörka
   bottnen, som adminens fält: det ska läsas som något man ska ändra. */

.cart__country { margin-bottom: var(--space-4); }
.cart__country-label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bg-fill);
}
.cart__country-select {
  width: 100%;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  background: var(--field-bg);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-default);
}

/* Förklaringen för länder som sköts för hand. Kunden ska veta det innan
   klicket, inte upptäcka det på nästa sida. */
.cart__callout {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgb(230 227 221 / 10%);
  border-left: 2px solid var(--bg-fill);
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  line-height: 1.5;
}
.cart__callout strong { display: block; margin-bottom: 2px; font-weight: var(--weight-semi); }


/* --- Presentkort (steg 3) ----------------------------------------------------
   Kodfältet och de påförda korten sitter mellan landsvalet och summorna. Fältets
   bakgrund är --field-bg, som landsväljarens (fältregeln i tokens.css). */
.cart__gift { margin-bottom: var(--space-4); }
.cart__gift-row { display: flex; gap: var(--space-2); }
.cart__gift-input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: var(--space-2) var(--space-3);
  background: var(--field-bg);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-default);
}
#cart-gift-code { text-transform: uppercase; }
.cart__gift-contact { width: 100%; flex: none; margin: 0 0 var(--space-2); }
.cart__gift-note { margin: var(--space-2) 0 0; }
.cart__gift-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
}
.cart__gift-what { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cart__gift-amount { font-weight: var(--weight-medium); }
.cart__total--gift { margin-bottom: var(--space-2); }