

    :root {
      --lime: #a5ca10;
      --lime-dark: #6f9010;
      --ink: #20211f;
      --muted: #6c6d68;
      --line: #e8e9e1;
      --cream: #fbfbf8;
      --sage: #eff1e4;
    }

    * { box-sizing: border-box; }
    body { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    button, input { font: inherit; }

    .notice {
      display: flex; justify-content: center; gap: 36px; align-items: center;
      min-height: 45px; padding: 10px 24px; background: var(--sage); font-size: 13px;
    }
    .notice__item { display: flex; gap: 9px; align-items: center; white-space: nowrap; }
    .notice__item:last-child { margin-left: auto; }
    .notice__item:nth-last-child(2) { margin-right: auto; }

    .header { background: #fff; border-bottom: 1px solid var(--line); }
    .header__main, .nav { max-width: 1420px; margin: auto; padding-left: 32px; padding-right: 32px; }
    .header__main { min-height: 94px; display: grid; grid-template-columns: 245px minmax(280px, 1fr) auto; gap: 36px; align-items: center; }
    .logo { color: var(--lime); font-size: 45px; line-height: 1; font-weight: 900; letter-spacing: -3px; text-decoration: none; }

    .search { position: relative; display: flex; align-items: center; max-width: 720px; width: 100%; justify-self: center; }
    .search input { width: 100%; height: 52px; border: 1px solid transparent; border-radius: 28px; outline: 0; background: #f7f7f3; padding: 0 58px 0 24px; color: var(--ink); font-size: 14px; transition: .2s; }
    .search input:focus { background: #fff; border-color: var(--lime); box-shadow: 0 0 0 4px rgb(165 202 16 / .15); }
    .search button { position: absolute; right: 8px; height: 38px; width: 42px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; border-radius: 20px; }
    .search button:hover { background: #eceee4; }

    .actions { display: flex; gap: 24px; align-items: center; }
    .action { display: flex; align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 0; padding: 7px 0; white-space: nowrap; cursor: pointer; font-size: 14px; }
    .action:hover { color: var(--lime-dark); }
    .cart-count { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--lime); color: #fff; font-size: 11px; font-weight: 700; }

    .nav { min-height: 48px; display: flex; gap: 42px; align-items: flex-end; }
    .nav a { height: 48px; display: flex; align-items: center; border-bottom: 2px solid transparent; color: var(--ink); text-decoration: none; font-size: 14px; }
    .nav a:hover, .nav a[aria-current="page"] { color: var(--lime-dark); border-bottom-color: var(--lime); }
    .menu-button { display: none; }
    .icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    @media (max-width: 900px) {
      .notice { justify-content: flex-start; overflow-x: auto; gap: 22px; }
      .notice__item:last-child, .notice__item:nth-last-child(2) { margin: 0; }
      .header__main { grid-template-columns: auto 1fr auto; gap: 18px; min-height: 76px; padding-left: 20px; padding-right: 20px; }
      .logo { font-size: 35px; }
      .search { order: 3; grid-column: 1 / -1; padding-bottom: 16px; max-width: none; }
      .actions { gap: 12px; }
      .action__label { display: none; }
      .nav { padding: 0 20px; gap: 25px; overflow-x: auto; }
    }
    @media (max-width: 560px) {
      .notice { min-height: 38px; font-size: 11px; padding: 8px 16px; }
      .notice__item:nth-child(2), .notice__item:nth-child(3) { display: none; }
      .menu-button { display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); padding: 4px; }
      .header__main { grid-template-columns: auto 1fr auto; }
      .actions .action:first-child { display: none; }
      .nav { display: none; }
    }

