:root {
    /* Atlas Works — light, retail-friendly palette anchored to Atlas navy */
    --navy-900: #0E2A47;
    --navy-800: #143560;
    --navy-700: #1B477F;
    --navy-600: #2456A0;
    --navy-500: #2E80FF; /* brand link/active */
    --navy-50:  #F4F7FB;
    --ink-1: #0E1726;
    --ink-2: #2A3648;
    --ink-3: #5B6678;
    --ink-4: #8A95A6;
    --line:  #E6EBF2;
    --line-2:#D4DDEA;
    --paper: #FFFFFF;
    --cream: #FAFBFD;
    --warm:  #FFF7EE;
    --orange:#E76A1E;
    --green: #1F8A52;
    --green-bg: #E8F5EE;
    --pill-bg: #F2F5FA;
    --shadow-1: 0 1px 0 rgba(14,42,71,0.04), 0 4px 12px rgba(14,42,71,0.04);
    --shadow-2: 0 6px 20px rgba(14,42,71,0.08), 0 1px 0 rgba(14,42,71,0.04);
    --shadow-3: 0 14px 40px rgba(14,42,71,0.12);

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Space Grotesk", "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--cream);
    color: var(--ink-1);
    font-family: var(--font-sans);
    font-size: 16px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: rgba(46,128,255,0.2); color: var(--navy-900); }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; }

  .wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }

  /* ─── Promo strip ─── */
  .promo {
    background: var(--navy-900); color: #DCE6F2;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .promo-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 9px 0;
    overflow: hidden;
  }
  .promo-strip { display: flex; gap: 28px; }
  .promo-strip span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
  .promo-strip svg { color: #6FA3F0; }
  .promo-pay { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.65); }
  .promo-pay .chip { padding: 2px 8px; border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; font-weight: 500; color: #fff; font-size: 11px; }

  /* ─── Header ─── */
  header.top {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .top-row { display: flex; align-items: center; gap: 20px; padding: 14px 0; }
  .brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; }
  .brand-mark {
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--navy-900);
    display: grid; place-items: center;
    color: #fff;
  }
  .brand-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 19px; letter-spacing: -0.005em;
    color: var(--navy-900);
  }
  .brand-name .light { color: var(--ink-3); font-weight: 500; }

  .search {
    flex: 1; max-width: 560px;
    position: relative;
  }
  .search input {
    width: 100%; padding: 11px 14px 11px 42px;
    border: 1px solid var(--line-2);
    border-radius: 10px;
    background: var(--paper);
    font: 500 14px/1.4 var(--font-sans);
    color: var(--ink-1);
    transition: border-color .15s, box-shadow .15s;
  }
  .search input::placeholder { color: var(--ink-4); font-weight: 400; }
  .search input:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(46,128,255,0.18); }
  .search .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-4); pointer-events: none; }
  .search .suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--paper); border: 1px solid var(--line-2);
    border-radius: 10px; box-shadow: var(--shadow-3);
    overflow: hidden;
  }
  .search .suggest-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer;
    border-bottom: 1px solid var(--line);
  }
  .search .suggest-row:last-child { border-bottom: none; }
  .search .suggest-row:hover { background: var(--cream); }
  .search .suggest-row .thumb {
    width: 36px; height: 36px; border-radius: 6px;
    background: linear-gradient(135deg, #EAF1FB, #DDE7F4);
    display: grid; place-items: center; color: var(--navy-700); flex: 0 0 auto;
  }
  .search .suggest-row .name { font-size: 13.5px; color: var(--ink-1); }
  .search .suggest-row .price { margin-left: auto; font-weight: 600; font-size: 13px; color: var(--navy-900); }

  .top-actions { display: inline-flex; align-items: center; gap: 4px; }
  .icon-btn {
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid transparent; background: transparent;
    display: grid; place-items: center; color: var(--ink-2); cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
  }
  .icon-btn:hover { background: var(--navy-50); border-color: var(--line); }
  .icon-btn .badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--orange); color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
  }

  .nav { display: flex; gap: 4px; padding: 4px 0 12px; align-items: center; flex-wrap: wrap; }
  .nav a {
    padding: 7px 12px; border-radius: 8px;
    color: var(--ink-2); font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s;
  }
  .nav a:hover { background: var(--navy-50); color: var(--navy-900); }
  .nav a.active { color: var(--navy-900); background: var(--navy-50); }
  .nav a.cta {
    margin-left: auto; padding: 9px 16px;
    background: var(--navy-900); color: #fff; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .nav a.cta:hover { background: var(--navy-800); color: #fff; }

  /* ─── Hero ─── */
  .hero { padding: 56px 0 64px; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--navy-50); color: var(--navy-700);
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    border: 1px solid var(--line-2);
  }
  .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(31,138,82,0.15); }
  .hero h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(40px, 5.4vw, 72px);
    line-height: 1.02; letter-spacing: -0.025em;
    color: var(--navy-900);
    margin: 18px 0 22px; text-wrap: balance;
  }
  .hero h1 em {
    font-style: normal; color: var(--orange);
  }
  .hero p.lead {
    font-size: 19px; line-height: 1.55;
    color: var(--ink-2); max-width: 50ch; text-wrap: pretty;
    margin: 0 0 32px;
  }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 22px; border-radius: 10px;
    font-size: 14.5px; font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer; transition: all .15s ease;
  }
  .btn-primary { background: var(--navy-900); color: #fff; }
  .btn-primary:hover { background: var(--navy-800); transform: translateY(-1px); box-shadow: var(--shadow-2); }
  .btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink-1); }
  .btn-ghost:hover { background: var(--paper); border-color: var(--ink-3); }
  .btn-orange { background: var(--orange); color: #fff; }
  .btn-orange:hover { background: #C75812; }

  .hero-trust {
    margin-top: 36px; padding-top: 28px;
    border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(4, auto); gap: 28px; justify-content: start;
  }
  .hero-trust .item { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 13.5px; }
  .hero-trust svg { color: var(--green); flex: 0 0 auto; }

  /* Hero visual */
  .hero-visual {
    position: relative; aspect-ratio: 4 / 5; min-height: 480px;
  }
  .hero-card {
    position: absolute;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 18px; box-shadow: var(--shadow-3);
    overflow: hidden;
  }
  .hv-laptop {
    inset: 4% 6% 18% 8%;
    background: linear-gradient(160deg, #F0F4FA 0%, #DEE7F4 100%);
    padding: 28px;
    display: flex; flex-direction: column;
  }
  .hv-laptop .tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--paper); color: var(--navy-700);
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    width: fit-content; border: 1px solid var(--line-2);
  }
  .hv-laptop .name { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); line-height: 1.15; letter-spacing: -0.01em; }
  .hv-laptop .specs { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); }
  .hv-laptop .price { margin-top: 14px; display: flex; align-items: baseline; gap: 10px; }
  .hv-laptop .price .now { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--navy-900); }
  .hv-laptop .price .was { font-size: 13px; color: var(--ink-4); text-decoration: line-through; }
  .hv-laptop .laptop-art {
    margin: 14px -12px 0;
    aspect-ratio: 16/10; border-radius: 10px;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,0.7), transparent 60%),
      linear-gradient(180deg, #2A3648, #0E1726);
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow: inset 0 0 0 4px #1A2230, 0 12px 30px rgba(14,23,38,0.25);
    display: grid; place-items: center;
    position: relative;
  }
  .hv-laptop .laptop-art::before {
    content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px;
    background: rgba(255,255,255,0.06); border-radius: 2px; transform: translateX(-50%);
  }
  .hv-laptop .laptop-art .screen {
    width: 86%; height: 78%; border-radius: 4px;
    background: linear-gradient(135deg, #1B477F, #2E80FF 60%, #4EA0FF);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.35);
    display: grid; place-items: center;
    color: rgba(255,255,255,0.9); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em;
    font-size: 13px;
  }
  .hv-pos {
    right: 0; bottom: 6%; width: 58%;
    padding: 18px;
    background: var(--paper);
  }
  .hv-pos .label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--orange);
  }
  .hv-pos h4 { margin: 4px 0 10px; font-size: 16px; color: var(--navy-900); font-weight: 700; }
  .hv-pos .pos-screen {
    aspect-ratio: 4/3; border-radius: 8px;
    background: linear-gradient(160deg, #0E2A47, #143560);
    padding: 12px; color: #fff; display: flex; flex-direction: column; gap: 6px;
    border: 1px solid rgba(255,255,255,0.06);
  }
  .hv-pos .pos-row { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--font-mono); color: rgba(255,255,255,0.85); }
  .hv-pos .pos-row.total { padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.2); margin-top: auto; font-size: 13px; font-weight: 700; }
  .hv-pos .pos-keypad { margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .hv-pos .pos-keypad span {
    aspect-ratio: 1.6; border-radius: 6px; background: rgba(255,255,255,0.06);
    display: grid; place-items: center; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85);
  }
  .hv-pos .pos-keypad span.pay { background: var(--orange); color: #fff; grid-column: span 3; aspect-ratio: 4; font-size: 13px; }

  .hv-stamp {
    left: -8px; top: 12%; width: 100px; height: 100px;
    border-radius: 50%; background: var(--orange); color: #fff;
    display: grid; place-items: center; text-align: center;
    transform: rotate(-12deg); box-shadow: var(--shadow-2);
    border: 1px solid #C75812;
  }
  .hv-stamp .big { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; }
  .hv-stamp .sm  { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; margin-top: 2px; }

  /* ─── Section base ─── */
  section.sec { padding: 80px 0; }
  section.sec.alt { background: var(--paper); border-block: 1px solid var(--line); }
  .sec-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 36px; gap: 24px; flex-wrap: wrap; }
  .sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
  .sec-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.02em; line-height: 1.1;
    color: var(--navy-900); margin: 0; text-wrap: balance;
  }
  .sec-sub { color: var(--ink-3); font-size: 16px; margin-top: 8px; max-width: 56ch; }
  .sec-link { color: var(--navy-900); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
  .sec-link:hover { color: var(--navy-700); }

  /* ─── Brand strip ─── */
  .brands {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--paper); overflow: hidden;
  }
  .brand-cell {
    padding: 22px; border-right: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 4px;
    cursor: pointer;
    transition: background .15s;
  }
  .brand-cell:last-child { border-right: none; }
  .brand-cell:hover { background: var(--navy-50); }
  .brand-cell .name {
    font-family: var(--font-display); font-weight: 700; font-size: 22px;
    color: var(--navy-900); letter-spacing: -0.01em;
  }
  .brand-cell .count { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }
  .brand-cell.disabled .name { color: var(--ink-4); }
  .brand-cell.disabled .count { color: var(--ink-4); }

  /* ─── Services ─── */
  .services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .svc-card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; padding: 26px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
  }
  .svc-card:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
  .svc-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--navy-50); color: var(--navy-700);
    display: grid; place-items: center;
    margin-bottom: 18px;
  }
  .svc-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy-900); margin: 0 0 6px; letter-spacing: -0.005em; }
  .svc-card .lede { font-size: 14px; color: var(--ink-2); margin: 0 0 4px; }
  .svc-card p { font-size: 14px; color: var(--ink-3); margin: 0; }

  /* ─── Compare table (Wat je meestal krijgt vs Atlas Works) ─── */
  .compare {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  .compare-card {
    border-radius: 16px; padding: 26px 26px 22px;
    border: 1px solid var(--line); background: var(--paper);
  }
  .compare-card.bad { background: #FAFBFD; }
  .compare-card.good { background: var(--paper); border-color: var(--navy-900); box-shadow: 0 0 0 2px var(--navy-900); position: relative; }
  .compare-card.good::before {
    content: "Atlas Works"; position: absolute; top: -12px; left: 22px;
    background: var(--navy-900); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 5px;
  }
  .compare-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-900); margin: 0 0 14px; }
  .compare-card.bad h4 { color: var(--ink-3); }
  .compare-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .compare-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
  .compare-card.bad li { color: var(--ink-3); }
  .compare-card.good li { color: var(--ink-1); }
  .compare-list .ic {
    width: 22px; height: 22px; border-radius: 50%;
    display: grid; place-items: center; flex: 0 0 auto;
  }
  .compare-card.bad .ic { background: #F3D7D7; color: #B23A3A; }
  .compare-card.good .ic { background: var(--green-bg); color: var(--green); }

  /* ─── Process / werkwijze ─── */
  .process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }
  .step { padding: 26px; border-right: 1px solid var(--line); position: relative; }
  .step:last-child { border-right: none; }
  .step .num {
    font-family: var(--font-mono); font-size: 11px; color: var(--orange);
    font-weight: 600; letter-spacing: 0.16em;
  }
  .step h4 { margin: 12px 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy-900); }
  .step p { margin: 0; font-size: 14px; color: var(--ink-3); }

  /* ─── Products grid ─── */
  .products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .product {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
  }
  .product:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
  .product .img {
    aspect-ratio: 4/3;
    background: linear-gradient(160deg, #F0F4FA, #DEE7F4);
    position: relative; display: grid; place-items: center;
    border-bottom: 1px solid var(--line);
  }
  .product .img .stamp {
    position: absolute; left: 12px; top: 12px;
    padding: 4px 9px; border-radius: 6px;
    background: var(--green-bg); color: var(--green);
    font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .product .img .stamp .dot { width: 5px; height: 5px; background: var(--green); border-radius: 50%; }
  .product .img .cond {
    position: absolute; right: 12px; top: 12px;
    padding: 3px 9px; border-radius: 6px;
    background: var(--paper); border: 1px solid var(--line-2);
    font-size: 11px; font-weight: 600; color: var(--ink-2);
  }
  .product .img .cond.new { background: var(--navy-50); color: var(--navy-700); border-color: var(--navy-50); }
  .product .body {
    padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 8px; flex: 1;
  }
  .product .name {
    font-size: 14.5px; font-weight: 600; line-height: 1.35;
    color: var(--navy-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 38px;
  }
  .product .specs { display: flex; gap: 6px; flex-wrap: wrap; }
  .product .specs span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--cream); }
  .product .price-row {
    display: flex; align-items: baseline; gap: 10px; margin-top: auto;
    padding-top: 12px; border-top: 1px dashed var(--line);
  }
  .product .price { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); letter-spacing: -0.01em; }
  .product .was { font-size: 12.5px; color: var(--ink-4); text-decoration: line-through; }
  .product .in3 { font-size: 11px; color: var(--ink-3); margin-left: auto; font-family: var(--font-mono); }
  .product .add {
    margin-top: 4px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px; background: var(--cream);
    border: 1px solid var(--line);
    font-size: 13px; font-weight: 600; color: var(--navy-900);
    transition: background .15s;
  }
  .product .add:hover { background: var(--navy-50); }
  .product .add.added { background: var(--green-bg); color: var(--green); border-color: #BFE2D0; }

  /* Hero quick categories */
  .quick-cats {
    margin-top: 40px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  }
  .qc {
    padding: 18px 20px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--paper);
    cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    transition: border-color .15s, background .15s;
  }
  .qc:hover { border-color: var(--navy-900); background: var(--navy-50); }
  .qc .ic {
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--navy-50); color: var(--navy-700);
    display: grid; place-items: center; flex: 0 0 auto;
  }
  .qc .lbl { font-size: 13.5px; font-weight: 600; color: var(--navy-900); line-height: 1.25; }
  .qc .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

  /* ─── Reviews ─── */
  .reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .review {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 14px; padding: 28px;
  }
  .stars { color: #F1A82C; font-size: 16px; letter-spacing: 1px; }
  .review h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-900); margin: 14px 0 10px; }
  .review p { font-size: 15px; color: var(--ink-2); margin: 0; line-height: 1.6; }
  .review .who { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
  .review .avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy-700), var(--navy-500));
    color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px;
  }
  .review .who .name { font-size: 14px; font-weight: 600; color: var(--ink-1); }
  .review .who .role { font-size: 12.5px; color: var(--ink-3); }

  /* ─── FAQ ─── */
  .faq { display: grid; gap: 8px; }
  .faq-item {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 12px; overflow: hidden;
  }
  .faq-item.open { border-color: var(--navy-900); }
  .faq-q {
    padding: 18px 22px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 15.5px; font-weight: 600; color: var(--navy-900);
    gap: 16px;
  }
  .faq-q .plus { width: 22px; height: 22px; border-radius: 50%; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; flex: 0 0 auto; transition: transform .2s; }
  .faq-item.open .faq-q .plus { transform: rotate(45deg); background: var(--navy-900); color: #fff; }
  .faq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
  }
  .faq-item.open .faq-a { max-height: 240px; }
  .faq-a-inner {
    padding: 0 22px 20px; font-size: 14.5px; color: var(--ink-2); line-height: 1.6;
  }

  /* ─── Contact ─── */
  .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; }
  .contact-info { background: var(--navy-900); color: #fff; border-radius: 16px; padding: 36px; position: relative; overflow: hidden; }
  .contact-info::before {
    content: ""; position: absolute; right: -80px; top: -80px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(46,128,255,0.4), transparent 70%);
  }
  .contact-info h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0 0 8px; letter-spacing: -0.015em; }
  .contact-info > p { color: rgba(255,255,255,0.75); font-size: 15px; margin: 0 0 28px; max-width: 38ch; }
  .ci-row { padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; gap: 14px; }
  .ci-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
  .ci-row .ic {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(255,255,255,0.08); color: #fff; display: grid; place-items: center; flex: 0 0 auto;
  }
  .ci-row .lbl { font-size: 11.5px; color: rgba(255,255,255,0.6); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
  .ci-row .val { font-size: 15px; color: #fff; font-weight: 500; margin-top: 2px; }

  .contact-google {
    margin-top: 22px; padding: 14px 18px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px; display: flex; align-items: center; gap: 12px;
  }
  .contact-google .stars { font-size: 14px; }
  .contact-google .label { font-size: 13px; color: rgba(255,255,255,0.85); }
  .contact-google .arrow { margin-left: auto; color: rgba(255,255,255,0.7); }

  .contact-form {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: 16px; padding: 36px;
  }
  .contact-form h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); margin: 0 0 6px; letter-spacing: -0.01em; }
  .contact-form > p { font-size: 14px; color: var(--ink-3); margin: 0 0 22px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .field label { font-size: 12px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 6px; }
  .field input, .field textarea {
    width: 100%; padding: 11px 14px;
    border: 1px solid var(--line-2); border-radius: 9px;
    background: var(--paper); font: 400 14px/1.4 var(--font-sans);
    color: var(--ink-1); resize: vertical;
  }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(46,128,255,0.16); }
  .field { margin-bottom: 12px; }
  .field-actions { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .field-actions .note { font-size: 12px; color: var(--ink-4); font-family: var(--font-mono); }
  .form-success {
    padding: 14px 16px; border-radius: 10px; background: var(--green-bg); color: var(--green);
    border: 1px solid #BFE2D0; font-weight: 600; font-size: 14px;
    display: flex; align-items: center; gap: 10px;
  }

  /* ─── Footer ─── */
  footer {
    background: var(--navy-900); color: rgba(255,255,255,0.75);
    padding: 56px 0 28px;
    margin-top: 0;
  }
  .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; }
  .foot-brand { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; margin-bottom: 8px; }
  .foot-brand-sub { font-size: 14px; color: rgba(255,255,255,0.65); max-width: 32ch; }
  .foot-col h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
  .foot-col a { display: block; padding: 4px 0; font-size: 14px; color: rgba(255,255,255,0.7); }
  .foot-col a:hover { color: #fff; }
  .foot-bot {
    margin-top: 40px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.12);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: rgba(255,255,255,0.55);
    flex-wrap: wrap; gap: 14px;
  }

  /* ─── Cart drawer ─── */
  .cart-overlay {
    position: fixed; inset: 0; background: rgba(14,42,71,0.4);
    z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .cart-overlay.open { opacity: 1; pointer-events: auto; }
  .cart-drawer {
    position: fixed; right: 0; top: 0; bottom: 0;
    width: min(420px, 100%);
    background: var(--paper); z-index: 81;
    box-shadow: -10px 0 40px rgba(14,42,71,0.18);
    transform: translateX(100%); transition: transform .3s ease;
    display: flex; flex-direction: column;
  }
  .cart-drawer.open { transform: translateX(0); }
  .cart-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
  .cart-head h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-900); margin: 0; }
  .cart-body { flex: 1; overflow: auto; padding: 8px 0; }
  .cart-row { padding: 14px 24px; display: flex; gap: 14px; border-bottom: 1px solid var(--line); }
  .cart-row .thumb { width: 56px; height: 56px; border-radius: 8px; background: var(--navy-50); display: grid; place-items: center; color: var(--navy-700); flex: 0 0 auto; }
  .cart-row .name { font-size: 13.5px; font-weight: 600; color: var(--navy-900); line-height: 1.35; }
  .cart-row .price { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy-900); margin-top: 6px; }
  .cart-row .qty { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 3px; background: var(--cream); border-radius: 6px; border: 1px solid var(--line); }
  .cart-row .qty button { width: 22px; height: 22px; border-radius: 4px; border: none; background: transparent; color: var(--navy-900); cursor: pointer; font-weight: 700; }
  .cart-row .qty button:hover { background: var(--navy-50); }
  .cart-row .qty span { font-size: 13px; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
  .cart-empty { padding: 60px 24px; text-align: center; color: var(--ink-3); }
  .cart-foot { padding: 20px 24px; border-top: 1px solid var(--line); }
  .cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
  .cart-total .lbl { font-size: 13px; color: var(--ink-3); }
  .cart-total .v { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); }
  .cart-foot .btn { width: 100%; justify-content: center; }

  /* Toasts */
  .toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--navy-900); color: #fff; padding: 12px 18px;
    border-radius: 999px; font-size: 13.5px; font-weight: 500;
    box-shadow: var(--shadow-3); z-index: 90;
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
    display: flex; align-items: center; gap: 10px;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast svg { color: #4EE599; }

  /* Reveal */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s, transform .6s; }
  .reveal.in { opacity: 1; transform: none; }

  /* Responsive */
  @media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-visual { min-height: 460px; }
    .services, .products, .process, .quick-cats { grid-template-columns: 1fr 1fr; }
    .brands { grid-template-columns: 1fr 1fr 1fr; }
    .brand-cell:nth-child(3n) { border-right: none; }
    .compare, .reviews, .contact-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .hero-trust { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .promo-strip span:nth-child(n+3) { display: none; }
    .top-row { flex-wrap: wrap; }
    .search { order: 3; width: 100%; max-width: none; flex-basis: 100%; }
    .nav { display: none; }
    .services, .products, .process, .quick-cats, .brands { grid-template-columns: 1fr 1fr; }
    .step, .brand-cell { border-right: none; border-bottom: 1px solid var(--line); }
    .step:last-child, .brand-cell:last-child { border-bottom: none; }
    .foot-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 38px; }
  }


/* ─── Page hero (compact) ─── */
.page-hero { padding: 40px 0 28px; border-bottom: 1px solid var(--line); background: var(--paper); }
.page-hero .crumbs { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.page-hero .crumbs a { color: var(--ink-3); }
.page-hero .crumbs a:hover { color: var(--navy-700); }
.page-hero .crumbs span.sep { color: var(--ink-4); }
.page-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.02em; line-height: 1.05;
  color: var(--navy-900); margin: 14px 0 10px; text-wrap: balance;
}
.page-hero .lead { font-size: 17px; color: var(--ink-2); max-width: 60ch; margin: 0; line-height: 1.55; }

/* ─── Shop layout (sidebar + grid) ─── */
.shop-layout { display: grid; grid-template-columns: 256px 1fr; gap: 32px; padding: 36px 0 80px; }
.shop-side .side-block { padding: 18px 0; border-top: 1px solid var(--line); }
.shop-side .side-block:first-child { border-top: none; padding-top: 4px; }
.shop-side h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.shop-side .filter { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 14px; color: var(--ink-2); user-select: none; }
.shop-side .filter input { accent-color: var(--navy-900); width: 16px; height: 16px; }
.shop-side .filter:hover { color: var(--navy-900); }
.shop-side .filter .count { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4); }
.shop-side .price-range { display: flex; gap: 8px; }
.shop-side .price-range input { flex: 1; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: 500 13px var(--font-sans); }

.shop-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px; flex-wrap: wrap;
}
.shop-toolbar .left { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shop-toolbar .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--navy-50); color: var(--navy-700);
  font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2);
}
.shop-toolbar .chip button { border: none; background: transparent; color: var(--navy-700); cursor: pointer; padding: 0; display: grid; place-items: center; }
.shop-toolbar .count-text { font-size: 14px; color: var(--ink-3); }
.shop-toolbar select { padding: 8px 32px 8px 12px; border: 1px solid var(--line-2); border-radius: 8px; font: 500 13.5px var(--font-sans); background: var(--paper); color: var(--ink-1); cursor: pointer; }

.shop-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.cat-tile {
  padding: 22px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .15s, background .15s;
}
.cat-tile:hover { border-color: var(--navy-900); transform: translateY(-2px); }
.cat-tile.active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.cat-tile.active .cat-count { color: rgba(255,255,255,0.6); }
.cat-tile .cat-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; }
.cat-tile.active .cat-ic { background: rgba(255,255,255,0.12); color: #fff; }
.cat-tile .cat-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: inherit; letter-spacing: -0.005em; }
.cat-tile .cat-count { font-size: 12px; color: var(--ink-4); font-family: var(--font-mono); }

/* ─── Deal banner ─── */
.deal-banner {
  margin: 28px 0;
  background: var(--navy-900);
  color: #fff;
  border-radius: 18px;
  padding: 32px 36px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px;
  align-items: center;
  position: relative; overflow: hidden;
}
.deal-banner::before {
  content: ""; position: absolute; right: -120px; top: -80px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(231,106,30,0.4), transparent 70%);
}
.deal-banner .label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.deal-banner h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.1;
  margin: 14px 0 10px;
  color: #fff; text-wrap: balance;
}
.deal-banner p { color: rgba(255,255,255,0.78); margin: 0 0 20px; font-size: 15px; max-width: 50ch; }
.deal-banner .countdown { display: flex; gap: 10px; }
.deal-banner .cd-cell {
  padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  text-align: center; min-width: 64px;
  position: relative; z-index: 1;
}
.deal-banner .cd-cell .v { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; }
.deal-banner .cd-cell .l { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255,255,255,0.55); text-transform: uppercase; }
.deal-banner .cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }

/* ─── Bundle card (deals + kassa) ─── */
.bundle {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px;
  display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 24px; align-items: center;
}
.bundle .b-items { display: flex; gap: 14px; align-items: center; }
.bundle .b-thumb {
  width: 78px; height: 78px; border-radius: 10px;
  background: linear-gradient(160deg, #F0F4FA, #DEE7F4);
  display: grid; place-items: center; color: var(--navy-700);
  flex: 0 0 auto;
}
.bundle .plus { font-size: 22px; color: var(--ink-4); font-weight: 300; }
.bundle .b-meta h4 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-900); margin: 0 0 6px; }
.bundle .b-meta p { font-size: 13.5px; color: var(--ink-3); margin: 0; }
.bundle .b-price { text-align: right; }
.bundle .b-price .was { font-size: 13px; color: var(--ink-4); text-decoration: line-through; }
.bundle .b-price .now { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--navy-900); display: block; line-height: 1; margin: 4px 0; }
.bundle .b-price .save { display: inline-block; font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-bg); padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; }

/* ─── Stat row ─── */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-row .stat { padding: 0 22px; border-right: 1px solid var(--line); }
.stat-row .stat:last-child { border-right: none; }
.stat-row .v { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--navy-900); letter-spacing: -0.02em; line-height: 1; }
.stat-row .l { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

/* ─── ROI calculator ─── */
.roi-card {
  background: var(--navy-900); color: #fff;
  border-radius: 18px; padding: 36px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  position: relative; overflow: hidden;
}
.roi-card::before {
  content: ""; position: absolute; left: -120px; bottom: -120px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,128,255,0.3), transparent 70%);
}
.roi-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: #fff; margin: 0 0 6px; letter-spacing: -0.01em; }
.roi-card > .left > p { color: rgba(255,255,255,0.7); font-size: 15px; margin: 0 0 22px; }
.roi-card .roi-input { margin-bottom: 16px; position: relative; z-index: 1; }
.roi-card .roi-input label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: rgba(255,255,255,0.7); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.roi-card .roi-input label .v { color: #fff; font-family: var(--font-display); font-size: 18px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.roi-card input[type=range] { width: 100%; accent-color: var(--orange); }
.roi-card .roi-out { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 26px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.roi-card .roi-out .lbl { font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.roi-card .roi-out .big { font-family: var(--font-display); font-weight: 700; font-size: 56px; color: var(--orange); letter-spacing: -0.02em; line-height: 1; margin: 8px 0; }
.roi-card .roi-out .sub { font-size: 14px; color: rgba(255,255,255,0.78); margin-bottom: 18px; }
.roi-card .roi-out .roi-detail { padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.roi-card .roi-out .roi-detail .item .l { font-size: 11px; color: rgba(255,255,255,0.55); }
.roi-card .roi-out .roi-detail .item .v { font-family: var(--font-display); font-size: 20px; color: #fff; font-weight: 700; margin-top: 2px; }

/* ─── Vertical pick (horeca / retail) ─── */
.vertical-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vp-card {
  padding: 32px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--paper); cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; gap: 14px; min-height: 260px;
}
.vp-card:hover { border-color: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.vp-card .vp-tag { font-family: var(--font-mono); font-size: 11px; color: var(--orange); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.vp-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--navy-900); margin: 0; letter-spacing: -0.015em; line-height: 1.1; }
.vp-card p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.vp-card ul { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 6px; }
.vp-card ul li { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.vp-card ul li svg { color: var(--green); flex: 0 0 auto; }
.vp-card .vp-foot { padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.vp-card .vp-from { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.vp-card .vp-from b { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); margin-left: 6px; }

/* ─── PDP ─── */
.pdp { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 36px 0; }
.pdp-gallery { display: flex; flex-direction: column; gap: 12px; }
.pdp-main {
  aspect-ratio: 4/3; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, #F0F4FA, #DEE7F4);
  display: grid; place-items: center; padding: 36px;
  position: relative;
}
.pdp-main img { width: 100%; height: 100%; object-fit: contain; }
.pdp-main .stamp {
  position: absolute; left: 16px; top: 16px;
  padding: 5px 11px; border-radius: 6px;
  background: var(--green-bg); color: var(--green);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pdp-thumbs .t {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(160deg, #F4F7FB, #E6EBF2);
  display: grid; place-items: center; cursor: pointer;
  color: var(--navy-700);
}
.pdp-thumbs .t.sel { border-color: var(--navy-900); border-width: 2px; }

.pdp-info .stars { color: #F1A82C; font-size: 14px; letter-spacing: 1px; }
.pdp-info .rate-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.pdp-info h1 { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; color: var(--navy-900); margin: 0 0 14px; }
.pdp-info .price-block { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 22px; }
.pdp-info .price-now { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--navy-900); letter-spacing: -0.02em; line-height: 1; }
.pdp-info .price-was { font-size: 16px; color: var(--ink-4); text-decoration: line-through; }
.pdp-info .save-pill { background: var(--green-bg); color: var(--green); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; }
.pdp-info .vat { margin-left: auto; font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); }

.pdp-options { display: grid; gap: 18px; margin-bottom: 22px; }
.pdp-opt h5 { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; }
.pdp-opt .opts { display: flex; gap: 8px; flex-wrap: wrap; }
.pdp-opt .o {
  padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 8px;
  background: var(--paper); cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--ink-1);
  transition: border-color .15s, background .15s;
}
.pdp-opt .o:hover { border-color: var(--navy-700); }
.pdp-opt .o.sel { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.pdp-actions { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; }
.qty-input { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.qty-input button { width: 42px; height: 44px; border: none; background: var(--paper); cursor: pointer; font-size: 16px; color: var(--navy-900); font-weight: 600; }
.qty-input button:hover { background: var(--navy-50); }
.qty-input input { width: 50px; height: 44px; border: none; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-900); background: var(--paper); }
.qty-input input:focus { outline: none; }

.pdp-trust { display: grid; gap: 12px; padding: 20px; border-radius: 12px; background: var(--cream); border: 1px solid var(--line); }
.pdp-trust .item { display: flex; align-items: start; gap: 12px; font-size: 13.5px; color: var(--ink-2); }
.pdp-trust .item svg { color: var(--green); margin-top: 2px; flex: 0 0 auto; }
.pdp-trust .item b { color: var(--ink-1); display: block; font-weight: 600; margin-bottom: 1px; }

/* PDP details tabs */
.pdp-tabs { padding: 60px 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tabs button {
  padding: 12px 18px; background: transparent; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--navy-900); border-bottom-color: var(--navy-900); }
.tab-pane { font-size: 15px; color: var(--ink-2); line-height: 1.7; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table td { padding: 12px 0; font-size: 14px; vertical-align: top; }
.spec-table td:first-child { width: 200px; font-weight: 600; color: var(--ink-2); }
.spec-table td:last-child { color: var(--ink-1); font-family: var(--font-mono); font-size: 13.5px; }

/* ─── Cart page ─── */
.cart-page { padding: 36px 0 80px; display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
.cart-list { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cart-line { padding: 22px; display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; border-bottom: 1px solid var(--line); align-items: center; }
.cart-line:last-child { border-bottom: none; }
.cart-line .thumb {
  width: 96px; height: 96px; border-radius: 10px;
  background: linear-gradient(160deg, #F0F4FA, #DEE7F4);
  display: grid; place-items: center; color: var(--navy-700);
}
.cart-line .meta h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 6px; color: var(--navy-900); line-height: 1.3; }
.cart-line .meta .specs { font-size: 12.5px; color: var(--ink-3); font-family: var(--font-mono); margin-bottom: 10px; }
.cart-line .meta .controls { display: flex; gap: 10px; align-items: center; }
.cart-line .meta .controls button.del { border: none; background: transparent; color: var(--ink-3); font-size: 13px; cursor: pointer; padding: 0; }
.cart-line .meta .controls button.del:hover { color: var(--orange); }
.cart-line .price-col { text-align: right; }
.cart-line .price-col .price { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy-900); }
.cart-line .price-col .each { font-size: 11.5px; color: var(--ink-4); font-family: var(--font-mono); margin-top: 2px; }

.cart-summary { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 26px; position: sticky; top: 100px; }
.cart-summary h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-900); margin: 0 0 18px; }
.cart-summary .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--ink-2); }
.cart-summary .row.tot { padding-top: 14px; border-top: 1px solid var(--line); margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); }
.cart-summary .vat { font-size: 11.5px; color: var(--ink-4); font-family: var(--font-mono); }
.cart-summary .promo-input { display: flex; gap: 8px; margin: 16px 0; }
.cart-summary .promo-input input { flex: 1; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 13.5px; }
.cart-summary .promo-input button { padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--paper); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--navy-900); }
.cart-summary .btn { width: 100%; justify-content: center; margin-top: 8px; }
.cart-summary .extras { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; margin-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.cart-summary .extras span { display: flex; gap: 8px; align-items: center; }
.cart-summary .extras svg { color: var(--green); flex: 0 0 auto; }

/* Empty cart state */
.empty-state { padding: 80px 24px; text-align: center; }
.empty-state .ic { width: 72px; height: 72px; border-radius: 50%; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; margin: 0 auto 20px; }
.empty-state h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--navy-900); margin: 0 0 8px; }
.empty-state p { color: var(--ink-3); margin: 0 0 22px; }

/* ─── Checkout ─── */
.checkout { padding: 36px 0 80px; display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.checkout-steps { display: flex; gap: 0; margin-bottom: 28px; padding: 0; }
.checkout-steps .s {
  flex: 1; padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: 1px solid var(--line);
  border-right: none;
  font-size: 13.5px; color: var(--ink-3); font-weight: 600;
}
.checkout-steps .s:first-child { border-radius: 12px 0 0 12px; }
.checkout-steps .s:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.checkout-steps .s .num { width: 24px; height: 24px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; }
.checkout-steps .s.active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.checkout-steps .s.active .num { background: rgba(255,255,255,0.2); color: #fff; }
.checkout-steps .s.done { color: var(--green); }
.checkout-steps .s.done .num { background: var(--green-bg); color: var(--green); }

.checkout-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px; margin-bottom: 16px; }
.checkout-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-900); margin: 0 0 18px; }
.pay-method { display: grid; gap: 10px; }
.pay-row {
  padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 10px;
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pay-row:hover { border-color: var(--navy-700); }
.pay-row.sel { border-color: var(--navy-900); background: var(--navy-50); }
.pay-row .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); flex: 0 0 auto; position: relative; }
.pay-row.sel .radio { border-color: var(--navy-900); }
.pay-row.sel .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--navy-900); }
.pay-row .pay-name { font-size: 14.5px; font-weight: 600; color: var(--navy-900); }
.pay-row .pay-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pay-row .pay-logo { margin-left: auto; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); font-family: var(--font-mono); }

.review-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: center; }
.review-line:last-child { border-bottom: none; }
.review-line .thumb { width: 56px; height: 56px; border-radius: 8px; background: linear-gradient(160deg, #F0F4FA, #DEE7F4); display: grid; place-items: center; color: var(--navy-700); }
.review-line .name { font-size: 13.5px; font-weight: 600; color: var(--navy-900); }
.review-line .qty-x { font-size: 12px; color: var(--ink-3); font-family: var(--font-mono); margin-top: 2px; }
.review-line .ln-price { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy-900); }

/* ─── Bedankt ─── */
.thanks { padding: 80px 0; text-align: center; max-width: 640px; margin: 0 auto; }
.thanks .check {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--green-bg); color: var(--green);
  display: grid; place-items: center; margin: 0 auto 24px;
}
.thanks h1 { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--navy-900); margin: 0 0 12px; letter-spacing: -0.02em; }
.thanks .order-id { display: inline-block; padding: 8px 14px; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); margin-bottom: 20px; }
.thanks p { font-size: 16px; color: var(--ink-2); margin: 0 0 28px; line-height: 1.6; }
.thanks .next-card { text-align: left; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; margin-top: 32px; }
.thanks .next-card h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-900); margin: 0 0 14px; }
.thanks .next-card .step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 8px 0; }
.thanks .next-card .step .num { width: 24px; height: 24px; border-radius: 50%; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

/* ─── Diensten / services hero (split) ─── */
.split-hero { padding: 56px 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.split-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.5vw, 56px); letter-spacing: -0.025em; line-height: 1.05; color: var(--navy-900); margin: 14px 0 18px; text-wrap: balance; }
.split-hero h1 em { font-style: normal; color: var(--orange); }
.split-hero .lead { font-size: 18px; color: var(--ink-2); max-width: 52ch; line-height: 1.55; }
.split-hero .visual { aspect-ratio: 4/3; background: var(--navy-900); border-radius: 18px; padding: 36px; color: #fff; position: relative; overflow: hidden; display: grid; align-content: end; }
.split-hero .visual::before { content: ""; position: absolute; inset: 0; background: var(--grid-overlay); opacity: 0.18; }
.split-hero .visual::after { content: ""; position: absolute; right: -100px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(46,128,255,0.4), transparent 70%); }
.split-hero .visual .vlabel { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.16em; text-transform: uppercase; position: relative; z-index: 1; }
.split-hero .visual .vh { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff; margin: 8px 0 0; letter-spacing: -0.015em; line-height: 1.1; position: relative; z-index: 1; }

.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.svc-big {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: 32px; min-height: 280px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative; overflow: hidden;
}
.svc-big:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-2); }
.svc-big .num { font-family: var(--font-mono); font-size: 11px; color: var(--orange); font-weight: 600; letter-spacing: 0.2em; }
.svc-big .icon-big { width: 56px; height: 56px; border-radius: 12px; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; }
.svc-big h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); margin: 0; letter-spacing: -0.01em; }
.svc-big p { color: var(--ink-2); font-size: 14.5px; margin: 0; }
.svc-big ul { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 6px; }
.svc-big ul li { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.svc-big ul li::before { content: "—"; color: var(--ink-4); }

/* Sticky CTA */
.sticky-cta {
  position: sticky; bottom: 16px;
  margin: 40px 0;
  padding: 22px 28px;
  background: var(--navy-900); color: #fff;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  box-shadow: var(--shadow-3);
  flex-wrap: wrap;
}
.sticky-cta .t { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; margin: 0 0 2px; }
.sticky-cta .s { font-size: 13.5px; color: rgba(255,255,255,0.7); }

/* Generic helpers */
.center { text-align: center; }
.muted { color: var(--ink-3); }
.kicker-block { text-align: center; padding-bottom: 28px; }
.kicker-block .sec-eyebrow { display: inline-block; }
.kicker-block .sec-title { margin: 8px auto 12px; }
.kicker-block .sec-sub { margin: 0 auto; }
.tag-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; background: var(--navy-50); color: var(--navy-700); border: 1px solid var(--line-2); }
.tag-pill.orange { background: #FFF3E6; color: var(--orange); border-color: #FCD9B6; }
.tag-pill.green { background: var(--green-bg); color: var(--green); border-color: #BFE2D0; }

/* responsive helpers */
@media (max-width: 980px) {
  .shop-layout, .pdp, .cart-page, .checkout, .roi-card, .vertical-pick, .deal-banner, .split-hero { grid-template-columns: 1fr !important; }
  .stat-row, .shop-cats, .svc-grid { grid-template-columns: 1fr 1fr; }
  .stat-row .stat { border-right: none; border-bottom: 1px solid var(--line); padding: 14px 22px; }
  .bundle { grid-template-columns: 1fr; }
  .bundle .b-price { text-align: left; }
}


/* ─── Assortiment page ─── */
.assort-hero { padding: 56px 0 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.assort-hero .crumb { font-size: 12.5px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; margin-bottom: 14px; }
.assort-hero .crumb a { color: var(--ink-3); }
.assort-hero .crumb a:hover { color: var(--navy-700); }
.assort-hero .crumb svg { color: var(--ink-4); }
.assort-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.02em; color: var(--navy-900); margin: 0 0 8px; }
.assort-sub { color: var(--ink-3); max-width: 640px; font-size: 15.5px; margin: 0; }

.filter-bar {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); margin-bottom: 16px;
}
.filter-group { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filter-label { font-size: 12px; color: var(--ink-4); font-family: var(--font-mono); margin-right: 4px; }
.filter-chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink-2); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.filter-chip:hover { border-color: var(--navy-700); color: var(--navy-900); }
.filter-chip.active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.filter-select {
  padding: 7px 12px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink-2); font-size: 13.5px; font-family: inherit;
}

.result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 4px 14px; }
.result-count { font-family: var(--font-display); font-weight: 600; color: var(--navy-900); font-size: 14.5px; }
.result-meta { font-size: 12.5px; color: var(--ink-4); }

.products.products-4 { grid-template-columns: repeat(4, 1fr); }

.empty-state { padding: 60px 24px; text-align: center; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty-state svg { color: var(--ink-4); }

.assort-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.assort-stats > div { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.assort-stats .big { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 36px; letter-spacing: -0.02em; }
.assort-stats .lbl { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

@media (max-width: 1080px) {
  .products.products-4 { grid-template-columns: repeat(2, 1fr); }
}


/* ─── Kassasystemen page ─── */
.pos-hero { padding: 56px 0 48px; background: linear-gradient(180deg, #0E2A47 0%, #143560 100%); color: #fff; position: relative; overflow: hidden; }
.pos-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(231,106,30,0.12) 0%, transparent 55%); pointer-events: none; }
.pos-hero .crumb { font-size: 12.5px; color: rgba(255,255,255,0.55); display: inline-flex; gap: 6px; align-items: center; margin-bottom: 28px; position: relative; z-index: 1; }
.pos-hero .crumb a { color: rgba(255,255,255,0.55); }
.pos-hero .crumb a:hover { color: #fff; }
.pos-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; }
.pos-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 999px; font-size: 12.5px; color: rgba(255,255,255,0.85); margin-bottom: 18px; }
.pos-hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 18px; }
.pos-hero-title .ink { color: var(--orange); }
.pos-hero-sub { color: rgba(255,255,255,0.78); max-width: 520px; font-size: 16px; line-height: 1.55; margin: 0 0 24px; }
.pos-hero-cta { display: flex; gap: 12px; margin-bottom: 24px; }
.pos-hero-cta .btn-ghost { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }
.pos-hero-cta .btn-ghost:hover { background: rgba(255,255,255,0.14); }
.pos-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: rgba(255,255,255,0.7); }
.pos-hero-meta div { display: inline-flex; align-items: center; gap: 6px; }
.pos-hero-meta svg { color: #4EE599; }

/* Terminal mockup */
.pos-hero-vis { display: grid; place-items: center; }
.terminal { width: 360px; transform: rotate(-2deg); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45)); }
.terminal-screen { background: #0A1A2E; border: 8px solid #1A2A40; border-radius: 14px 14px 6px 6px; padding: 18px 18px 14px; color: #DCE6F2; }
.terminal-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px dashed rgba(255,255,255,0.12); font-size: 12.5px; color: rgba(255,255,255,0.6); font-family: var(--font-mono); }
.badge-live { display: inline-flex; gap: 6px; align-items: center; color: #4EE599; }
.badge-live span { width: 6px; height: 6px; background: #4EE599; border-radius: 50%; box-shadow: 0 0 8px #4EE599; }
.terminal-rows { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 12px; border-bottom: 1px dashed rgba(255,255,255,0.12); }
.trow { display: flex; justify-content: space-between; font-size: 14px; }
.trow.muted { color: rgba(255,255,255,0.45); font-size: 12.5px; }
.trow.total { padding: 12px 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff; }
.terminal-pay { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; padding-top: 4px; }
.terminal-pay button { padding: 10px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #DCE6F2; font-family: inherit; font-size: 12.5px; cursor: pointer; }
.terminal-pay button.primary { background: var(--orange); color: #fff; border-color: var(--orange); font-weight: 600; }
.terminal-base { width: 70%; height: 14px; margin: -2px auto 0; background: linear-gradient(180deg, #1A2A40, #0A1A2E); border-radius: 0 0 12px 12px; }

/* Vertical tabs */
.vert-tabs { display: inline-flex; gap: 6px; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; margin-bottom: 32px; }
.vert-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border: none; background: transparent; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 14.5px; color: var(--ink-3); font-weight: 500; }
.vert-tab.active { background: var(--navy-900); color: #fff; }
.vert-tab svg { color: inherit; }

/* Vertical content */
.pos-vert {}
.pos-vert-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.pos-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.pos-bullet { display: flex; gap: 12px; }
.pos-bullet-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; flex: 0 0 auto; }
.pos-bullet .t { font-weight: 600; color: var(--navy-900); font-size: 14.5px; }
.pos-bullet .s { font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }

.pos-set-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: var(--shadow-2); }
.pos-set-head { padding-bottom: 20px; border-bottom: 1px dashed var(--line); margin-bottom: 18px; }
.pos-set-head .cond.new { display: inline-block; background: var(--navy-50); color: var(--navy-700); padding: 4px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; margin-bottom: 12px; }
.pos-set-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy-900); letter-spacing: -0.01em; margin-bottom: 10px; }
.pos-set-price { display: flex; align-items: baseline; gap: 10px; }
.pos-set-price .price { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--navy-900); }
.pos-set-price .was { font-size: 13.5px; color: var(--ink-4); text-decoration: line-through; }
.pos-set-price .excl { font-size: 12px; color: var(--ink-4); margin-left: auto; font-family: var(--font-mono); }
.pos-set-items { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.pos-set-items li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.pos-set-items svg { color: var(--green); flex: 0 0 auto; }
.btn-success { background: var(--green) !important; border-color: var(--green) !important; }

/* ROI card */
.roi-card { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-2); }
.roi-inputs { padding: 28px; background: var(--cream); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; }
.roi-inputs label { display: grid; gap: 6px; font-size: 13.5px; color: var(--ink-2); font-weight: 500; position: relative; }
.roi-inputs label > span:first-child { color: var(--ink-3); font-size: 12.5px; }
.roi-inputs output { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); position: absolute; right: 0; top: 0; }
.roi-inputs input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--line-2); border-radius: 999px; outline: none; }
.roi-inputs input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--navy-900); border-radius: 50%; cursor: pointer; }
.roi-inputs input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--navy-900); border-radius: 50%; cursor: pointer; border: none; }
.roi-output { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.roi-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); }
.roi-row strong { font-family: var(--font-display); color: var(--navy-900); font-size: 16px; }
.roi-row .pos { color: var(--green); }
.roi-row .neg { color: var(--ink-3); }
.roi-row.total { background: var(--navy-50); margin: 8px -28px -28px; padding: 18px 28px; border: none; border-top: 1px solid var(--line); }
.roi-row.total strong { font-size: 24px; }
.roi-foot { font-size: 11.5px; color: var(--ink-4); margin: 14px -28px -28px; padding: 14px 28px; }

/* POS steps */
.pos-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pos-step { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.pos-step .d { font-family: var(--font-mono); font-size: 11px; color: var(--orange); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.pos-step .t { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 17px; margin: 6px 0 6px; }
.pos-step .s { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* POS FAQ */
.pos-faq { display: flex; flex-direction: column; gap: 10px; }
.pos-faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 0; }
.pos-faq summary { padding: 18px 22px; cursor: pointer; font-weight: 600; color: var(--navy-900); display: flex; justify-content: space-between; align-items: center; list-style: none; }
.pos-faq summary::-webkit-details-marker { display: none; }
.pos-faq summary svg { color: var(--ink-4); transition: transform .2s; }
.pos-faq details[open] summary svg { transform: rotate(90deg); }
.pos-faq p { padding: 0 22px 18px; margin: 0; font-size: 14px; color: var(--ink-3); line-height: 1.6; }

/* POS CTA */
.pos-cta { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 36px 40px; background: var(--navy-900); color: #fff; border-radius: 18px; }
.pos-cta .sec-eyebrow { color: rgba(255,255,255,0.55); }
.pos-cta .sec-eyebrow::before { background: var(--orange); }
.pos-cta .sec-title { color: #fff; }
.pos-cta-actions { display: flex; gap: 12px; }
.pos-cta-actions .btn-ghost { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }

@media (max-width: 1080px) {
  .pos-hero-grid, .pos-vert-grid, .roi-card, .pos-cta { grid-template-columns: 1fr; }
  .pos-bullets, .pos-steps { grid-template-columns: 1fr 1fr; }
  .roi-inputs { border-right: none; border-bottom: 1px solid var(--line); }
}


/* ─── Laptop deals page ─── */
.deals-hero { padding: 56px 0 56px; background: linear-gradient(180deg, #FFF7EE 0%, #FAFBFD 100%); border-bottom: 1px solid var(--line); }
.deals-hero .crumb { font-size: 12.5px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; margin-bottom: 28px; }
.deals-hero .crumb a { color: var(--ink-3); }
.deals-hero .crumb svg { color: var(--ink-4); }
.deals-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.deals-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 18px; }
.deals-tag .dot { width: 7px; height: 7px; background: var(--orange); border-radius: 50%; box-shadow: 0 0 0 4px rgba(231,106,30,0.18); }
.deals-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.025em; color: var(--navy-900); margin: 0 0 18px; }
.deals-title .orange { color: var(--orange); font-style: italic; font-weight: 600; }
.deals-sub { color: var(--ink-3); max-width: 540px; font-size: 16px; line-height: 1.6; margin: 0 0 24px; }

.deals-countdown { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; max-width: 540px; }
.deals-countdown .cd-label { font-size: 13.5px; color: var(--ink-3); }
.countdown { display: inline-flex; gap: 8px; align-items: baseline; margin-left: auto; }
.cd-cell { background: var(--navy-900); color: #fff; padding: 8px 10px; border-radius: 8px; min-width: 48px; text-align: center; font-family: var(--font-mono); }
.cd-cell span { display: block; font-weight: 700; font-size: 20px; line-height: 1; }
.cd-cell label { display: block; font-size: 9.5px; opacity: 0.6; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.cd-sep { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 22px; }

.deals-featured { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow-2); position: relative; }
.deals-featured-stamp { position: absolute; top: -16px; right: 24px; background: var(--orange); color: #fff; padding: 8px 14px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 17px; box-shadow: 0 6px 14px rgba(231,106,30,0.28); transform: rotate(4deg); }
.deals-featured-img { aspect-ratio: 4/3; background: linear-gradient(160deg, #F0F4FA, #DEE7F4); border-radius: 14px; margin-bottom: 18px; display: grid; place-items: center; overflow: hidden; }
.deals-featured-img img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.deals-featured-meta .cond { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; }
.deals-featured-meta .name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--navy-900); margin: 6px 0 10px; }
.deals-featured-meta .specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.deals-featured-meta .specs span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--cream); }
.deals-featured-meta .price-row { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px dashed var(--line); margin-bottom: 14px; }
.deals-featured-meta .price { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--navy-900); }
.deals-featured-meta .was { font-size: 14px; color: var(--ink-4); text-decoration: line-through; }
.deals-featured-meta .save { margin-left: auto; font-size: 12.5px; color: var(--green); background: var(--green-bg); padding: 4px 9px; border-radius: 999px; font-weight: 600; }

/* Trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; flex: 0 0 auto; }
.trust-item .t { font-weight: 600; color: var(--navy-900); font-size: 14px; }
.trust-item .s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }

.products.products-3 { grid-template-columns: repeat(3, 1fr); }

/* Comparison */
.vs-table { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 18px; align-items: stretch; }
.vs-col { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); display: flex; flex-direction: column; gap: 14px; }
.vs-col.vs-best { background: var(--navy-900); color: #fff; border-color: var(--navy-900); position: relative; transform: translateY(-8px); box-shadow: var(--shadow-3); }
.vs-best-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.vs-h { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; }
.vs-best .vs-h { color: rgba(255,255,255,0.55); }
.vs-p { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--navy-900); letter-spacing: -0.02em; }
.vs-best .vs-p { color: #fff; }
.vs-save { display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: 12px; color: #4EE599; background: rgba(78,229,153,0.12); padding: 4px 9px; border-radius: 999px; margin-left: 10px; vertical-align: middle; }
.vs-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vs-col li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.vs-best li { color: rgba(255,255,255,0.85); }
.vs-col li svg { color: var(--green); flex: 0 0 auto; margin-top: 2px; }
.vs-col li svg[stroke="currentColor"] { color: var(--green); }
.vs-col li:has(svg.x) svg, .vs-col li svg + * { }
/* color the X icon red-ish */
.vs-col li svg path[d^="M6 6"] { color: var(--ink-4); }

/* Bundles */
.bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bundle { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); display: flex; flex-direction: column; gap: 14px; position: relative; }
.bundle.best { border-color: var(--navy-900); border-width: 2px; }
.bundle-badge { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.bundle.best .bundle-badge { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.bundle-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); }
.bundle ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bundle ul li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.bundle ul li svg { color: var(--green); }
.bundle-price { display: flex; align-items: baseline; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line); margin-top: auto; }
.bundle-price .price { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--navy-900); }
.bundle-price .was { font-size: 13px; color: var(--ink-4); text-decoration: line-through; }

@media (max-width: 1080px) {
  .deals-hero-grid { grid-template-columns: 1fr; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .products.products-3 { grid-template-columns: 1fr 1fr; }
  .vs-table, .bundles { grid-template-columns: 1fr; }
  .vs-col.vs-best { transform: none; }
}


/* ─── Diensten page ─── */
.diensten-hero { padding: 56px 0 32px; background: var(--paper); border-bottom: 1px solid var(--line); }
.diensten-hero .crumb { font-size: 12.5px; color: var(--ink-3); display: inline-flex; gap: 6px; align-items: center; margin-bottom: 24px; }
.diensten-hero .crumb a { color: var(--ink-3); }
.diensten-hero .crumb svg { color: var(--ink-4); }
.diensten-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.025em; color: var(--navy-900); margin: 0 0 14px; }
.diensten-sub { color: var(--ink-3); max-width: 640px; font-size: 16px; line-height: 1.6; margin: 0; }

.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.service-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.service-head { padding: 22px 26px; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.service-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.service-brand .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; background: rgba(255,255,255,0.16); border-radius: 8px; }
.service-ic { opacity: 0.7; }
.service-body { padding: 26px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.service-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); margin: 0; letter-spacing: -0.01em; }
.service-body p { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; margin: 0; }
.service-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.service-body ul li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.service-body ul li svg { color: var(--green); flex: 0 0 auto; }
.service-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px dashed var(--line); margin-top: auto; }
.service-foot .price { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 16px; }
.service-foot .link { color: var(--navy-700); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* Why grid */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-cell { display: flex; gap: 12px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.why-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; flex: 0 0 auto; }
.why-cell .t { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-900); margin-bottom: 4px; }
.why-cell .s { font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }

/* Cases */
.cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.case-cell { padding: 22px 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.case-who { font-family: var(--font-mono); font-size: 11.5px; color: var(--orange); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.case-what { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 18px; margin: 6px 0 8px; line-height: 1.35; }
.case-outcome { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; }
.contact-info { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.contact-row { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .15s; }
a.contact-row:hover { border-color: var(--navy-700); }
.contact-row .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--navy-50); color: var(--navy-700); display: grid; place-items: center; flex: 0 0 auto; }
.contact-row .t { font-weight: 600; color: var(--navy-900); font-size: 15px; }
.contact-row .s { font-size: 12.5px; color: var(--ink-4); }
.contact-form { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 14px; }
.contact-form h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); margin: 0 0 4px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-3); }
.contact-form label > span { font-weight: 500; color: var(--ink-2); font-size: 12.5px; }
.contact-form input, .contact-form textarea { font-family: inherit; font-size: 14px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--cream); color: var(--ink-1); resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(46,128,255,0.18); background: var(--paper); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.topic-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.topic { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; }
.topic.active { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 6px; }
.form-meta { font-size: 12px; color: var(--ink-4); }
.form-success { text-align: center; padding: 28px 0; }
.form-success-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; margin: 0 auto 16px; }
.form-success h3 { margin: 0 0 8px; }
.form-success p { color: var(--ink-3); margin: 0 0 18px; }

@media (max-width: 1080px) {
  .services-grid, .why-grid, .cases-grid, .contact-grid, .row-2 { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
}


/* ─── PDP ─── */
.pdp-wrap { padding: 32px 0 64px; }
.pdp-crumb { margin-bottom: 20px; }
.pdp-crumb a { color: var(--ink-3); }
.pdp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin-bottom: 48px; }
.pdp-gallery { display: flex; flex-direction: column; gap: 12px; }
.pdp-img-main { aspect-ratio: 4/3; background: linear-gradient(160deg, #F0F4FA, #DEE7F4); border-radius: 16px; position: relative; overflow: hidden; display: grid; place-items: center; }
.pdp-img-main img { width: 100%; height: 100%; object-fit: contain; padding: 32px; }
.pdp-img-main .cond { position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 999px; background: var(--paper); font-size: 11.5px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); }
.pdp-img-main .cond.new { background: var(--orange); color: #fff; border-color: var(--orange); }
.pdp-img-main .stamp { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--paper); padding: 5px 11px; border-radius: 999px; font-size: 11.5px; color: var(--green); border: 1px solid var(--line); }
.pdp-img-main .stamp .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pdp-thumb { aspect-ratio: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; display: grid; place-items: center; cursor: pointer; transition: border-color .15s; }
.pdp-thumb svg { width: 60%; height: 60%; }
.pdp-thumb.active { border-color: var(--navy-700); box-shadow: 0 0 0 2px rgba(36,86,160,0.18); }

.pdp-info .pdp-brand { font-family: var(--font-mono); font-size: 12px; color: var(--orange); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.pdp-title { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.015em; color: var(--navy-900); margin: 6px 0 12px; line-height: 1.15; }
.pdp-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13.5px; }
.pdp-rating .stars { color: var(--orange); letter-spacing: 1px; }
.pdp-rating .rate { font-weight: 700; color: var(--navy-900); }
.pdp-rating .cnt { color: var(--ink-4); }
.pdp-spec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.pdp-spec-chips span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3); padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); }

.pdp-price-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pdp-price { font-family: var(--font-display); font-weight: 700; font-size: 36px; color: var(--navy-900); letter-spacing: -0.02em; }
.pdp-was { font-size: 16px; color: var(--ink-4); text-decoration: line-through; }
.pdp-save { font-size: 12.5px; color: var(--green); background: var(--green-bg); padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.pdp-vat { font-size: 12.5px; color: var(--ink-4); margin-top: 4px; }
.pdp-pay { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 11px; background: var(--green-bg); color: var(--green); border-radius: 8px; }
.pdp-stock { font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; }
.pdp-stock svg { color: var(--green); }
.pdp-actions { display: flex; gap: 10px; margin-top: 16px; }
.qty-input { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.qty-input button { width: 36px; height: 42px; background: var(--paper); border: none; cursor: pointer; font-size: 16px; color: var(--ink-2); font-family: inherit; }
.qty-input button:hover { background: var(--cream); }
.qty-input input { width: 44px; height: 42px; border: none; text-align: center; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-1); background: var(--paper); }
.qty-input input:focus { outline: none; }

.pdp-trust { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.pdp-trust > div { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.pdp-trust svg { color: var(--navy-700); }

.pdp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.pdp-tab { padding: 14px 22px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14.5px; color: var(--ink-3); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pdp-tab.active { color: var(--navy-900); border-bottom-color: var(--orange); font-weight: 600; }
.pdp-tab-body { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px; margin-bottom: 48px; }

.pdp-spec-table { width: 100%; border-collapse: collapse; }
.pdp-spec-table th, .pdp-spec-table td { text-align: left; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.pdp-spec-table th { color: var(--ink-3); font-weight: 500; width: 32%; }
.pdp-spec-table td { color: var(--ink-1); }
.pdp-spec-table tr:last-child th, .pdp-spec-table tr:last-child td { border-bottom: none; }

.pdp-prose p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 14px; }
.pdp-prose ul { padding-left: 22px; color: var(--ink-2); font-size: 14.5px; line-height: 1.8; }

.pdp-refurb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.refurb-step { display: flex; gap: 14px; padding: 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; }
.refurb-step .n { width: 28px; height: 28px; border-radius: 50%; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.refurb-step .t { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 15px; margin-bottom: 4px; }
.refurb-step .s { font-size: 13px; color: var(--ink-3); line-height: 1.55; }

.pdp-reviews { display: flex; flex-direction: column; gap: 18px; }
.review-cell { padding: 18px 0; border-bottom: 1px dashed var(--line); }
.review-cell:last-child { border-bottom: none; }
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.review-head .stars { color: var(--orange); letter-spacing: 1px; font-size: 14px; }
.review-head .who { font-weight: 600; color: var(--navy-900); font-size: 13.5px; }
.review-cell p { color: var(--ink-2); font-size: 14.5px; line-height: 1.7; margin: 0; }

.pdp-related .products-4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1080px) {
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-refurb { grid-template-columns: 1fr; }
  .pdp-related .products-4 { grid-template-columns: 1fr 1fr; }
}

/* ─── Cart page ─── */
.cart-page { padding: 32px 0 64px; }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--navy-900); letter-spacing: -0.02em; margin: 14px 0 28px; }
.cart-empty-page { text-align: center; padding: 60px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.cart-empty-page .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--cream); color: var(--navy-700); display: grid; place-items: center; margin: 0 auto 16px; }
.cart-empty-page h2 { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); margin: 0 0 8px; }
.cart-empty-page p { color: var(--ink-3); margin: 0; }

.cart-page-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: flex-start; }
.cart-items { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cart-items-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); background: var(--cream); }
.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 22px; border-bottom: 1px solid var(--line); align-items: center; }
.cart-line:last-of-type { border-bottom: none; }
.cart-line-thumb { aspect-ratio: 1; background: linear-gradient(160deg, #F0F4FA, #DEE7F4); border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.cart-line-thumb svg { width: 70%; height: 70%; }
.cart-line-meta .name { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 16px; line-height: 1.3; display: block; margin-bottom: 6px; }
.cart-line-meta .specs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cart-line-meta .specs span { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--cream); }
.cart-line-foot { display: flex; gap: 16px; align-items: center; }
.text-link { background: none; border: none; cursor: pointer; color: var(--navy-700); font-size: 13px; font-weight: 500; padding: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.text-link.danger { color: var(--ink-3); }
.text-link.danger:hover { color: #C04434; }
.cart-line-price { text-align: right; }
.cart-line-price .ea { font-size: 12px; color: var(--ink-4); margin-bottom: 4px; }
.cart-line-price .tot { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 18px; }
.cart-cont { padding: 18px 22px; }

.cart-summary { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; position: sticky; top: 96px; }
.cart-summary h3 { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); margin: 0 0 16px; font-size: 18px; }
.cart-summary .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--ink-2); }
.cart-summary .row.muted { color: var(--ink-4); font-size: 12px; }
.cart-summary .row.pos { color: var(--green); font-weight: 600; }
.cart-summary .row.total { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--navy-900); padding-top: 14px; border-top: 1px solid var(--line); margin-top: 8px; }
.coupon { display: flex; gap: 8px; margin-top: 16px; }
.coupon input { flex: 1; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; font-family: inherit; font-size: 13px; background: var(--cream); }
.coupon input:focus { outline: none; border-color: var(--navy-500); background: var(--paper); }
.coupon button { padding: 10px 16px; background: var(--navy-50); color: var(--navy-700); border: 1px solid var(--line); border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.coupon-msg { margin-top: 8px; font-size: 12.5px; }
.coupon-msg.ok { color: var(--green); display: flex; align-items: center; gap: 6px; }
.coupon-msg.err { color: #C04434; }
.cart-summary-trust { display: flex; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.cart-summary-trust span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); }
.cart-summary-pay { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cart-summary-pay .chip { font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; background: var(--cream); border: 1px solid var(--line); border-radius: 4px; color: var(--ink-3); }

@media (max-width: 1080px) {
  .cart-page-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

/* ─── Checkout ─── */
.checkout { padding: 32px 0 64px; }
.step-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 18px 22px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.step { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-4); font-weight: 500; }
.step .num { width: 28px; height: 28px; border-radius: 50%; background: var(--cream); border: 1px solid var(--line-2); color: var(--ink-3); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.step.active { color: var(--navy-900); }
.step.active .num { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
.step.done { color: var(--green); }
.step.done .num { background: var(--green); color: #fff; border-color: var(--green); }
.step-line { flex: 1; height: 1px; background: var(--line-2); }
.step-line.done { background: var(--green); }

.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; align-items: flex-start; }
.check-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.check-card h2 { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); margin: 0 0 18px; font-size: 22px; }
.check-card h3 { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); margin: 0 0 12px; font-size: 16px; }
.check-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.check-card label > span { font-weight: 500; color: var(--ink-2); font-size: 12.5px; }
.check-card input { font-family: inherit; font-size: 14px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--cream); color: var(--ink-1); }
.check-card input:focus { outline: none; border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(46,128,255,0.18); background: var(--paper); }

.type-toggle { display: inline-flex; padding: 4px; background: var(--cream); border-radius: 999px; margin-bottom: 18px; border: 1px solid var(--line); }
.type-toggle button { padding: 7px 16px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-3); border-radius: 999px; font-weight: 500; }
.type-toggle button.active { background: var(--navy-900); color: #fff; }

.ship-options, .pay-options { display: flex; flex-direction: column; gap: 10px; }
.ship-option, .pay-option { display: grid; grid-template-columns: auto auto 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.pay-option { grid-template-columns: auto auto 1fr; }
.ship-option.active, .pay-option.active { border-color: var(--navy-900); background: var(--navy-50); }
.ship-option input, .pay-option input { width: 18px; height: 18px; }
.ship-option .ic, .pay-option .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--paper); color: var(--navy-700); display: grid; place-items: center; }
.ship-option.active .ic, .pay-option.active .ic { background: var(--navy-900); color: #fff; }
.ship-option .t, .pay-option .t { font-weight: 600; color: var(--navy-900); font-size: 14.5px; }
.ship-option .s, .pay-option .s { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.ship-option .p { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 15px; }

.check-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line); }
.check-tos { font-size: 12px; color: var(--ink-4); margin: 14px 0 0; }

.checkout-summary { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; position: sticky; top: 96px; }
.checkout-summary h3 { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); margin: 0 0 14px; font-size: 16px; }
.check-items { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); margin-bottom: 14px; }
.check-item { display: flex; gap: 10px; align-items: center; }
.check-item .thumb { width: 40px; height: 40px; flex: 0 0 auto; background: linear-gradient(160deg, #F0F4FA, #DEE7F4); border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
.check-item .thumb svg { width: 70%; height: 70%; }
.check-item .name { font-size: 12.5px; color: var(--navy-900); font-weight: 600; line-height: 1.3; }
.check-item .qty { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.check-item .tot { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 13px; }
.check-totals .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; color: var(--ink-2); }
.check-totals .row.muted { color: var(--ink-4); font-size: 11.5px; }
.check-totals .row.total { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--navy-900); padding-top: 12px; border-top: 1px solid var(--line); margin-top: 6px; }
.check-trust { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.check-trust div { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); }

@media (max-width: 1080px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-summary { position: static; }
}

/* ─── Thanks page ─── */
.thanks { padding: 60px 0; }
.thanks-card { max-width: 760px; margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 56px 56px 40px; box-shadow: var(--shadow-2); text-align: center; }
.thanks-ic { width: 80px; height: 80px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; margin: 0 auto 18px; animation: thanks-pop .5s cubic-bezier(.18,.89,.32,1.28); }
@keyframes thanks-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.thanks-eyebrow { font-family: var(--font-mono); font-size: 11.5px; color: var(--orange); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; }
.thanks-card h1 { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--navy-900); letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.15; }
.thanks-card .lead { color: var(--ink-3); font-size: 15px; line-height: 1.6; max-width: 540px; margin: 0 auto 32px; }
.thanks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; padding: 28px; background: var(--cream); border-radius: 12px; margin-bottom: 28px; }
.thanks-grid .t-h { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 14px; margin-bottom: 12px; }
.thanks-grid ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.thanks-grid ol li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy-900); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 11px; flex: 0 0 auto; }
.thanks-contact { display: flex; flex-direction: column; gap: 10px; }
.thanks-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .thanks-card { padding: 40px 24px 28px; }
  .thanks-grid { grid-template-columns: 1fr; padding: 22px; }
}


/* ─── Kassasystemen page ─── */
.pos-hero-v { background: var(--navy-900); color: #fff; padding: 56px 0 80px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.pos-hero-v::after { content:""; position: absolute; inset:0; background: radial-gradient(60% 50% at 80% 30%, color-mix(in oklab, var(--accent) 35%, transparent), transparent 70%); pointer-events: none; }
.pos-hero-v .wrap { position: relative; z-index: 1; }
.pos-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.vertical-toggle { display: inline-flex; padding: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; margin-bottom: 18px; border: 1px solid rgba(255,255,255,0.14); }
.vertical-toggle button { padding: 8px 18px; border: none; background: none; cursor: pointer; font-family: inherit; font-size: 13px; color: rgba(255,255,255,0.7); border-radius: 999px; font-weight: 600; }
.vertical-toggle button.active { background: var(--accent); color: #fff; }
.pos-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.025em; color: #fff; margin: 0 0 16px; line-height: 1.05; }
.pos-sub { color: rgba(255,255,255,0.7); max-width: 540px; font-size: 16px; line-height: 1.6; margin: 0; }

.pos-mock { aspect-ratio: 4/3; background: linear-gradient(160deg, #0A1F3A, #163358); border-radius: 18px; padding: 14px; box-shadow: var(--shadow-3); border: 1px solid rgba(255,255,255,0.08); }
.pos-mock-screen { background: #fff; border-radius: 10px; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.pos-mock-bar { padding: 10px 14px; background: var(--cream); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; color: var(--ink-3); }
.pos-mock-brand { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy-900); }
.pos-mock-brand .dot { width: 7px; height: 7px; border-radius: 50%; }
.pos-mock-time { font-family: var(--font-mono); }
.pos-mock-body { display: grid; grid-template-columns: 1fr 0.7fr; flex: 1; min-height: 0; }
.pos-mock-grid { padding: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: flex-start; overflow: hidden; border-right: 1px solid var(--line); }
.pos-tile { aspect-ratio: 1.2; padding: 8px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; justify-content: space-between; background: var(--paper); }
.pos-tile .t { font-size: 10px; color: var(--ink-1); font-weight: 600; line-height: 1.2; }
.pos-tile .p { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 11px; }
.pos-mock-receipt { padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--cream); }
.pos-mock-receipt .r-h { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 8px; border-bottom: 1px dashed var(--line-2); }
.pos-mock-receipt .r-l { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-2); }
.pos-mock-receipt .r-l.muted { color: var(--ink-4); font-size: 9.5px; }
.pos-mock-receipt .r-tot { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; color: var(--navy-900); padding-top: 8px; border-top: 1px dashed var(--line-2); margin-top: 4px; font-size: 13px; }
.pos-mock-receipt .r-pay { margin-top: auto; padding: 9px; border: none; color: #fff; border-radius: 8px; font-family: inherit; font-weight: 600; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* Sets */
.pos-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pos-set { padding: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.pos-set.best { border: 2px solid var(--navy-900); transform: translateY(-6px); box-shadow: var(--shadow-2); }
.pos-set-badge { position: absolute; top: -12px; left: 24px; padding: 5px 12px; background: var(--orange); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pos-set-badge.muted { background: var(--cream); color: var(--ink-3); border: 1px solid var(--line); }
.pos-set-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy-900); margin-top: 8px; }
.pos-set-price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.pos-set-price .amount { font-family: var(--font-display); font-weight: 700; font-size: 38px; color: var(--navy-900); letter-spacing: -0.02em; }
.pos-set-price .per { font-size: 12.5px; color: var(--ink-4); }
.pos-set ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pos-set ul li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2); }

/* ROI calculator */
.roi-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 36px; box-shadow: var(--shadow-1); }
.roi-h { margin-bottom: 24px; }
.roi-h h3 { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); margin: 6px 0 8px; font-size: 28px; letter-spacing: -0.015em; }
.roi-h p { color: var(--ink-3); margin: 0; max-width: 540px; font-size: 14.5px; line-height: 1.55; }
.roi-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; padding: 24px; background: var(--cream); border-radius: 12px; margin-bottom: 24px; }
.roi-row label { display: block; font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; font-weight: 500; }
.roi-bar { display: flex; align-items: center; gap: 14px; }
.roi-bar input[type=range] { flex: 1; height: 4px; }
.roi-bar .val { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 17px; min-width: 70px; text-align: right; }

.roi-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.roi-stat { padding: 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; }
.roi-stat .lab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.roi-stat .val { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 24px; letter-spacing: -0.015em; line-height: 1.1; }
.roi-stat .val span { font-size: 12px; font-weight: 500; color: var(--ink-4); margin-left: 4px; }
.roi-stat.highlight { color: #fff; border: none; }
.roi-stat.highlight .lab, .roi-stat.highlight .sub { color: rgba(255,255,255,0.7); }
.roi-stat.highlight .val { color: #fff; font-size: 28px; }
.roi-stat.highlight .sub { font-size: 11px; margin-top: 4px; }
.roi-foot { font-size: 11.5px; color: var(--ink-4); margin: 18px 0 0; text-align: center; }

/* Integrations */
.integrations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.int-cell { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
.int-name { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 15px; }
.int-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--green); font-weight: 600; }
.int-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-bg); }

/* Process steps */
.pos-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; }
.pos-step { padding: 22px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.pos-step .d { font-family: var(--font-mono); font-size: 11.5px; color: var(--orange); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; }
.pos-step .t { font-family: var(--font-display); font-weight: 700; color: var(--navy-900); font-size: 16px; margin-bottom: 6px; }
.pos-step .s { font-size: 13px; color: var(--ink-3); line-height: 1.55; }

@media (max-width: 1080px) {
  .pos-hero-grid { grid-template-columns: 1fr; }
  .pos-sets { grid-template-columns: 1fr; }
  .pos-set.best { transform: none; }
  .roi-controls { grid-template-columns: 1fr; }
  .roi-results { grid-template-columns: 1fr 1fr; }
  .integrations-grid { grid-template-columns: 1fr 1fr; }
  .pos-process { grid-template-columns: 1fr 1fr; }
}

/* ── B2C/B2B segment switch (restored from previous design layer) ────── */
.aw-customer-switch {
    display: inline-flex;
    background: var(--pill-bg);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    padding: 3px;
    margin-right: 8px;
}
.aw-customer-switch button {
    background: transparent;
    border: 0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.01em;
    transition: background .15s, color .15s;
}
.aw-customer-switch button:hover { color: var(--navy-900); }
.aw-customer-switch button.is-active {
    background: var(--navy-900);
    color: #fff;
}

/* B2C / B2B view-mode visibility */
.aw-b2c-only { display: none; }
.aw-b2b-only { display: none; }
body.aw-customer-b2c .aw-b2c-only { display: revert; }
body.aw-customer-b2b .aw-b2b-only { display: revert; }

/* B2B price suffix — adds "excl. BTW" to product card prices for business mode */
body.aw-customer-b2b .product .price-row .price::after,
body.aw-customer-b2b .aw-card-v2__price::after {
    content: " excl. BTW";
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 500;
    margin-left: 4px;
    letter-spacing: 0;
}

/* On small screens, push customer-switch to a sensible spot */
@media (max-width: 1080px) {
    .aw-customer-switch { order: 50; }
}
@media (max-width: 640px) {
    .aw-customer-switch { display: none; } /* mobile: hide; mobile-bar handles entry */
}

/* ── B2C/B2B — make the toggle DO something visible ─────────────── */

/* Stronger active-button state (was navy → now orange accent for visibility) */
.aw-customer-switch button.is-active {
    background: var(--navy-900) !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(14,42,71,0.25);
    transform: scale(1.02);
}
.aw-customer-switch button { transition: background .18s ease, color .18s ease, transform .18s ease; }
.aw-customer-switch button:hover:not(.is-active) {
    background: rgba(14,42,71,0.06);
    color: var(--navy-900);
}

/* Visible state indicator — promo bar accent shifts on B2B */
body.aw-customer-b2b .promo {
    background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy-800) 100%);
    border-bottom: 1px solid rgba(231,106,30,0.25);   /* orange accent line */
}
body.aw-customer-b2b .promo-pay::before {
    content: "Zakelijk · ";
    color: var(--orange);
    font-weight: 700;
    letter-spacing: 0.02em;
}
body.aw-customer-b2c .promo-pay::before {
    content: "Particulier · ";
    color: rgba(255,255,255,0.55);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Subtle hero accent shift on B2B */
body.aw-customer-b2b .hero-eyebrow .dot { background: var(--orange); }
body.aw-customer-b2c .hero-eyebrow .dot { background: var(--green); }

/* B2B-only: show "excl. BTW" suffix on every visible price */
body.aw-customer-b2b .price-row .price::after,
body.aw-customer-b2b .aw-card-v2__price::after,
body.aw-customer-b2b .pos-price .big::after {
    content: " excl. BTW";
    font-size: 0.55em;
    color: var(--ink-3);
    font-weight: 500;
    margin-left: 4px;
    letter-spacing: 0;
}

/* Hide on mobile — confusing on small screens */
@media (max-width: 720px) {
    .aw-customer-switch { display: none; }
}

/* ===================================================================
   Mobile sticky bottom bar (.aw-mobile-bar markup from atlas-works-v2.php)
   Hidden on desktop; visible only on small screens. Added 2026-04-30.
   =================================================================== */
.aw-mobile-bar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: #fff;
    border-top: 1px solid var(--line, #e6ebf2);
    box-shadow: 0 -2px 12px rgba(14, 42, 71, 0.06);
    padding: env(safe-area-inset-bottom, 0) 0 0;
}
.aw-mobile-bar-inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 600px;
    margin: 0 auto;
}
.aw-mobile-bar-inner a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 10px;
    color: var(--ink-2, #2a3648);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 500;
    position: relative;
}
.aw-mobile-bar-inner a svg {
    width: 22px;
    height: 22px;
    color: var(--ink-2, #2a3648);
}
.aw-mobile-bar-inner a.is-active {
    color: var(--navy-500, #2e80ff);
}
.aw-mobile-bar-inner a.is-active svg {
    color: var(--navy-500, #2e80ff);
}
.aw-mb-cart-count {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--orange, #e76a1e);
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 720px) {
    .aw-mobile-bar { display: block; }
    body { padding-bottom: 64px; }
}

/* ===================================================================
   Mountain hero background + colorful accents (ported from restored
   TransIP design — user request 2026-04-30).
   =================================================================== */
.hero {
    position: relative;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.86) 42%, rgba(255,255,255,0.50) 75%, rgba(255,255,255,0.20) 100%),
        linear-gradient(180deg, rgba(219,232,255,0.18), rgba(255,255,255,0)),
        url("https://www.atlasworks.nl/wp-content/uploads/2023/10/Crossing_the_High_Atlas_mountains_in_Morocco_-_45020232664-1-1536x1024.jpg") center right / cover no-repeat;
    border-bottom: 1px solid rgba(16, 32, 63, 0.08);
}

/* Subtle hero-eyebrow dot accent (colorful + alive) */
.hero-eyebrow .dot {
    background: var(--orange, #e76a1e);
    box-shadow: 0 0 0 4px rgba(231, 106, 30, 0.18);
}
body.aw-customer-b2b .hero-eyebrow .dot {
    background: var(--green, #1f8a52);
    box-shadow: 0 0 0 4px rgba(31, 138, 82, 0.2);
}

/* Hero copy panel — soft white card on mountains so text stays readable */
.hero-copy {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(16, 32, 63, 0.08);
    border-radius: 14px;
    padding: 38px 36px;
    box-shadow: 0 6px 24px rgba(14, 42, 71, 0.06);
}

/* Mobile — slightly less mountain (different crop, softer wash) */
@media (max-width: 720px) {
    .hero {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.98)),
            url("https://www.atlasworks.nl/wp-content/uploads/2023/10/Crossing_the_High_Atlas_mountains_in_Morocco_-_45020232664-1-1024x683.jpg") center center / cover no-repeat;
    }
    .hero-copy {
        padding: 22px 20px;
    }
}

/* ===================================================================
   2026-04-30 FIX BLOCK — alignment, vier stappen, product page, B2C journey
   =================================================================== */

/* FIX 1: Vier stappen — checkout .step (L1494) was hijacking homepage process */
.process > .step {
    display: block !important;
    padding: 26px !important;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink-1);
    font-size: 15px;
    font-weight: 400;
    align-items: stretch;
    gap: 0;
    position: relative;
}
.process > .step:last-child { border-right: none; }
.process > .step .num {
    display: block !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--orange) !important;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    margin: 0 0 4px;
    place-items: start;
}
.process > .step h4 {
    margin: 12px 0 6px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--navy-900);
}
.process > .step p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-3);
    line-height: 1.55;
}
@media (max-width: 1080px) {
    .process { grid-template-columns: 1fr 1fr; }
    .process > .step:nth-child(2) { border-right: none; }
}
@media (max-width: 640px) {
    .process { grid-template-columns: 1fr; }
    .process > .step { border-right: none; border-bottom: 1px solid var(--line); }
    .process > .step:last-child { border-bottom: none; }
}

/* FIX 2: Single-product page layout (was unstyled WC default) */
.aw--product .woocommerce div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: start;
}
.aw--product .woocommerce div.product .woocommerce-product-gallery,
.aw--product .woocommerce div.product .images {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    margin: 0 !important;
}
.aw--product .woocommerce div.product .summary,
.aw--product .woocommerce div.product .entry-summary {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 8px 0;
}
.aw--product .woocommerce div.product .product_title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--navy-900);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    margin: 0 0 14px;
}
.aw--product .woocommerce div.product p.price,
.aw--product .woocommerce div.product span.price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--navy-900);
    margin: 0 0 18px;
}
.aw--product .woocommerce div.product .woocommerce-product-details__short-description {
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 22px;
}
.aw--product .woocommerce div.product form.cart {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.aw--product .woocommerce div.product form.cart .quantity input.qty {
    width: 64px;
    padding: 10px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
}
.aw--product .woocommerce div.product form.cart button.single_add_to_cart_button {
    background: var(--navy-900);
    color: #fff;
    border: 0;
    padding: 12px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.aw--product .woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background: var(--navy-800, #143560);
    transform: translateY(-1px);
}
.aw--product .woocommerce div.product .product_meta {
    font-size: 13px;
    color: var(--ink-3);
    border-top: 1px solid var(--line);
    padding-top: 14px;
    margin-top: 8px;
}
.aw--product .woocommerce div.product .woocommerce-tabs,
.aw--product .woocommerce div.product .related,
.aw--product .woocommerce div.product .upsells {
    grid-column: 1 / -1;
    margin-top: 40px;
}
.aw--product .woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--line);
    padding: 0;
    margin: 0 0 18px;
}
.aw--product .woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0 18px 0 0;
    padding: 0;
}
.aw--product .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 0;
    color: var(--ink-3);
    font-weight: 600;
    font-size: 14px;
}
.aw--product .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--navy-900);
    border-bottom: 2px solid var(--orange);
}
.aw--product .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.aw--product .woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
@media (max-width: 900px) {
    .aw--product .woocommerce div.product { grid-template-columns: 1fr; gap: 24px; }
    .aw--product .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* FIX 3: Cart + Checkout WC default-shortcode polish */
.aw--cart .woocommerce table.shop_table,
.aw--checkout .woocommerce table.shop_table {
    border: 1px solid var(--line);
    border-radius: 12px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--paper);
}
.aw--cart .woocommerce table.shop_table th,
.aw--checkout .woocommerce table.shop_table th {
    background: var(--cream);
    color: var(--ink-2);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.aw--cart .woocommerce table.shop_table td,
.aw--checkout .woocommerce table.shop_table td {
    padding: 16px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-1);
}
.aw--cart .woocommerce a.button,
.aw--cart .woocommerce button.button,
.aw--checkout .woocommerce a.button,
.aw--checkout .woocommerce button.button,
.aw--cart .woocommerce input[type="submit"].button,
.aw--checkout .woocommerce input[type="submit"].button {
    background: var(--navy-900);
    color: #fff;
    border: 0;
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.aw--cart .woocommerce a.button.alt,
.aw--checkout .woocommerce button.alt,
.aw--checkout .woocommerce #place_order {
    background: var(--orange) !important;
    color: #fff !important;
}
.aw--cart .woocommerce a.button:hover,
.aw--checkout .woocommerce a.button:hover { background: var(--navy-800, #143560); }
.aw--checkout .woocommerce form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.aw--checkout .woocommerce #customer_details { grid-column: 1; }
.aw--checkout .woocommerce #order_review_heading,
.aw--checkout .woocommerce #order_review { grid-column: 2; }
.aw--checkout .woocommerce #order_review {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
    position: sticky;
    top: 20px;
}
.aw--checkout .woocommerce h3 {
    font-family: var(--font-display);
    color: var(--navy-900);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 12px;
}
.aw--checkout .woocommerce input[type="text"],
.aw--checkout .woocommerce input[type="email"],
.aw--checkout .woocommerce input[type="tel"],
.aw--checkout .woocommerce textarea,
.aw--checkout .woocommerce select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--cream);
}
.aw--checkout .woocommerce label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
@media (max-width: 900px) {
    .aw--checkout .woocommerce form.checkout { grid-template-columns: 1fr; }
    .aw--checkout .woocommerce #order_review { position: static; }
}

/* FIX 4: B2C/B2B journey — actually hide kassa sections in B2C mode */
body.aw-customer-b2c .pos-hero,
body.aw-customer-b2c .akb-hero,
body.aw-customer-b2c #kassa-hero,
body.aw-customer-b2c .akb-section[data-aw-audience="b2b"],
body.aw-customer-b2c .b2b-only,
body.aw-customer-b2c .aw--kassa .pos-hero { display: none !important; }
body.aw-customer-b2b .b2c-only { display: none !important; }
body.aw-customer-b2c .svc-card[data-aw-audience="b2b"] { display: none; }

/* FIX 5: Mountain hero re-crop — show houses + earth (was center right) */
.hero {
    background:
        linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.86) 42%, rgba(255,255,255,0.50) 75%, rgba(255,255,255,0.20) 100%),
        linear-gradient(180deg, rgba(219,232,255,0.18), rgba(255,255,255,0)),
        url("https://www.atlasworks.nl/wp-content/uploads/2023/10/Crossing_the_High_Atlas_mountains_in_Morocco_-_45020232664-1-1536x1024.jpg") 70% 65% / cover no-repeat !important;
}
@media (max-width: 720px) {
    .hero {
        background:
            linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.98)),
            url("https://www.atlasworks.nl/wp-content/uploads/2023/10/Crossing_the_High_Atlas_mountains_in_Morocco_-_45020232664-1-1024x683.jpg") center 60% / cover no-repeat !important;
    }
}

/* FIX 6: More logo-blue across UI (subtle accents) */
:root {
    --aw-logo-blue: #1656A7;
    --aw-logo-blue-soft: rgba(22, 86, 167, 0.08);
}
.sec-eyebrow {
    color: var(--aw-logo-blue) !important;
    font-weight: 700;
}
section.sec.alt { background: var(--aw-logo-blue-soft); }
.btn.btn-primary, .aw-btn-primary, button.btn-primary {
    background: var(--aw-logo-blue);
    border-color: var(--aw-logo-blue);
}
.btn.btn-primary:hover { background: var(--navy-900); }
.brand-cell .count { color: var(--aw-logo-blue); }
.svc-card .svc-icon { color: var(--aw-logo-blue); }
.page-hero h1 { color: var(--navy-900); }
.page-hero { border-bottom: 2px solid var(--aw-logo-blue-soft); }

/* FIX 7: Forced max-width on pages WC shortcode-rendered content might break */
.aw-main { width: 100%; }
.aw--cart .wrap, .aw--checkout .wrap, .aw--product .wrap, .aw--account .wrap {
    width: min(1240px, 100% - 40px);
    margin-inline: auto;
}

/* FIX 8: Popular products section visual differentiation */
.popular-strip { background: linear-gradient(180deg, var(--aw-logo-blue-soft), transparent); }
.popular-strip .sec-eyebrow::before { content: "* "; color: var(--orange); }


/* ===================================================================
   2026-05-01 FIX BLOCK 2 — product page polish + B2C/B2B journey deepening
   =================================================================== */

/* FIX 9: Related products grey placeholder
   ul.products.columns-4 had higher specificity than .aw--product .woocommerce ul.products.
   Force grid via tighter selector + override Woo's float layout. */
.aw--product .woocommerce ul.products,
.aw--product .woocommerce ul.products.columns-1,
.aw--product .woocommerce ul.products.columns-2,
.aw--product .woocommerce ul.products.columns-3,
.aw--product .woocommerce ul.products.columns-4,
.aw--product .woocommerce ul.products.columns-5,
.aw--product .woocommerce ul.products.columns-6 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}
.aw--product .woocommerce ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.aw--product .woocommerce ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: var(--line-2);
}
.aw--product .woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: contain;
    background: linear-gradient(160deg, #F0F4FA, #DEE7F4);
    border-radius: 8px;
    padding: 10px;
    margin: 0 0 10px;
}
.aw--product .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--navy-900);
    margin: 0 0 6px !important;
    padding: 0 !important;
    line-height: 1.3;
}
.aw--product .woocommerce ul.products li.product .price {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--navy-900);
}
.aw--product .woocommerce ul.products li.product .price del { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.aw--product .woocommerce ul.products li.product .button,
.aw--product .woocommerce ul.products li.product a.button {
    display: inline-block;
    margin-top: 10px;
    background: var(--navy-900);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
.aw--product .woocommerce ul.products li.product .added_to_cart {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--green);
}
@media (max-width: 1080px) {
    .aw--product .woocommerce ul.products,
    .aw--product .woocommerce ul.products.columns-3,
    .aw--product .woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
    .aw--product .woocommerce ul.products,
    .aw--product .woocommerce ul.products.columns-3,
    .aw--product .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* FIX 10: Hide duplicate H1 on product pages (page-hero h1 + .product_title both render).
   Keep page-hero h1 (it sits in the breadcrumb context); hide the duplicate inside summary. */
.aw--product .summary h1.product_title.entry-title { display: none; }

/* FIX 11: Gallery opacity fallback — if FlexSlider JS hasn't run within 2s, force visible. */
.aw--product .woocommerce-product-gallery {
    animation: aw-gallery-fallback 0s linear 2s forwards;
}
@keyframes aw-gallery-fallback { to { opacity: 1 !important; } }
.aw--product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper { opacity: 1 !important; }

/* FIX 12: .onsale badge — was rendered as sibling-before gallery. Anchor it inside. */
.aw--product .woocommerce div.product { position: relative; }
.aw--product .woocommerce div.product > span.onsale,
.aw--product .woocommerce div.product .woocommerce-product-gallery span.onsale {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    background: var(--orange);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    margin: 0;
    min-height: auto;
    line-height: 1;
}

/* FIX 13: Hide pasted ChatGPT-export wrapper DOM (HP product short description). */
.aw--product .woocommerce-product-details__short-description article[data-testid],
.aw--product .woocommerce-product-details__short-description div[data-message-author-role],
.aw--product .woocommerce-product-details__short-description div[data-message-model-slug] {
    all: unset;
    display: block;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.6;
}

/* ── B2C/B2B journey deepening (2026-05-01) ─────────────────────────── */

/* Default visibility for utility classes */
.b2c-only, .b2b-only, [data-aw-audience] { display: revert; }

/* B2C body: hide everything tagged b2b-only or [data-aw-audience="b2b"] */
body.aw-customer-b2c .b2b-only,
body.aw-customer-b2c [data-aw-audience="b2b"] { display: none !important; }

/* B2B body: hide everything tagged b2c-only or [data-aw-audience="b2c"] */
body.aw-customer-b2b .b2c-only,
body.aw-customer-b2b [data-aw-audience="b2c"] { display: none !important; }

/* When toggle has neither class set yet (default state) — treat as B2C */
body:not(.aw-customer-b2c):not(.aw-customer-b2b) .b2b-only { display: none !important; }

/* B2C — softer green-toned primary CTA */
body.aw-customer-b2c .hero-actions .btn-primary {
    background: #1a8f47;
    border-color: #1a8f47;
}
body.aw-customer-b2c .hero-actions .btn-primary:hover { background: #15783b; }

/* B2C — hide POS demo card from hero visual (shows only laptop + 100+ stamp) */
body.aw-customer-b2c .hero-card.hv-pos { display: none !important; }
body.aw-customer-b2c .hero-visual { grid-template-rows: auto auto; }

/* B2C — eyebrow/section accents in green for warmth */
body.aw-customer-b2c .sec-eyebrow { color: #136634 !important; }
body.aw-customer-b2c .hero-eyebrow .dot {
    background: #1a8f47;
    box-shadow: 0 0 0 4px rgba(26, 143, 71, 0.18);
}

/* B2B — keep navy/orange (existing default), maybe add a subtle "ZAKELIJK" stripe to USP bar */
body.aw-customer-b2b .promo-strip::before {
    content: "ZAKELIJK · ";
    font-weight: 700;
    color: var(--orange);
    margin-right: 8px;
    letter-spacing: 0.06em;
}
body.aw-customer-b2c .promo-strip::before {
    content: "PARTICULIER · ";
    font-weight: 700;
    color: #1a8f47;
    margin-right: 8px;
    letter-spacing: 0.06em;
}

/* B2C contact form — submit button copy via ::after */
body.aw-customer-b2c .contact-form button[type="submit"] { background: #1a8f47; border-color: #1a8f47; }

/* Mobile B2C/B2B switch entry point — show toggle in mobile bottom bar */
@media (max-width: 720px) {
    .aw-mobile-bar .aw-customer-switch {
        display: inline-flex !important;
        margin: 0;
        padding: 2px;
    }
    .aw-mobile-bar .aw-customer-switch button {
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* Quick-cats audience tagging works automatically via [data-aw-audience] selectors above */

/* Hide entire Process section on B2C (already wrapped with class b2b-only in process.php) */
/* Hide entire B2B leasing section on B2C (b2b-leasing.php has .b2b-only on its <section>) */

/* Make B2C version of services grid look balanced if 4 items remain (was 6) */
body.aw-customer-b2c .services { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
    body.aw-customer-b2c .services { grid-template-columns: repeat(4, 1fr); }
}

/* ── Footer 7-link audit polish ─────────────────────────────────────── */
footer .foot-col a { display: block; padding: 4px 0; }

/* FIX: Google reviews badge — remove pointer-event spam if href falls back to # */
.contact-google[href="#"] { pointer-events: none; opacity: 0.7; }


/* ===================================================================
   2026-05-01 FIX BLOCK 3 — funnel/UX/SEO improvements (post user feedback)
   =================================================================== */

/* FIX 14: Defensive related-products card styling — defeat parent-theme cascades */
.aw--product .woocommerce ul.products li.product { display: block !important; }
.aw--product .woocommerce ul.products li.product > a {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}
.aw--product .woocommerce ul.products li.product > a img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.aw--product .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.aw--product .woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--navy-900, #0E2A47) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.aw--product .woocommerce ul.products li.product .price,
.aw--product .woocommerce ul.products li.product .woocommerce-Price-amount {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--navy-900, #0E2A47) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}
.aw--product .woocommerce ul.products li.product .button.add_to_cart_button {
    display: inline-block !important;
    color: #fff !important;
}
/* Hide WC's screen-reader-text spans inside related cards (they sometimes show as visible text) */
.aw--product .woocommerce ul.products li.product .screen-reader-text {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* FIX 15: Payment badges block on product page (above/near add-to-cart) */
.aw-pay-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
    padding: 12px 14px;
    background: var(--cream, #F5F2EC);
    border: 1px solid var(--line, #E5E1D8);
    border-radius: 10px;
    font-size: 13px;
    color: var(--ink-2);
}
.aw-pay-badges .lbl { font-weight: 600; color: var(--ink-1); margin-right: 4px; }
.aw-pay-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    color: var(--navy-900);
}
.aw-pay-badges .in3-pitch {
    flex-basis: 100%;
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 12px;
}
.aw-pay-badges .in3-pitch strong { color: var(--orange); }

/* FIX 16: Trust strip block under add-to-cart (1 aanspreekpunt + atlaspos.nl link) */
.aw-trust-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--ink-2);
}
.aw-trust-mini li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.aw-trust-mini li svg { flex: 0 0 auto; color: var(--aw-logo-blue, #1656A7); }
.aw-trust-mini li strong { color: var(--navy-900); font-weight: 600; }

/* FIX 17: atlaspos.nl card on kassasystemen page (sister-site cross-link) */
.aw-atlaspos-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    margin: 24px 0;
    padding: 22px 26px;
    background: linear-gradient(135deg, #0E2A47 0%, #1656A7 100%);
    color: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(14, 42, 71, 0.18);
}
.aw-atlaspos-card h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.aw-atlaspos-card p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
}
.aw-atlaspos-card a.atlaspos-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--orange, #e76a1e);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .15s, transform .15s;
}
.aw-atlaspos-card a.atlaspos-cta:hover { background: #ff7a30; transform: translateY(-1px); }
@media (max-width: 720px) {
    .aw-atlaspos-card { grid-template-columns: 1fr; text-align: left; }
}

/* FIX 18: Free-shipping threshold notice on cart */
.aw-free-shipping-bar {
    margin: 0 0 16px;
    padding: 14px 18px;
    background: linear-gradient(90deg, var(--green-bg, #E8F4EE) 0%, transparent 100%);
    border-left: 3px solid var(--green, #1a8f47);
    border-radius: 8px;
    font-size: 14px;
    color: var(--ink-1);
}
.aw-free-shipping-bar strong { color: var(--green, #1a8f47); }
.aw-free-shipping-bar.is-met { background: var(--green, #1a8f47); color: #fff; border-color: var(--green); }
.aw-free-shipping-bar.is-met strong { color: #fff; }

/* FIX 19: Sort dropdown on /assortiment/ (WC catalog ordering) */
.woocommerce-ordering, .aw-shop-sort {
    margin: 0 0 18px;
    text-align: right;
}
.woocommerce-ordering select, .aw-shop-sort select {
    padding: 8px 12px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--paper);
    font-size: 14px;
    font-family: inherit;
    color: var(--ink-1);
    cursor: pointer;
}
.woocommerce-result-count {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--ink-3);
}

/* FIX 20: WC stock indicator emphasis */
.aw--product .woocommerce .stock {
    display: inline-block;
    padding: 4px 10px;
    background: var(--green-bg, #E8F4EE);
    color: var(--green, #1a8f47);
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    margin: 0 0 14px;
}
.aw--product .woocommerce .stock.out-of-stock {
    background: rgba(239, 68, 68, 0.12);
    color: #c53030;
}

/* FIX 21: Mobile sticky add-to-cart bar on product page */
@media (max-width: 720px) {
    .aw-mobile-sticky-buy {
        position: fixed;
        bottom: 64px; /* above mobile bottom-bar */
        left: 0;
        right: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }
    .aw-mobile-sticky-buy .price {
        font-weight: 700;
        font-size: 16px;
        color: var(--navy-900);
    }
    .aw-mobile-sticky-buy .btn {
        background: var(--orange);
        color: #fff;
        padding: 10px 18px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        border: 0;
    }
    .aw-mobile-sticky-buy.is-hidden { display: none; }
    .aw--product { padding-bottom: 110px; } /* space for sticky */
}

/* FIX 22: Cross-sell strip on product page header */
.aw-cross-sell-strip {
    margin: 28px 0 0;
}
.aw-cross-sell-strip h3 {
    font-family: var(--font-display);
    color: var(--navy-900);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 14px;
}

/* FIX 23: Mobile menu hamburger touch-target enlargement */
@media (max-width: 720px) {
    .aw-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
}


/* ===================================================================
   2026-05-01 FIX BLOCK 4 — menu/product/cart/checkout/thank-you bugs
   Synthesizes 4-agent audit findings into one CSS append.
   =================================================================== */

/* ── HAMBURGER BUTTON (the 3 spans were unstyled — users saw blank) ── */
.aw-menu-toggle {
    display: none; /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    padding: 10px;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
}
.aw-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--navy-900, #0E2A47);
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
    transform-origin: center;
}
.aw-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.aw-menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.aw-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.aw-menu-toggle:hover { background: rgba(14, 42, 71, 0.06); }
.aw-menu-toggle:focus-visible {
    outline: 2px solid var(--orange, #e76a1e);
    outline-offset: 2px;
}

/* Show hamburger only at <=720px */
@media (max-width: 720px) {
    .aw-menu-toggle { display: inline-flex; }
}

/* ── MOBILE DRAWER (.nav was unpositioned — invisible) ── */
@media (max-width: 720px) {
    .top .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 320px;
        height: 100dvh;
        background: #fff;
        padding: 80px 20px 100px;
        z-index: 80;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .3s ease;
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    }
    .top .nav.is-open { transform: translateX(0); }
    .top .nav a {
        display: block;
        padding: 14px 16px;
        border-radius: 10px;
        color: var(--ink-1);
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: background .15s, color .15s;
    }
    .top .nav a:hover,
    .top .nav a.active {
        background: rgba(14, 42, 71, 0.06);
        color: var(--navy-900);
    }
    .top .nav a.cta {
        background: var(--orange, #e76a1e);
        color: #fff !important;
        font-weight: 600;
        margin-top: 16px;
        text-align: center;
    }
    /* Backdrop */
    body.aw-nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 75;
        animation: aw-fade-in .25s ease forwards;
    }
    body.aw-nav-open { overflow: hidden; }

    /* Mobile B2C/B2B switch entry inside drawer */
    .top .nav .aw-customer-switch {
        display: inline-flex !important;
        margin: 16px auto 0;
    }

    /* Hide inline header search on mobile (too cramped) */
    .top .search { display: none; }
    /* Mobile nav cart count */
    .top .nav .aw-cart-count {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 8px;
        background: var(--orange);
        color: #fff;
        font-size: 11px;
        border-radius: 999px;
        font-weight: 700;
    }
}
@keyframes aw-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── PRODUCT PAGE: mobile sticky add-to-cart bar (PHP-injected) ── */
.aw-mobile-sticky-buy {
    display: none;
}
@media (max-width: 720px) {
    .aw-mobile-sticky-buy {
        display: flex;
        position: fixed;
        bottom: 64px; /* above .aw-mobile-bar */
        left: 0;
        right: 0;
        z-index: 60;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    }
    .aw-mobile-sticky-buy .aw-msb-price {
        font-weight: 700;
        font-size: 17px;
        color: var(--navy-900);
        line-height: 1.1;
    }
    .aw-mobile-sticky-buy .aw-msb-price small {
        display: block;
        font-size: 11px;
        font-weight: 500;
        color: var(--ink-3);
        margin-top: 2px;
    }
    .aw-mobile-sticky-buy .aw-msb-btn {
        flex: 1;
        max-width: 200px;
        padding: 12px 16px;
        background: var(--orange, #e76a1e);
        color: #fff !important;
        text-decoration: none;
        text-align: center;
        font-weight: 600;
        font-size: 15px;
        border: 0;
        border-radius: 10px;
        cursor: pointer;
    }
    .aw--product { padding-bottom: 130px; }
}

/* ── PRODUCT PAGE: quantity input touch-optimized ── */
@media (max-width: 720px) {
    .aw--product .woocommerce div.product form.cart .quantity input.qty {
        width: 80px !important;
        height: 48px;
        font-size: 17px;
        padding: 10px 14px;
    }
    .aw--product .woocommerce div.product form.cart {
        flex-wrap: wrap;
    }
    .aw--product .woocommerce div.product form.cart button.single_add_to_cart_button {
        height: 48px;
        font-size: 16px;
        padding: 12px 24px;
        flex: 1;
        min-width: 180px;
    }
}

/* In3 pitch full-width line on narrow */
.aw-pay-badges .in3-pitch { flex-basis: 100%; }

/* ── PRODUCT PAGE: tab active state contrast ── */
.aw--product .woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--navy-900) !important;
    font-weight: 700;
    border-bottom: 3px solid var(--orange, #e76a1e);
    padding-bottom: 8px;
}

/* ── CART: line item image slot ── */
.aw--cart .cart-item-thumb {
    display: inline-block;
    width: 56px;
    height: 56px;
    margin-right: 12px;
    vertical-align: middle;
}
.aw--cart .cart-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 4px;
    display: block;
}

/* ── CART: remove button 44px touch target ── */
.aw--cart .woocommerce table.shop_table a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    color: #c53030 !important;
    text-decoration: none;
    transition: background .15s;
    font-weight: 700;
}
.aw--cart .woocommerce table.shop_table a.remove:hover {
    background: rgba(220, 38, 38, 0.18);
    color: #c53030;
}

/* ── CART: distinguish coupon button (secondary) from checkout (primary) ── */
.aw--cart .woocommerce-cart-form button[name="apply_coupon"] {
    background: transparent !important;
    color: var(--navy-900) !important;
    border: 1px solid var(--line-2) !important;
}
.aw--cart .woocommerce a.checkout-button,
.aw--cart .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: var(--orange, #e76a1e) !important;
    color: #fff !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 700;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 14px;
}

/* ── CART: totals sticky on desktop ── */
@media (min-width: 901px) {
    .aw--cart .cart-collaterals,
    .aw--cart .cart_totals {
        position: sticky;
        top: 90px;
    }
}

/* ── CART: quantity input mobile ── */
@media (max-width: 720px) {
    .aw--cart .woocommerce table.shop_table input[type="number"] {
        width: 64px !important;
        height: 44px;
        font-size: 16px;
        padding: 8px 12px;
        border: 1px solid var(--line-2);
        border-radius: 8px;
    }
    /* Stack table rows as cards on mobile */
    .aw--cart .woocommerce table.shop_table_responsive tr td {
        padding: 12px 8px;
    }
}

/* ── CART: empty state ── */
.aw-empty-cart {
    text-align: center;
    padding: 60px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.aw-empty-cart h2 {
    font-family: var(--font-display);
    color: var(--navy-900);
    font-size: 24px;
    margin: 0 0 12px;
}
.aw-empty-cart p { color: var(--ink-2); margin: 0 0 22px; }
.aw-empty-cart a.btn-shop {
    display: inline-block;
    padding: 12px 24px;
    background: var(--orange);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
}

/* ── THANK-YOU page polish ── */
.aw--woo .woocommerce-order h1,
.aw--woo .woocommerce-thankyou-order-received {
    font-family: var(--font-display);
    color: var(--navy-900);
    font-size: 28px;
    margin: 0 0 14px;
}
.aw--woo .woocommerce-order .woocommerce-order-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 24px 0;
    padding: 0;
}
.aw--woo .woocommerce-order .woocommerce-order-overview li {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    font-size: 13px;
    color: var(--ink-3);
}
.aw--woo .woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    color: var(--navy-900);
    font-size: 16px;
    margin-top: 4px;
    font-weight: 700;
}
.aw-thankyou-cta {
    margin: 32px 0;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--green-bg, #E8F4EE), transparent);
    border-left: 4px solid var(--green, #1a8f47);
    border-radius: 8px;
}
.aw-thankyou-cta h3 { margin: 0 0 6px; color: var(--navy-900); font-size: 18px; font-weight: 700; }
.aw-thankyou-cta p { margin: 0; color: var(--ink-2); }

/* ── CHECKOUT: newsletter consent JS-swapped, but ensure label wraps cleanly ── */
.aw--checkout .woocommerce label,
.aw--checkout .woocommerce-additional-fields label {
    line-height: 1.5;
}