/* =========================================================================
   Advisory Intelligence — delta ovanpå titan.css

   Sidan är en kopia av Titan Engine. Kartlagret, legenden, sökrutan,
   miljölagren och Anpassad karta är oförändrade och kommer helt ur
   titan.css och titan.js. Den här filen gör tre saker och inget mer:

     1. Döljer operatörsytorna som inte hör hemma i en kundvänd beställning.
     2. Byter temat till ett ljusare, mjukare, mer lekfullt uttryck —
        rundade hörn, mjuka skuggor, pastellfärger — via en lokal
        token-override som aldrig rör titan.css eller Titan Engine.
     3. Ger katalogen (kort med bild, rubrik och kort text), kundvagnen
        och kassan sitt utseende.

   Ändras kartan i Titan följer den här sidan med. Ändras något här
   påverkas inte Titan — allt är scopat under [data-surface="advisory"].

   Designsystem v2. Detta är INTE Titan Engine-ytan (hög insats, noll
   radie, inga skuggor, en accent per vy). Advisory är en lättare, mer
   inbjudande beställningsyta och får därför ett eget, varmare formspråk:
   rundade hörn, mjuka skuggor, lekfulla mikroanimationer, ljus bakgrund,
   en pastellfärg per produktgrupp. Titan Engines eget tema rörs aldrig —
   allt nedan gäller enbart under [data-surface="advisory"].
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Tema — ljusare, mjukare, egna tokens (rör aldrig titan.css)
   ------------------------------------------------------------------------- */

[data-surface="advisory"] {
  --gf-ink: #16191f;
  --gf-paper: #e8e5df;
  --gf-accent: #c7ff54;
  --gf-blue: #83b9ff;
  --gf-surface-1: #1c2027;
  --gf-surface-2: #21262f;
  --gf-surface-3: #262c36;
  --gf-text-1: #e8e5df;
  --gf-text-2: #c2c4c8;
  --gf-text-3: #a9aeb4;
  --gf-text-4: #8e959d;
  --gf-text-5: #707780;
  --gf-line: rgba(232, 229, 223, .14);
  --gf-line-soft: rgba(232, 229, 223, .07);
  --gf-line-hard: rgba(255, 255, 255, .1);
  --gf-status-ok: #1fb37a;
  --gf-status-warn: #d99a1b;
  --gf-status-alert: #ef5f79;
  --gf-status-unknown: #91969d;

  --adv-radius-lg: 24px;
  --adv-radius-md: 18px;
  --adv-radius-sm: 12px;
  --adv-radius-pill: 999px;
  --adv-shadow-soft: 0 12px 32px -16px rgba(199, 255, 84, .28);
  --adv-shadow-hover: 0 20px 44px -16px rgba(199, 255, 84, .38);
  --adv-shadow-tiny: 0 4px 14px -8px rgba(199, 255, 84, .3);
  --adv-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --adv-grid-size: 28px;
}

body[data-surface="advisory"],
[data-surface="advisory"] .workspace {
  background-color: var(--gf-ink);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(232, 229, 223, .16) 1px, transparent 1.1px),
    radial-gradient(ellipse at center, transparent 20%, rgba(22, 25, 31, .72) 100%);
  background-size: var(--adv-grid-size) var(--adv-grid-size), 100% 100%;
  background-attachment: fixed, fixed;
}

@keyframes advisoryFadeUp {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes advisoryPop {
  0%   { transform: scale(.9); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes advisoryFloat {
  0%, 100% { transform: translateY(0) rotate(var(--art-rot, 0deg)); }
  50%      { transform: translateY(-4px) rotate(var(--art-rot, 0deg)); }
}
@keyframes advisoryPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 255, 84, .35); }
  50%      { box-shadow: 0 0 0 6px rgba(199, 255, 84, 0); }
}
@keyframes advisorySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* -------------------------------------------------------------------------
   1. Operatörsytor som inte följer med till kundvyn
   ------------------------------------------------------------------------- */

[data-surface="advisory"] .side-rail,
[data-surface="advisory"] .operator-tools,
[data-surface="advisory"] .demo-banner,
[data-surface="advisory"] .site-review-panel,
[data-surface="advisory"] .tool-strip,
[data-surface="advisory"] .people-location-panel,
[data-surface="advisory"] .analysis-config-panel,
[data-surface="advisory"] .satellite-intelligence-panel,
[data-surface="advisory"] .filter-panel,
[data-surface="advisory"] .inspector,
[data-surface="advisory"] .ranking-section,
[data-surface="advisory"] .compare-section,
[data-surface="advisory"] .evidence-section {
  display: none !important;
}

/* -------------------------------------------------------------------------
   2. Layout — kartan centralt, beställningen bredvid, som två svävande kort
   ------------------------------------------------------------------------- */

[data-surface="advisory"] .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

[data-surface="advisory"] .workspace {
  padding: 8px 10px 16px;
}

@media (min-width: 781px) {
  [data-surface="advisory"] .workspace {
    padding-top: 96px;
  }
}

.advisory-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--gf-paper);
}
.advisory-brand img {
  display: block;
  width: auto;
  height: 38px;
  flex: none;
}
.advisory-wordmark {
  display: grid;
  gap: 4px;
  white-space: nowrap;
}
.advisory-wordmark b {
  font-family: var(--gf-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.08;
  letter-spacing: .02em;
  color: var(--gf-paper);
}
.advisory-wordmark i {
  font-style: normal;
  color: var(--gf-accent);
}
.advisory-wordmark small {
  font-family: var(--gf-font-mono);
  font-size: 8px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gf-text-5);
}

@media (max-width: 720px) {
  .advisory-wordmark { display: none; }
}

[data-surface="advisory"] .workspace-grid {
  grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: auto minmax(680px, calc(100dvh - 292px));
  grid-template-areas:
    "catalogue catalogue"
    "map cart";
  height: auto;
  min-height: 0;
  gap: 14px;
  align-items: stretch;
}

[data-surface="advisory"] .map-panel {
  grid-area: map;
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--gf-line);
  border-radius: var(--adv-radius-lg);
  overflow: hidden;
  background: var(--gf-surface-1);
  box-shadow: var(--adv-shadow-soft);
}
[data-surface="advisory"] .map-canvas {
  min-height: 400px;
}

[data-surface="advisory"] .map-panel > .map-canvas { order: 2; flex: 1 1 400px; }
[data-surface="advisory"] .map-panel > .map-topline {
  order: 1;
  position: static;
  inset: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 480px);
  align-items: start;
  gap: 8px 12px;
  padding: 10px 14px 12px;
  background: var(--gf-surface-1);
  border-top: 0;
  border-bottom: 1px solid var(--gf-line-soft);
  pointer-events: auto;
}
[data-surface="advisory"] .map-topline .map-tools {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  gap: 5px;
  padding: 0;
}
[data-surface="advisory"] .map-topline > .map-place-search {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  position: static;
  top: auto;
  left: auto;
  width: min(480px, 100%);
  margin: 0;
  transform: none;
}

[data-surface="advisory"] .map-nav-controls {
  top: 146px;
  right: 16px;
  bottom: auto;
}

[data-surface="advisory"] .advisory-panel {
  grid-area: cart;
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--adv-radius-lg);
  background: var(--gf-surface-1);
  box-shadow: var(--adv-shadow-soft);
}
[data-surface="advisory"] .advisory-product-rail {
  grid-area: catalogue;
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gf-line);
  border-radius: var(--adv-radius-lg);
  background: rgba(28, 32, 39, .92);
  box-shadow: var(--adv-shadow-soft);
}

/* Samma accent i kartans kontrollrad som i beställningsytan. */
[data-surface="advisory"] .map-mode.active,
[data-surface="advisory"] .map-theme.active,
[data-surface="advisory"] .immersive-control[aria-pressed="true"],
[data-surface="advisory"] .immersive-control.active {
  color: var(--gf-ink);
  background: var(--gf-accent);
  box-shadow: 0 0 16px rgba(199, 255, 84, .16);
}
.advisory-product-rail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px 8px;
}
.advisory-product-rail-head h2 { margin: 3px 0 0; font-size: 18px; }
.advisory-product-rail-head p { max-width: 400px; margin: 0; color: var(--gf-text-4); font-size: 11px; line-height: 1.45; }
[data-surface="advisory"] .advisory-head,
[data-surface="advisory"] .advisory-site,
[data-surface="advisory"] .advisory-cart {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  [data-surface="advisory"] .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(740px, auto) auto;
    grid-template-areas:
      "catalogue"
      "map"
      "cart";
    height: auto;
    gap: 14px;
  }
  [data-surface="advisory"] .map-panel {
    grid-row: 2;
    min-height: 740px;
  }
  [data-surface="advisory"] .advisory-panel {
    grid-column: 1;
    grid-row: 3;
    max-height: none;
    overflow: visible;
  }
  [data-surface="advisory"] .advisory-product-rail {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 720px) {
  [data-surface="advisory"] .map-panel {
    min-height: 760px;
    border-radius: var(--adv-radius-md);
  }
  [data-surface="advisory"] .advisory-panel {
    border-radius: var(--adv-radius-md);
  }
  [data-surface="advisory"] .map-panel > .map-topline {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px 12px 10px;
  }
  [data-surface="advisory"] .map-topline > .map-place-search {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
  }
  [data-surface="advisory"] .map-topline .map-tools {
    grid-column: 1;
    grid-row: 2;
  }
  [data-surface="advisory"] .map-panel > .map-canvas {
    flex-basis: 400px;
    min-height: 400px;
  }
  [data-surface="advisory"] .map-nav-controls {
    top: 290px;
    right: 12px;
  }
}

/* -------------------------------------------------------------------------
   3. Rubrik och vald plats
   ------------------------------------------------------------------------- */

.advisory-head {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--gf-line-soft);
}
.advisory-head h2 {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.18;
  color: var(--gf-text-1);
}
.advisory-head-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gf-text-4);
}

.advisory-site {
  padding: 16px 22px;
  border-bottom: 1px solid var(--gf-line-soft);
  background: var(--gf-surface-2);
  animation: advisoryFadeUp .4s var(--adv-bounce);
}
.advisory-site-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.advisory-site-row strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gf-text-1);
}
.advisory-site-facts {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
}
.advisory-site-facts > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--adv-radius-sm);
  background: var(--gf-surface-1);
}
.advisory-site-facts dt {
  font-family: var(--gf-font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gf-text-5);
  align-self: center;
}
.advisory-site-facts dd {
  margin: 0;
  font-family: var(--gf-font-mono);
  font-size: 11px;
  color: var(--gf-blue);
  overflow-wrap: anywhere;
}

.advisory-kanon {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: var(--adv-radius-sm);
  border-left: 3px solid var(--gf-status-unknown);
  background: var(--gf-surface-1);
  font-size: 12px;
  line-height: 1.6;
  color: var(--gf-text-3);
  transition: border-color .3s var(--gf-ease);
}
.advisory-kanon[data-state="ok"]   { border-left-color: var(--gf-status-ok); }
.advisory-kanon[data-state="warn"] { border-left-color: var(--gf-status-warn); }
.advisory-kanon[data-state="bad"]  { border-left-color: var(--gf-status-alert); }

/* -------------------------------------------------------------------------
   5. Varukorg och summa
   ------------------------------------------------------------------------- */

.advisory-cart-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  color: var(--gf-text-2);
  border: 1px solid var(--gf-line);
  border-radius: var(--adv-radius-pill);
  background: var(--gf-surface-1);
  font-family: var(--gf-font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .22s var(--gf-ease), border-color .22s var(--gf-ease),
              background .22s var(--gf-ease), transform .22s var(--adv-bounce),
              box-shadow .22s var(--gf-ease);
}
.advisory-cart-trigger:hover,
.advisory-cart-trigger:focus-visible {
  color: #07090d;
  border-color: var(--gf-accent);
  background: var(--gf-accent);
  box-shadow: var(--adv-shadow-tiny);
  transform: translateY(-1px) scale(1.02);
  outline: 0;
}
.advisory-cart-trigger-icon,
.advisory-cart-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.advisory-cart-trigger b {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  color: #07090d;
  background: var(--gf-accent);
  border-radius: var(--adv-radius-pill);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  transition: transform .3s var(--adv-bounce);
}
.advisory-cart-trigger:hover b { transform: scale(1.15); }
.advisory-cart-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.advisory-cart {
  padding: 16px 22px 18px;
  border-top: 1px solid var(--gf-line-soft);
  background: var(--gf-surface-2);
}
.advisory-cart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.advisory-cart-count {
  font-family: var(--gf-font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gf-text-5);
  font-variant-numeric: tabular-nums;
}

.advisory-cart-list {
  margin: 0 0 12px;
  padding: 0;
  max-height: 108px;
  overflow-y: auto;
  list-style: none;
}
.advisory-cart-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: var(--adv-radius-sm);
  background: var(--gf-surface-1);
  font-size: 12.5px;
  color: var(--gf-text-3);
  animation: advisoryFadeUp .28s var(--adv-bounce);
}
.advisory-cart-list li:last-child { margin-bottom: 0; }
.advisory-cart-empty {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: var(--adv-radius-sm);
  background: var(--gf-surface-1) !important;
  color: var(--gf-text-5) !important;
  font-size: 12px !important;
  line-height: 1.6;
}
.advisory-cart-list .amt {
  font-family: var(--gf-font-mono);
  font-size: 11px;
  color: var(--gf-blue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.advisory-cart-list .rm {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--gf-text-5);
  border: 1px solid var(--gf-line);
  border-radius: 50%;
  background: transparent;
  font-family: var(--gf-font-mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s var(--gf-ease), border-color .18s var(--gf-ease),
              background .18s var(--gf-ease), transform .18s var(--adv-bounce);
}
.advisory-cart-list .rm:hover {
  color: #fff;
  border-color: var(--gf-status-alert);
  background: var(--gf-status-alert);
  transform: scale(1.1) rotate(90deg);
}

.advisory-total {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 12px;
}
.advisory-total > div {
  padding: 8px 9px;
  border-radius: var(--adv-radius-sm);
  background: var(--gf-surface-1);
}
.advisory-total dt {
  font-family: var(--gf-font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gf-text-5);
}
.advisory-total dd {
  margin: 3px 0 0;
  font-family: var(--gf-font-mono);
  font-size: 13px;
  color: var(--gf-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.advisory-total dd.is-total { color: var(--gf-accent); font-weight: 700; }

.advisory-pay-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px;
}
.advisory-pay-row .button {
  justify-content: center;
  border-radius: var(--adv-radius-pill) !important;
  transition: transform .2s var(--adv-bounce), box-shadow .2s var(--gf-ease);
}
.advisory-pay-row .button:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.015);
  box-shadow: var(--adv-shadow-tiny);
}
.advisory-pay-note {
  margin: 10px 0 0;
  font-family: var(--gf-font-mono);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gf-text-5);
  text-align: center;
}

/* -------------------------------------------------------------------------
   7. Produktnavigator och kort — bild, rubrik, kort text per artikel
   ------------------------------------------------------------------------- */

.advisory-catalogue {
  min-width: 0;
}

.advisory-group-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gf-line-soft);
  background: var(--gf-surface-2);
}
.advisory-group-trigger {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 7px 10px;
  overflow: hidden;
  color: var(--gf-text-4);
  border: 1.5px solid var(--gf-line);
  border-radius: var(--adv-radius-pill);
  background: var(--gf-surface-1);
  text-align: left;
  cursor: pointer;
  transition: color .2s var(--gf-ease), border-color .2s var(--gf-ease),
              background .2s var(--gf-ease), transform .2s var(--adv-bounce),
              box-shadow .2s var(--gf-ease);
}
.advisory-group-trigger:hover,
.advisory-group-trigger:focus-visible {
  color: var(--gf-text-1);
  border-color: var(--card-accent, var(--gf-accent));
  background: var(--card-bg, var(--gf-surface-3));
  transform: translateY(-1px) scale(1.015);
  box-shadow: var(--adv-shadow-tiny);
  outline: 0;
}
.advisory-group-trigger.is-active {
  color: var(--gf-text-1);
  border-color: var(--card-accent, var(--gf-accent));
  background: var(--card-bg, var(--gf-surface-3));
  box-shadow: var(--adv-shadow-tiny);
}
.advisory-group-icon,
.advisory-group-copy,
.advisory-group-count { position: relative; z-index: 1; }
.advisory-group-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--card-accent, var(--gf-accent));
  background: var(--card-bg, var(--gf-surface-3));
  transition: transform .25s var(--adv-bounce);
}
.advisory-group-trigger:hover .advisory-group-icon,
.advisory-group-trigger.is-active .advisory-group-icon {
  transform: scale(1.1) rotate(-6deg);
}
.advisory-group-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.advisory-group-copy { display: grid; gap: 1px; min-width: 0; }
.advisory-group-copy b,
.advisory-group-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.advisory-group-copy b {
  color: var(--gf-text-5);
  font-family: var(--gf-font-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .1em;
}
.advisory-group-copy span { font-size: 10.5px; font-weight: 600; line-height: 1.2; color: inherit; }
.advisory-group-count {
  min-width: 17px;
  color: var(--gf-text-5);
  font-family: var(--gf-font-mono);
  font-size: 8.5px;
  text-align: right;
}
.advisory-group-count[data-picked="true"] { color: var(--card-accent, var(--gf-accent)); }

/* Pastellfärg per produktgrupp — sätts via data-group, aldrig via titan.css. */
.advisory-group-trigger[data-group="A"] { --card-bg: #eaf4ff; --card-accent: #2f8fe0; }
.advisory-group-trigger[data-group="B"] { --card-bg: #eafbf3; --card-accent: #16a673; }
.advisory-group-trigger[data-group="C"] { --card-bg: #fff1ea; --card-accent: #e8703a; }
.advisory-group-trigger[data-group="D"] { --card-bg: #f4ffe0; --card-accent: #8fae35; }
.advisory-group-trigger[data-group="E"] { --card-bg: #fff7e0; --card-accent: #d99a1b; }
.advisory-group-trigger[data-group="F"] { --card-bg: #ffeef3; --card-accent: #e0568c; }
.advisory-group-trigger[data-group="G"] { --card-bg: #f3ecff; --card-accent: #8b5fd9; }

.advisory-cards {
  display: flex;
  gap: 10px;
  padding: 14px 16px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-color: var(--gf-line) transparent;
}
.advisory-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 254px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--gf-line);
  border-radius: var(--adv-radius-md);
  background: var(--gf-surface-1);
  text-align: left;
  cursor: pointer;
  animation: advisoryPop .4s var(--adv-bounce) backwards;
  animation-delay: var(--card-delay, 0ms);
  transition: transform .22s var(--adv-bounce), box-shadow .22s var(--gf-ease),
              border-color .22s var(--gf-ease);
  scroll-snap-align: start;
}
.advisory-card:hover,
.advisory-card:focus-visible {
  transform: translateY(-3px) scale(1.015);
  box-shadow: var(--adv-shadow-hover);
  border-color: var(--card-accent, var(--gf-accent));
  outline: 0;
}

.advisory-card[data-group="A"] { --card-bg: #eaf4ff; --card-accent: #2f8fe0; }
.advisory-card[data-group="B"] { --card-bg: #eafbf3; --card-accent: #16a673; }
.advisory-card[data-group="C"] { --card-bg: #fff1ea; --card-accent: #e8703a; }
.advisory-card[data-group="D"] { --card-bg: #f4ffe0; --card-accent: #8fae35; }
.advisory-card[data-group="E"] { --card-bg: #fff7e0; --card-accent: #d99a1b; }
.advisory-card[data-group="F"] { --card-bg: #ffeef3; --card-accent: #e0568c; }

.advisory-card-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 136px;
  overflow: hidden;
  background: #080d19;
}
.advisory-card-blob {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
}
.advisory-card-blob path { fill: var(--card-accent, var(--gf-accent)); opacity: .16; }
.advisory-card-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: .92;
  transform: translateX(var(--scene-shift, 0));
  transition: transform .35s var(--adv-bounce), opacity .25s var(--gf-ease);
}
.advisory-card:hover .advisory-card-scene { opacity: 1; transform: translateX(var(--scene-shift, 0)) scale(1.05); }
.advisory-card-glyph {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gf-surface-1);
  color: var(--card-accent, var(--gf-accent));
  box-shadow: var(--adv-shadow-tiny);
  animation: advisoryFloat 4.5s ease-in-out infinite;
}
.advisory-card:hover .advisory-card-glyph {
  animation-play-state: paused;
  transform: scale(1.12) rotate(-4deg);
}
.advisory-card-glyph svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.advisory-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
}
.advisory-card-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--gf-text-1);
}
.advisory-card-desc {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--gf-text-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.advisory-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.advisory-card-price {
  font-family: var(--gf-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--card-accent, var(--gf-accent));
  white-space: nowrap;
}
.advisory-card-price::after { content: " kr"; font-weight: 400; color: var(--gf-text-5); }
.advisory-card-meta {
  font-family: var(--gf-font-mono);
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gf-text-5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.advisory-card-state {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 7px;
  border-radius: var(--adv-radius-pill);
  /* Etiketten låg tidigare som vit platta med limegrön text (kontrast 1,4:1)
     och var i praktiken oläsbar. Mörk platta med tunn ram i statusfärgen ger
     samma signal och klarar kontrastkravet. */
  background: rgba(6, 8, 11, .94);
  border: 1px solid color-mix(in srgb, var(--gf-status-warn) 45%, transparent);
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gf-status-warn);
  font-family: var(--gf-font-mono);
  font-size: 7px;
  letter-spacing: .07em;
  text-transform: uppercase;
  animation: advisoryPulse 2.6s ease-in-out infinite;
}
.advisory-card--analysis .advisory-card-state {
  color: var(--card-accent, var(--gf-accent));
  border-color: color-mix(in srgb, var(--card-accent, var(--gf-accent)) 45%, transparent);
  animation: none;
}

.advisory-sunlight-dialog {
  width: min(560px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
  color: var(--gf-text-1);
  border: 1px solid var(--gf-line-hard);
  border-radius: var(--adv-radius-lg);
  background: var(--gf-surface-1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}
.advisory-sunlight-dialog::backdrop { background: rgba(6, 8, 11, .68); backdrop-filter: blur(5px); }
.advisory-sunlight-form { display: grid; gap: 16px; padding: 22px; }
.advisory-sunlight-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.advisory-sunlight-head h2 { margin: 3px 0 0; font-size: 22px; }
.advisory-sunlight-target { margin: 0; color: var(--gf-text-3); font-size: 13px; }
.advisory-sunlight-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.advisory-sunlight-fields label,
.advisory-sunlight-option { display: grid; gap: 5px; color: var(--gf-text-4); font-size: 11px; }
.advisory-sunlight-fields select { min-height: 38px; padding: 0 10px; color: var(--gf-text-1); border: 1px solid var(--gf-line); border-radius: var(--adv-radius-sm); background: var(--gf-surface-2); }
.advisory-sunlight-option { grid-template-columns: auto 1fr; align-items: center; }
.advisory-sunlight-status { min-height: 18px; margin: 0; color: var(--gf-text-3); font-size: 11px; line-height: 1.45; }
.advisory-sunlight-result { padding: 14px; border: 1px solid var(--gf-line); border-radius: var(--adv-radius-sm); background: var(--gf-surface-2); }
.advisory-sunlight-result strong { display: block; margin-top: 4px; color: var(--gf-accent); font-size: 20px; }
.advisory-sunlight-result p,
.advisory-sunlight-result ul { margin: 8px 0 0; color: var(--gf-text-3); font-size: 11px; line-height: 1.5; }
.advisory-sunlight-result ul { padding-left: 17px; }
.advisory-sunlight-actions { display: flex; justify-content: flex-end; gap: 8px; }

.advisory-checkout-field {
  display: grid; gap: 5px; margin: 0 0 10px;
  color: var(--gf-text-4); font-size: 11px;
}
.advisory-checkout-field input[type="email"] {
  min-height: 38px; padding: 0 10px; color: var(--gf-text-1);
  border: 1px solid var(--gf-line); border-radius: var(--adv-radius-sm); background: var(--gf-surface-2);
}
.advisory-checkout-terms {
  grid-template-columns: auto 1fr; align-items: start; gap: 8px;
}
.advisory-checkout-terms a { color: var(--gf-blue); }

.advisory-product-reason,
.advisory-product-brief { margin: 0; color: var(--gf-text-3); font-size: 12px; line-height: 1.45; }
.advisory-product-brief { display: grid; gap: 5px; color: var(--gf-text-4); font-size: 11px; }
.advisory-product-brief textarea,
.advisory-product-brief input {
  min-height: 38px; padding: 8px 10px; color: var(--gf-text-1);
  border: 1px solid var(--gf-line); border-radius: var(--adv-radius-sm); background: var(--gf-surface-2);
}
.advisory-product-brief textarea { min-height: 72px; resize: vertical; }
.advisory-product-sources { margin: 0; padding-left: 18px; color: var(--gf-text-3); font-size: 11px; line-height: 1.5; }
.advisory-product-sources li[data-state="blocked"] { color: var(--gf-status-alert); }
.advisory-product-sources li[data-state="ok"] { color: var(--gf-status-ok); }
.advisory-runs { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gf-line); }
.advisory-runs-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.advisory-runs-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.advisory-runs-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 11px; color: var(--gf-text-3); }
.advisory-runs-list a { color: var(--gf-blue); }

.advisory-order-status {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: var(--adv-radius-sm);
  background: var(--gf-surface-2);
  color: var(--gf-text-4);
  font-size: 10.5px;
  line-height: 1.5;
}
.advisory-order-status a { color: var(--gf-blue); }

/* -------------------------------------------------------------------------
   8. Responsivt och rörelsereducerat läge
   ------------------------------------------------------------------------- */

@media (max-width: 620px) {
  [data-surface="advisory"] .workspace { padding: 6px; }
  .advisory-group-nav { grid-template-columns: 1fr; }
  .advisory-cards {
    padding: 12px;
  }
  .advisory-card { flex-basis: min(82vw, 260px); }
  .advisory-product-rail-head { display: grid; gap: 6px; padding: 16px 14px 6px; }
  .advisory-sunlight-fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .advisory-site,
  .advisory-cart-list li,
  .advisory-card,
  .advisory-card-glyph,
  .advisory-card-state,
  .advisory-cart-trigger,
  .advisory-cart-trigger b,
  .advisory-cart-list .rm,
  .advisory-group-trigger,
  .advisory-group-icon,
  .advisory-pay-row .button {
    animation: none !important;
    transition: none !important;
  }
}

/* Katalogens två nivåer: sex bildingångar och deras korta underprodukter. */
[data-surface="advisory"] { --gf-status-warn: #c7ff54; }
.advisory-group-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 16px; }
.advisory-group-trigger {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: end;
  min-height: 142px;
  padding: 12px 13px;
  background: #080d19;
}
.advisory-group-scene,
.advisory-group-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.advisory-group-scene { object-fit: cover; object-position: center 52%; opacity: .8; transition: transform .45s var(--adv-bounce), opacity .25s var(--gf-ease); }
.advisory-group-shade { background: linear-gradient(180deg, rgba(6, 11, 21, .03) 6%, rgba(6, 11, 21, .84) 80%, #080d19 100%); }
.advisory-group-trigger:hover .advisory-group-scene,
.advisory-group-trigger:focus-visible .advisory-group-scene,
.advisory-group-trigger.is-active .advisory-group-scene { opacity: 1; transform: scale(1.055); }
.advisory-group-copy span {
  color: inherit;
  font-family: "Michroma", var(--gf-font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.28;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.advisory-group-trigger[data-group="C"], .advisory-card[data-group="C"],
.advisory-group-trigger[data-group="E"], .advisory-card[data-group="E"] { --card-bg: #1d2e1b; --card-accent: #c7ff54; }
/* Statusetiketten ligger absolutpositionerad i kortets övre högra hörn.
   Utan reserverad höjd lade den sig ovanpå produktrubriken på samtliga kort.
   30px toppadding ger etiketten en egen rad; korthöjden växer lika mycket. */
.advisory-card--subproduct { flex-basis: 214px; min-height: 154px; }
.advisory-card--subproduct .advisory-card-body { flex: 1; justify-content: space-between; padding: 30px 13px 14px; }
.advisory-card--subproduct .advisory-card-title { font-family: "Michroma", var(--gf-font-display); font-size: 13px; font-weight: 400; letter-spacing: -.035em; line-height: 1.42; }
.advisory-catalogue-note {
  margin: 10px 0 0;
  padding: 9px 11px;
  color: var(--gf-text-3);
  border: 1px solid color-mix(in srgb, var(--gf-status-warn) 32%, var(--gf-line));
  border-radius: var(--adv-radius-sm, 4px);
  background: rgba(6, 8, 11, .82);
  font-family: var(--gf-font-mono);
  font-size: 10px;
  line-height: 1.5;
}
.advisory-catalogue-note:empty,
.advisory-catalogue-note[data-visible="false"] { display: none; }

@media (max-width: 620px) {
  .advisory-group-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advisory-group-trigger { min-height: 142px; }
}

/* Huvudytans rubriker: samma ljusa färg och luftigare Michroma. */
.advisory-group-trigger { grid-template-columns: minmax(0, 1fr) auto; }
.advisory-group-copy span,
.advisory-card-title { color: var(--gf-paper); letter-spacing: .015em; }
.advisory-card--subproduct .advisory-card-title { letter-spacing: .015em; }

/* Advisory ska alltid börja med katalogen, även när Titan växlar till mobilvy.
   Titan använder `display: block` under 780px vilket annars återgår till
   markuppens ordning: karta, kundvagn, katalog. */
@media (max-width: 780px) {
  [data-surface="advisory"] .workspace-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(610px, auto) auto;
    grid-template-areas:
      "catalogue"
      "map"
      "cart";
  }

  [data-surface="advisory"] .advisory-product-rail {
    grid-area: catalogue;
    grid-column: 1;
    grid-row: 1;
  }

  [data-surface="advisory"] .map-panel {
    grid-area: map;
    grid-column: 1;
    grid-row: 2;
  }

  [data-surface="advisory"] .advisory-panel {
    grid-area: cart;
    grid-column: 1;
    grid-row: 3;
  }
}

/* GeoFlows egna områdesetiketter: nedtonade och något mindre i Advisory. */
[data-surface="advisory"] .titan-map-place-label {
  color: #4d555d;
  font-size: 9px;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .92);
}

[data-surface="advisory"] .titan-map-place-label.city { font-size: 13px; }
[data-surface="advisory"] .titan-map-place-label.street { font-size: 7px; }


/* --- Kategorikorten i mobil ----------------------------------------------
   Under 620px delar kortet fortfarande bredden mellan rubrik och artikelrakning
   (minmax(0,1fr) auto). Rubrikkolumnen blir da ~72px medan "Kartproduktion" i
   19px Michroma kraver ~187px. Kortet har overflow:hidden, sa rubrikerna kapades
   pa alla sex kategorikort. Rakningen far en egen rad och rubriken hela bredden.
--------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .advisory-group-trigger { grid-template-columns: minmax(0, 1fr); }
  .advisory-group-copy { min-width: 0; }
  .advisory-group-copy span { font-size: 13px; overflow-wrap: break-word; }
  .advisory-group-count { justify-self: start; text-align: left; }
}