* { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #f6f8fc;
      color: #172033;
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    .container { width: min(1120px, 92%); margin: auto; }

    .announcement {
      padding: 9px 16px;
      background: #101b32;
      color: white;
      text-align: center;
      font-size: 13px;
    }

    header { background: white; border-bottom: 1px solid #e5e9f1; }
    .navigation {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px 0;
    }

    .brand { font-size: 20px; font-weight: 800; line-height: 1.2; }
    .brand span {
      display: block;
      color: #667085;
      font-size: 11px;
      letter-spacing: 3px;
      margin-top: 6px;
    }

    nav {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      font-size: 14px;
      font-weight: 600;
    }

    nav a:hover, nav a[aria-current="page"] { color: #2563eb; }
    .heading { padding: 40px 0 22px; }
    .eyebrow {
      color: #2563eb;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 2px;
    }

    h1 {
      font-size: clamp(32px, 5vw, 44px);
      letter-spacing: -1px;
      line-height: 1.2;
      margin: 10px 0;
    }

    .muted { color: #667085; }
    .heading p { margin-bottom: 0; }

    .notice {
      padding: 12px 16px;
      background: #fff7e6;
      border: 1px solid #f2d69c;
      border-radius: 10px;
      font-size: 14px;
      margin-bottom: 25px;
    }

    .layout {
      display: grid;
      grid-template-columns: 1fr 340px;
      gap: 25px;
      align-items: start;
      margin-bottom: 40px;
    }

    .items { display: grid; gap: 16px; }
    .item {
      display: grid;
      grid-template-columns: 85px 1fr;
      gap: 20px;
      background: white;
      border: 1px solid #e5e9f1;
      border-radius: 16px;
      padding: 22px;
    }

    .illustration {
      background: #edf2fa;
      border-radius: 12px;
      min-height: 110px;
      display: grid;
      place-items: center;
      align-self: start;
    }

    .phone {
      width: 43px;
      height: 78px;
      border: 4px solid #182235;
      border-radius: 10px;
      background: linear-gradient(145deg, var(--phone-colour), #e6eaff);
      transform: rotate(-8deg);
    }

    .item h2 { font-size: 19px; margin: 0 0 4px; }
    .specs { font-size: 12px; color: #667085; margin: 0 0 8px; }
    .unit-price { font-weight: 700; font-size: 14px; }

    .item-controls {
      display: flex;
      align-items: end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 15px;
      margin-top: 15px;
    }

    label { display: block; font-size: 12px; font-weight: 700; }
    input {
      width: 75px;
      padding: 8px;
      margin-top: 5px;
      border: 1px solid #d7deea;
      border-radius: 8px;
    }

    .remove {
      border: 0;
      background: transparent;
      color: #b42318;
      font-size: 13px;
      padding: 8px 0;
    }

    .line-total { font-weight: 800; }
    .summary {
      background: white;
      border: 1px solid #e5e9f1;
      border-radius: 16px;
      padding: 25px;
    }

    .summary h2 { margin: 0 0 20px; font-size: 21px; }
    .summary-row {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      margin: 12px 0;
      font-size: 14px;
    }

    .total {
      border-top: 1px solid #e5e9f1;
      padding-top: 17px;
      margin-top: 20px;
      font-size: 20px;
      font-weight: 800;
    }

    .button {
      display: block;
      width: 100%;
      text-align: center;
      padding: 13px 18px;
      border: 1px solid #2563eb;
      border-radius: 10px;
      background: #2563eb;
      color: white;
      font-weight: 700;
      margin-top: 15px;
    }

    .button:hover { background: #1d4ed8; }
    .button.secondary {
      background: white;
      color: #172033;
      border-color: #d7deea;
    }

    .small { font-size: 12px; }
    .empty {
      text-align: center;
      padding: 50px 25px;
      background: white;
      border: 1px solid #e5e9f1;
      border-radius: 16px;
      margin-bottom: 40px;
    }

    .empty h2 { margin-top: 0; }
    .empty .button { display: inline-block; width: auto; }

    .tracking {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
      padding: 22px;
      background: #eaf0fc;
      border-radius: 14px;
      margin-bottom: 40px;
    }

    .tracking p { margin: 0; font-size: 14px; }
    .tracking a { color: #2563eb; font-weight: 700; font-size: 14px; }
    #feedback { margin-bottom: 18px; font-size: 14px; }

    footer {
      padding: 25px 0;
      border-top: 1px solid #e5e9f1;
      color: #667085;
      font-size: 13px;
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 15px;
    }

    :focus-visible {
      outline: 3px solid #f59e0b;
      outline-offset: 3px;
    }

    [hidden] { display: none !important; }

    @media (max-width: 850px) {
      .layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 500px) {
      nav { gap: 16px; }
      .item { grid-template-columns: 60px 1fr; gap: 12px; padding: 16px; }
      .illustration { min-height: 90px; }
    }